styles_Designs.css

@font-face {
  font-family: 'light';
  src: url('Fonts/AOTFShinGoProLight.otf');
  font-weight: normal;
}

@font-face {
  font-family: 'medium';
  src: url('Fonts/AOTFShinGoProMedium.otf');
  font-weight: normal;
}

*{
  font-family: 'light';

}

body{
  height:400%;
  width:100%;
  margin:0;
  display: flex;
  background-color: #ffffff;
}

#topBar{
  position:fixed;
  display:flex;
  justify-content: center;
  align-items: center;
  top:0;
  height:10%;
  width:100%;
  background-color: #efefef;
  border-bottom: 2px solid #000000;
}

#logoBar{
  position: relative;
  top:0;
  left: 20px;
  max-width:100%;
  max-height:100%;
}

#nameBar{
  position: relative;
  text-align: left;
  width:auto;
  left:0%;
  top: -3%;
  font-size: 2vw;
  margin-right: auto;
  margin-left: 40px;
  font-weight: bolder;
  font-family: 'medium';
  text-decoration: none;
  color: black;
}

#buttons{
  display: flex;
  justify-content:space-evenly;
  width: 450px;
  height: fit-content;
  margin-bottom: 20px;
}

#top_button{
  max-width: fit-content;
  max-height: fit-content;
  align-items: center;
  width: fit-content;
  height: 20px;
  position: relative;
  top: -100%;
  font-size: 20px;
  color: black;
  text-decoration: none;
}

#main-screen{
  position: absolute;
  width: 100%;
  height: 400%;
  background-repeat: repeat-y;
  background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.75)), url(Imgs/General/banner_fixed.png);

}

#content{
  position: relative;
  margin-top: 100px;
  margin-left: 50px;
  margin-right: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

#image{
  width: 350px;
  height: 350px;

}

#content h2{
  font-size: 40px;
  font-weight: bolder;


}