body {
  margin: 0;
  padding: 0;
  color:  #e6e6e6;
  font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif; 
 cursor: crosshair ;
 overflow-x: hidden;

}

.about-button, .contact-button, .contact-form{
   cursor: crosshair;
  z-index:  40;
}


a{
  color:  white;
  text-decoration:  none;
}

.gradient-background {
  position:  fixed;
  z-index: -10;
  top: 0;
    width:  100vw;
    height: 100vh;
    background: linear-gradient(347deg, #DDDB6A, #A6C3C9, #F9A161, #A77882, #F3D49B);
    background-size: 1200% 1200%;

    -webkit-animation: AnimationName 42s ease infinite;
    -moz-animation: AnimationName 42s ease infinite;
    animation: AnimationName 42s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:47% 0%}
    50%{background-position:54% 100%}
    100%{background-position:47% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:47% 0%}
    50%{background-position:54% 100%}
    100%{background-position:47% 0%}
}
@keyframes AnimationName {
    0%{background-position:47% 0%}
    50%{background-position:54% 100%}
    100%{background-position:47% 0%}
}


.container{
  width:  100vw;
  height:  100vh;
  position: fixed;
  overflow-y: hidden;
  z-index: 30;
  cursor: crosshair ;
  top:  40px;

}
.header-flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  position: fixed;
  gap: .5rem;
  z-index: 10000;
  padding: .7rem 1rem;

}

.menu-button {  
  color:  white;
  cursor: pointer;
  background: none;
  border: none;
  padding: .4rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 100px;
  /* From https://css.glass */
background: rgba(255, 255, 255, 0.09);
backdrop-filter: blur(4.2px);
-webkit-backdrop-filter: blur(4.2px);

}

.menu-button:hover{
  color: rgba(255, 255, 255, 0.558);
  cursor: pointer;  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(7.2px);
  -webkit-backdrop-filter: blur(7.2px);
}
.about-text-wrapper{
  margin-top: 4rem;
  width: 100vw;
  position: absolute;
  overflow: auto;
  display: none;
}

.about-text{
margin: 0  1rem;
font-size: 1.5rem;
overflow-y: auto;
padding: 1rem;

}
.bold-text{
  font-weight: bold;
}
.content {
  text-align: center;
  font-size: 16px;
}



.image {
  position: absolute;
  z-index: 20  ;

}
.mobile-contact-headline{
  font-size:  1.4rem;
  display: none;
}

@media only screen and (max-width: 650px) {

  .container{
      overflow-y: visible;

  }
 .about-text{
  padding: 0;
  margin: 0.5rem;
 }

}