@font-face {

    font-family: 'Bauhausb';

    src: url(Bauhausb.ttf);

}



@font-face {

    font-family: 'Bauhaush';

    src: url(Bauhaush.ttf);

}



*{

    margin: 0px;

}




.background{

    background-image: url(Gradient_Background.png);

    height: 115vh;

    width: 100vw;

    background-position: center center;

    position: fixed;

    z-index: -1;

    display: flex;

    background-size: cover;

}



.pagetop{

    display: flex;

    height: 24vh;

    border-bottom: solid 5px #edc811;

    align-items: end;

    justify-content: space-between;

}



.logo{

    position: relative;

    display: flex;

    height: 19vh;

    left: 3.6vw;

    bottom: 1vh;

}



.logo img{

    max-width: 100%;

    max-height: 100%;

}



.slogan{

    display: inline-flex;

    align-items: end;

    position: relative;

    right: 3.7vw;

}



.smooth{

    color: #edc811;

    font-family: 'Bauhaush';

    font-size: 5.5vw;

    line-height: 1.1;

}



.velv{

    color: white;

    font-family: 'Bauhaush';

    font-size: 12vw;

    line-height: 0.9;

}

.manifesto {
  padding: 120px 20px;
  text-align: center;
}

.manifesto p {
  max-width: 700px;
  margin: 0 auto;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: white;
}

.manifesto {
  margin-top: -100px;
}

.manifesto p {
  text-align: justify;
}

.highlight {
  color: white; 
  font-weight: 600; /* or bold */
  font-family: 'Bauhaush';
  font-size: 20px;
}

.highlight2 {
  color: white; 
  font-weight: 600; /* or bold */
  font-size: 25px;
  font-family: 'Roboto', sans-serif;
}

.highlight3 {
  color: white; 
  font-weight: none; 
  font-family: 'Roboto', sans-serif;
  font-size: 17px;
  
}

.highlight4 {
  color: #edc811; 
  font-weight: 600; /* or bold */
  font-family: 'Bauhaush';
  font-size: 20px;
}


.contact{

    position: fixed;

    right: 2vw;

    bottom: 3vh;

    border: solid 3px #edc811;

    color: white;

    font-family: 'Roboto', sans-serif;

    font-size: 1.5vw;

    width: 17vw;

    height: 6.5vh;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    width: 12vw;

    border-radius: 15px;
    
    background-color: #edc811;

}





@media (max-width: 768px) {

.logo {        
    position: fixed;
    top:15px;      /* distance from top of screen */
    

    width: 100px;
    height: 100px;
}

  .logo img {
    width: 55%;
    height:70%;
    display: block;
  }


}


@media (max-width: 768px) {

  .slogan .smooth {
    font-size: 40px;
    font-weight: bold;
    line-height: 1.1;
    margin: 0;
    
  }

.slogan .velv {
    font-size: 70px;
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: 0px ;
    margin: 0;


      }


}



@media (max-width: 768px) {

  .slogan {
    position: fixed;
    left: 15%;
    top: 2%;
    transform: translateX(-50%, -50%);
    text-align: left;
    gap: 1px;

    display: flex;
    flex-direction: column;
    align-items: center;
    
  }

}





@media (max-width: 768px) {

.pagetop{

    position: fixed;
    border-bottom: solid 3px #edc811;
    z-index: 9999;        /* ?? crucial */
    background: black;    /* prevents transparency issues */   
    display: flex;
    height: 15vh;
    align-items: end;
    justify-content: space-between;

    top: 0;
    left: 0;
    width: 100%;

}

  
}

@media (max-width: 768px) {
.manifesto {
  margin-top: 30px;
}

}



@media (max-width: 768px) {

.contact{

    

    border: solid 5px #edc811;
    border-radius: 5px;
    background-color: #edc811;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 5vw;
    position: static;
    padding: 10px 25px;
    text-decoration: none;   
    display: block;
    width: fit-content;
    margin: 30px auto 0;
       
    width: 22vw;

    height: 7vw;

}

}