@font-face {
  font-family: 'Avenir-Medium';
  src: url('/Fonts/Avenir-Medium.woff2') format('woff2'),
       url('/Fonts/Avenir-medium.woff') format('woff'),
       url('Fonts/Avenir-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  
  font-family: 'Avenir-Light';
  src: url('/Fonts/Avenir-Light.woff2') format('woff2'),
       url('/Fonts/Avenir-Light.woff') format('woff'),
       url('/Fonts/Avenir-Light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
html, body {
  margin:0%;
  padding: 0;
  height: 100%; 
  overflow: hidden;
  background-color: black;
}
.flexbox-container {
  position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.flexbox-item {
text-align: center;
justify-content: center;

}
.flexbox-item-1 {
  width: 100vw;
  height:30vh;
  z-index:1;
}
.flexbox-item-1-1 {
  width: 100vw;
  height:10vh;
  margin-top:-15vh;
  z-index:1;
}
.flexbox-item-1-2{
  width: 60vw;
  height:70vh;
  margin-top:-15vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index:1;
 
}

.flexbox-item-7{
 position: fixed;
  display: flex;
 top:0;
 left:50;
  z-index:0;
 height: 100vh;
 
}
.flexbox-item-8{
  width: 60vw;
  height:10vh;
  margin-top:2vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index:1;
 
}
.footer {
  display:flex;
justify-content: center;
  text-align: center; /* Center-align the text */
  font-size: 0.8vw; /* Set the font size */
  color:rgb(255, 255, 255); /* Dark text color */
  font-family: Avenir-Light;

}
.header {
  width: 100%;
  background-color: rgb(0, 0, 0);
  padding: 1em 0;
  text-align: center;
  justify-content: center;
  z-index: 8;
  border-bottom: 0.01em solid #ffffff;
  }
  .home-link {
      color: rgb(255, 255, 255);
      text-decoration: none;
      font-size: 1.6vw;
      font-family: Avenir-Light;
      margin:4vw;
      }
      .home-link:hover {
        color:grey;
        }
h1 {

 justify-content: center;
  text-align:center;
  color:rgb(255, 255, 255);
  font-family: Avenir-Light;
  font-size: 6vh;
  margin-top:25vh;
}
h2 {
 justify-content: center;
  text-align:center;
  color:rgb(255, 255, 255);
  font-family: Avenir-Light;
  z-index:1;
  margin-top:-2%;
  margin-right: 0%;

}

.email-form {
  
  padding: 3rem; /* Padding relative to root font size */
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0); /* Relative to 16px */
  width: 100%; /* Use percentage to adapt to screen width */
margin-top:10vh;
}

/* Styling for input fields and textarea */
.email-form input,
.email-form textarea {
  background-color: rgb(255, 255, 255);
  width: 25vw; /* Full width of the form */
  height: 4vh;;
  margin: 0.5vh; /* 10px vertical margin */
  border: 0.1vh solid rgb(0, 0, 0); /* 1px border */
  border-radius: 0.3125rem; /* 5px border-radius */
  font-size: 2vh; /* Inherit base font size (16px) */
  font-family: Avenir-Medium;
  justify-content: center;
  text-align:left;
  color:rgb(0, 0, 0)
}
#message {
  height:50vh;
  max-height: 40vh;
  max-width: 41.3vw;
  min-width: 51.3vw;
  min-height: 40vh;
  resize:none;
  text-align:center;
}
/* Button styling */
.email-form button {
background-color: black;
  color: rgb(255, 255, 255);
  border: none;
  padding: 1vw; /* 12px top/bottom, 24px left/right */
  cursor: pointer;
  font-size: 3vh; /* 16px font size */
  width: 40vw; /* Full width button */
  font-family: Avenir-Light;
  }

/* Button hover effect */
.email-form button:hover {
  font-family: Avenir-Light;
  color: rgb(126, 126, 126);
}
@media (max-width: 1025px) {
  .home-link {
      color: rgb(255, 255, 255);
      text-decoration: none;
      font-size:3.5vw;
      font-family: Avenir-Light;
      margin:2vw;
      }
      .flexbox-item-1-1 {
        width: 100vw;
        height:10vh;
        margin-top:-23vh;
      }
      .flexbox-item-1-2{
        width: 60vw;
        height:70vh;
        margin-top:-23vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
       
      }
    .footer {
      display:flex;
    justify-content: center;
      text-align: center; /* Center-align the text */
      font-size: 1.5vw; /* Set the font size */
      color:rgb(255, 255, 255); /* Dark text color */
      font-family: Avenir-Light;
    
    }

    .email-form input,
    .email-form textarea {
        background-color: rgb(255, 255, 255);
        width: 50vw; /* Full width of the form */
        height: 4vh;;
        margin: 0.5vh; /* 10px vertical margin */
        border: 0.1vh solid rgb(0, 0, 0); /* 1px border */
        border-radius: 0.3125rem; /* 5px border-radius */
        font-size: 2vh; /* Inherit base font size (16px) */
        font-family: Avenir-Medium;
        justify-content: center;
        text-align:left;
        color:rgb(0, 0, 0)
    }
    #message {
        height:50vh;
        max-height: 40vh;
        max-width: 41.3vw;
        min-width: 51.3vw;
        min-height: 40vh;
        resize:none;
        text-align:center;
    }
.email-form button {
  background-color: black;
      color: rgb(255, 255, 255);
      border: none;
      padding: 1vw; /* 12px top/bottom, 24px left/right */
      cursor: pointer;
      font-size: 4vh; /* 16px font size */
      width: 50vw; /* Full width button */
      font-family: Avenir-Light;
      text-align:center;
      }
}
@media (max-width: 500px) {
.home-link {
  color: rgb(255, 255, 255);
  text-decoration: none;
  font-size:3.5vw;
  font-family: Avenir-Light;
  margin:2vw;
  }
.flexbox-item-1-2{
  width: 70vw;
  height:70vh;
  margin-top:-23vh;
  margin-left:0vw;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
 
}
.footer {
  display:flex;
justify-content: center;
  text-align: center; /* Center-align the text */
  font-size: 1.5vw; /* Set the font size */
  color:rgb(255, 255, 255); /* Dark text color */
  font-family: Avenir-Light;

}

.email-form input,
.email-form textarea {
    background-color: rgb(255, 255, 255);
    width: 70vw; /* Full width of the form */
    height: 4vh;;
    margin: 0.5vh; /* 10px vertical margin */
    border: 0.1vh solid rgb(0, 0, 0); /* 1px border */
    border-radius: 0.3125rem; /* 5px border-radius */
    font-size: 2vh; /* Inherit base font size (16px) */
    font-family: Avenir-Medium;
    justify-content: center;
    text-align:left;
    color:rgb(0, 0, 0)
}
#message {
    height:50vh;
    max-height: 40vh;
    max-width: 70.3vw;
    min-width: 70.3vw;
    min-height: 40vh;
    resize:none;
    text-align:center;
}
.email-form button {
background-color: black;
  color: rgb(255, 255, 255);
  border: none;
  padding: 1vw; /* 12px top/bottom, 24px left/right */
  cursor: pointer;
  font-size: 4vh; /* 16px font size */
  width: 70vw; /* Full width button */
  font-family: Avenir-Light;
  text-align:center;
  }
}