* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;

  
}

.container{
scroll-snap-type: y proximity;
scroll-behavior: smooth;
background-color: blue;

}

.contactinitial-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  cursor:progress;
}

.Contactpage {
  top: 10%;
  font-size: 4.8vw; /* Changed from 48px to 4.8vw */
  font-weight: bold;
  color: white;
  animation: fadeInOut 5s ease-out forwards;
}

.about:hover, .work:hover, .contact:hover {
  color: rgb(255, 255, 255); 
  text-shadow: 5px 12px 10px white;
  animation: shiver 0.1s infinite;
  }
  .work {
    z-index: 3;

}

.contact-page {
  position: absolute;
  left: 0;
  width: 100%;
  height:250%;
  text-align: center;
  overflow: hidden;

  background-color: rgba(30, 32, 48);
  z-index: 2; /* Set z-index higher than homepage */
  transition: top 0.01s ease-in-out; /* Apply transition to 'top' property */
  display: flex;
  justify-content: center;
  align-items: center; 
} 

.myself3 {
  font-size: 12.4vw; /* Changed from 124px to 12.4vw */
  color:#ffffff;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-style: bold;
  line-height: 1; 
  position: absolute;
  left: 200px;
  top: 10%;
  max-width: 49%;
  text-align: left;
  z-index: 3;

}

.contactimg{
  position:absolute;
  width: 7%;
  height: 5%;
  border-radius: 50%;
  left: 75%;
  top: 16%;
  opacity: 1;
  
  }

.arrow1 {
position: absolute;
top: 25%; /* Adjust left position for Contact */
font-size: 0.4vw; /* Changed from 4px to 0.4vw */
left: 75.8%;
transform: translate(-50%, -50%) rotate(45deg); /* Adjust rotation */
width: 30px;/* Adjust width */
height: 25px; /* Adjust height */
user-select: none;
}
/* 
___________________fOrm */







.formBox{
  position: absolute;
  width: 55%;
  left: 200px;
  top: 30%;
  height: 70%;

}

.row50{
  display: flex;
  justify-content: space-between;
  margin-bottom: 100px;
  width: 100%;
  left: 20%;

}

.inputBox{
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 10px;
  margin-bottom: -60px;
  

}


.inputBox span{
  color: #ffffffac;
  font-family:Georgia, 'Times New Roman', Times, serif;
  margin-bottom: 20px;
  margin-top: 40px;
  font-weight: 500;
  font-size: 3.6vw; /* Changed from 36px to 3.6vw */
  text-align: left;
}

.inputBox input{

  padding: 10px;
  margin-bottom: 10px;
  font-size: 3.6vw; /* Changed from 36px to 3.6vw */
  outline: none;
  border: none;
  background-color: transparent; 
  margin-left: 30px;
  color:rgb(255, 255, 255);  
}

.inputBox input::placeholder {
  color: rgba(255, 255, 255, 0.19); 
  font-size: 3vw
}

.success-message {
    position: absolute;
    top: 78%;
    left: 0.5%;
    color: green;
    font-size: 3vw; /* Changed from 30px to 3vw */
    font-weight: bold;
    margin-top: 10px;
    z-index: 10;
  }
  .fade-out {
    opacity: 0;
    transition: opacity 5s ease;
  }

  
  

.custom-hr {
    width: 100%;
    border: 0;
    border-top: 2px solid rgba(255, 255, 255, 0.19); /* Customize the color and transparency */
    margin: 10px 10; /* Adjust the vertical spacing */
}
.horizontalline {
    position: absolute;
    top: 87%;
    left: 11.5%;
    width: 80%;
    height: 2px; /* Adjust the height of the line as needed */
    background-color: rgba(255, 255, 255, 0.574); /* Change the color of the line */
  }
  




.footer-content {
  max-width: 1200px; /* Maximum width for content */
}





.button1 {
  position: absolute;
  font-size: 2.4vw; /* Changed from 24px to 2.4vw */
  color: rgb(255, 255, 255);
  font-family: Georgia, 'Times New Roman', Times, serif;
  background-color: transparent;
  border: 1.2px solid rgb(255, 255, 255);
  border-radius: 50px;
  top: 30%;
  left: 74.3%;
  width: 300px; 
  height: 60px;
  overflow: hidden;
  cursor: pointer;
  transition:  1s ease-out

}

.button2 .button2-text {
  position: relative;
  z-index: 1;
}
.button2:hover .button2-bg{
  color: white;

  background-position: center;
}

.button2 .button2-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url('https://web.archive.org/web/20160312084140im_/http://splatoon.nintendo.com/assets/img/nav-bg-fill-blue.png?1443460871');
  background-repeat: repeat-x;
  background-position: 0% -100%;
  transition: background-position 0.5s ease;
  z-index: 0;
}


.button3 {
  position: absolute;
 top:35%;
  left: 74.3%;
}


.button4 {
  position: absolute;
  top: 76.6%;
  left: 30%;
  border-radius: 50%;
  height: 10.2%;
  width: 18%;
  z-index: 3;
  background-color: rgba(30, 32, 48);
  /* animation: fade-in-slide5 1s linear forwards;
  animation-timeline: view() */
} 
@keyframes fade-in-slide5 {
  from {   left: 50%;

  }
  to {  left: 20%;

  }
}
.button4 .button2-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0;
  background-image: url('https://web.archive.org/web/20160312084140im_/http://splatoon.nintendo.com/assets/img/nav-bg-fill-blue.png?1443460871');
  background-repeat: repeat-x;
  background-position: 0% 1800%;
  transition: background-position 0.8s ease;
  z-index: 0;
}


.button5 {
  position: absolute;
  font-size: 2.4vw; /* Changed from 24px to 2.4vw */
  margin-top: 10px;
  color: #ffffff;
  bottom: 1.5%;
  left: 79%;
  line-height: 60px;
  transition: background-color 0.3s ease;
  border-color: rgba(30, 32, 48);
}



a {
  position: absolute;  
  margin-top: 10px;
  font-size: 2vw; /* Changed from 20px to 2vw */
  color: #ffffff;
  left: 10%;
  bottom: 3%;
  
}

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

  
  .about:hover, .work:hover, .contact:hover {
    color: rgb(255, 255, 255); 
    text-shadow: 5px 12px 10px white;
    animation: shiver 0.1s infinite;
    }
    .work {
      z-index: 3;
  }
  .copyright{
    left: 4%;
  }
  
  .myself3 {
    left: 30px;
    top: 10%;
    max-width: 65%;
  }
  
  .contactimg{
    width: 20vw;
    height: 20vw;
    left: 75%;
    top: 10.7%;    
    }
  
  .arrow1 {
  position: absolute;
  top: 25%; /* Adjust left position for Contact */
  font-size: 36.4vw; /* Changed from 4px to 0.4vw */
  left: 7.8%;
  transform: translate(-50%, -50%) rotate(45deg); /* Adjust rotation */
  width: 30vw;/* Adjust width */
  height: 30vw; /* Adjust height */
  user-select: none;
  }
  /* 
  ___________________fOrm */
  
  
  
  
  
  
  
  .formBox{
    position: absolute;
    width: 62%;
    left: 30px;
    top: 20%;
    height: 60%;
  
  }
  
  .row50{
    display: flex;
    justify-content: space-between;
    margin-bottom: 100px;
    width: 100%;
    left: 20%;
  
  }
  
  .inputBox{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 10px;
    margin-bottom: -60px;
    
  
  }
  
  
  .inputBox span{
    font-size: 5vw; /* Changed from 36px to 3.6vw */
  }
  
  .inputBox input{
  
    font-size: 4vw; /* Changed from 36px to 3.6vw */
    margin-left: 30px;
    color:rgb(255, 255, 255);  
  }
  
  .inputBox input::placeholder {
    color: rgba(255, 255, 255, 0.19); 
    font-size: 3vw
  }

  
  .button1 {
    font-size: 3vw; /* Changed from 24px to 2.4vw */
    top: 80%;
    left: 15.5%;
    width: 300px; 
    height: 40px;  
  }
  
  .button2 .button2-text {
    position: relative;
    z-index: 1;
    
  }
  .button2:hover .button2-bg{
    color: white;
  
    background-position: center;
  }
  
  .button2 .button2-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url('https://web.archive.org/web/20160312084140im_/http://splatoon.nintendo.com/assets/img/nav-bg-fill-blue.png?1443460871');
    background-repeat: repeat-x;
    background-position: 0% -100%;
    transition: background-position 0.5s ease;
    z-index: 0;
  }
  
  
  .button3 {
    font-size: 3vw; /* Changed from 24px to 2.4vw */
    top: 84%;
    left: 15.5%;
    width: 300px; 
    height: 40px;  
  }
  
  
  .button4 {
    top: 78%;
    left:97%;
    border-radius: 50%;
    height: 30vw;
    width: 30vw;
    } 

  .button4 .button2-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0;
    background-image: url('https://web.archive.org/web/20160312084140im_/http://splatoon.nintendo.com/assets/img/nav-bg-fill-blue.png?1443460871');
    background-repeat: repeat-x;
    background-position: 0% 1800%;
    transition: background-position 0.8s ease;
    z-index: 0;
  }
  .horizontalline {
    position: absolute;
    top: 70%;
    left: 11.5%;
    width: 80%;
    height: 2px; /* Adjust the height of the line as needed */
    background-color: rgba(255, 255, 255, 0.574); /* Change the color of the line */
  }
  
  
  
  .button5 {
    bottom: 3.3%;
    line-height: 0px;
    font-size: 3vw;
    left: 57%;
  }
  
  
  
  a {
    position: absolute;  
    margin-top: 10px;
    font-size: 2vw;
    left: 10%;
    bottom: 3.8%;
    
  }

  
  
   
}
/* Mobile portrait (less than 480px) */
@media only screen and (min-width: 375px) and (max-width: 479px) {

  
  .about:hover, .work:hover, .contact:hover {
    color: rgb(255, 255, 255); 
    text-shadow: 5px 12px 10px white;
    animation: shiver 0.1s infinite;
    }
    .work {
      z-index: 3;
  }
  .copyright{
    left: 4%;
  }
  
  .myself3 {
    left: 30px;
    top: 10%;
    max-width: 65%;
  }
  
  .contactimg{
    width: 20vw;
    height: 20vw;
    left: 75%;
    top: 10.7%;    
    }
  
  .arrow1 {
  position: absolute;
  top: 25%; /* Adjust left position for Contact */
  font-size: 36.4vw; /* Changed from 4px to 0.4vw */
  left: 7.8%;
  transform: translate(-50%, -50%) rotate(45deg); /* Adjust rotation */
  width: 30vw;/* Adjust width */
  height: 30vw; /* Adjust height */
  user-select: none;
  }
  /* 
  ___________________fOrm */
  
  
  
  
  
  
  
  .formBox{
    position: absolute;
    width: 62%;
    left: 30px;
    top: 20%;
    height: 60%;
  
  }
  
  .row50{
    display: flex;
    justify-content: space-between;
    margin-bottom: 100px;
    width: 100%;
    left: 20%;
  
  }
  
  .inputBox{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 10px;
    margin-bottom: -60px;
    
  
  }
  
  
  .inputBox span{
    font-size: 5vw; /* Changed from 36px to 3.6vw */
  }
  
  .inputBox input{
  
    font-size: 4vw; /* Changed from 36px to 3.6vw */
    margin-left: 30px;
    color:rgb(255, 255, 255);  
  }
  
  .inputBox input::placeholder {
    color: rgba(255, 255, 255, 0.19); 
    font-size: 3vw
  }

  
  .button1 {
    font-size: 3vw; /* Changed from 24px to 2.4vw */
    top: 80%;
    left: 15.5%;
    width: 300px; 
    height: 40px;  
  }
  
  .button2 .button2-text {
    position: relative;
    z-index: 1;
    
  }
  .button2:hover .button2-bg{
    color: white;
  
    background-position: center;
  }
  
  .button2 .button2-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url('https://web.archive.org/web/20160312084140im_/http://splatoon.nintendo.com/assets/img/nav-bg-fill-blue.png?1443460871');
    background-repeat: repeat-x;
    background-position: 0% -100%;
    transition: background-position 0.5s ease;
    z-index: 0;
  }
  
  
  .button3 {
    font-size: 3vw; /* Changed from 24px to 2.4vw */
    top: 84%;
    left: 15.5%;
    width: 300px; 
    height: 40px;  
  }
  
  
  .button4 {
    top: 78%;
    left:97%;
    border-radius: 50%;
    height: 30vw;
    width: 30vw;
    } 

  .button4 .button2-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0;
    background-image: url('https://web.archive.org/web/20160312084140im_/http://splatoon.nintendo.com/assets/img/nav-bg-fill-blue.png?1443460871');
    background-repeat: repeat-x;
    background-position: 0% 1800%;
    transition: background-position 0.8s ease;
    z-index: 0;
  }
  .horizontalline {
    position: absolute;
    top: 70%;
    left: 11.5%;
    width: 80%;
    height: 2px; /* Adjust the height of the line as needed */
    background-color: rgba(255, 255, 255, 0.574); /* Change the color of the line */
  }
  
  
  
  .button5 {
    bottom: 3.3%;
    line-height: 0px;
    font-size: 3vw;
    left: 57%;
  }
  
  
  
  a {
    position: absolute;  
    margin-top: 10px;
    font-size: 2vw;
    left: 10%;
    bottom: 3.8%;
    
  }

  
  
   
}
/* Mobile landscape (less than 768px) */
@media only screen and (min-width: 479px) and (max-width: 600px) {
   
}
@media only screen and (min-width: 600px) and (max-width: 767px) {
   
}

/* Tablet portrait (less than 992px) */
@media only screen and (min-width: 767px) and (max-width: 991px) {
  
}

/* Tablet landscape (less than 1200px) */
@media only screen and (min-width: 991px) and (max-width: 1200px) {
  
}
 @media only screen and (min-width: 1200px) and (max-width: 1400px) {
}

 @media only screen and (min-width: 1400px) and (max-width: 1600px) {
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;

    
}

.container{
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  background-color: blue;
  
}

.contactinitial-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    cursor:progress;
}

.Contactpage {
    top: 10%;
    font-size: 48px;
    font-weight: bold;
    color: white;
    animation: fadeInOut 5s ease-out forwards;
}

.about:hover, .work:hover, .contact:hover {
    color: rgb(255, 255, 255); 
    text-shadow: 5px 12px 10px white;
    animation: shiver 0.1s infinite;
    }
    .work {
      z-index: 3;
  
  }

.contact-page {
    position: absolute;
    left: 0;
    width: 100%;
    height:250%;
    text-align: center;
    overflow: hidden;
  
    background-color: rgba(30, 32, 48);
    z-index: 2; /* Set z-index higher than homepage */
    transition: top 0.01s ease-in-out; /* Apply transition to 'top' property */
    display: flex;
    justify-content: center;
    align-items: center; 
  } 
  
.myself3 {
    font-size: 124px; /* Adjust the font size to a reasonable value */
    color:#ffffff;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: bold;
    line-height: 1; 
    position: absolute;
    left: 200px;
    top: 10%;
    max-width: 49%;
    text-align: left;
    z-index: 3;
  
  }

  .contactimg{
    position:absolute;
    width: 7%;
    height: 5%;
    border-radius: 50%;
    left: 75%;
    top: 16%;
    opacity: 1;
    
    }

.arrow1 {
  position: absolute;
  top: 25%; /* Adjust left position for Contact */
  font-size: 4px;
  left: 75.8%;
  transform: translate(-50%, -50%) rotate(45deg); /* Adjust rotation */
  width: 30px;/* Adjust width */
  height: 25px; /* Adjust height */
  user-select: none;
}
/* 
___________________fOrm */







.formBox{
    position: absolute;
    width: 55%;
    left: 200px;
    top: 30%;
    height: 70%;

}

.row50{
    display: flex;
    justify-content: space-between;
    margin-bottom: 100px;
    width: 100%;
    left: 20%;

}

.inputBox{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 10px;
    margin-bottom: -60px;
    

}


.inputBox span{
    color: #ffffffac;
    font-family:Georgia, 'Times New Roman', Times, serif;
    margin-bottom: 20px;
    margin-top: 40px;
    font-weight: 500;
    font-size: 36px;
    text-align: left;
}

.inputBox input{

    padding: 10px;
    margin-bottom: 10px;
    font-size: 36px;
    outline: none;
    border: none;
    background-color: transparent; 
    margin-left: 30px;
    color:rgb(255, 255, 255);  
}

.inputBox input::placeholder {
    color: rgba(255, 255, 255, 0.19); 
    font-size: 30px;
}


.success-message {
    position: absolute;
    top: 78%;
    left: 0.5%;
    color: green;
    font-size: 30px;
    font-weight: bold;
    margin-top: 10px;
    z-index: 10;
  }
  .fade-out {
    opacity: 0;
    transition: opacity 5s ease;
  }

  
  

.custom-hr {
    width: 100%;
    border: 0;
    border-top: 2px solid rgba(255, 255, 255, 0.19); /* Customize the color and transparency */
    margin: 10px 10; /* Adjust the vertical spacing */
}
.horizontalline {
    position: absolute;
    top: 87%;
    left: 11.5%;
    width: 80%;
    height: 2px; /* Adjust the height of the line as needed */
    background-color: rgba(255, 255, 255, 0.574); /* Change the color of the line */
  }
  




.footer-content {
  max-width: 1200px; /* Maximum width for content */
}





.button1 {
  position: absolute;
  font-size: 24px;
  color: rgb(255, 255, 255);
  font-family: Georgia, 'Times New Roman', Times, serif;
  background-color: transparent;
  border: 1.2px solid rgb(255, 255, 255);
  border-radius: 50px;
  top: 30%;
  left: 74.3%;
  width: 300px; 
  height: 60px;
  overflow: hidden;
  cursor: pointer;
  transition:  1s ease-out

}

.button2 .button2-text {
  position: relative;
  z-index: 1;
}
.button2:hover .button2-bg{
  color: white;

  background-position: center;
}

.button2 .button2-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url('https://web.archive.org/web/20160312084140im_/http://splatoon.nintendo.com/assets/img/nav-bg-fill-blue.png?1443460871');
  background-repeat: repeat-x;
  background-position: 0% -100%;
  transition: background-position 0.5s ease;
  z-index: 0;
}


.button3 {
  position: absolute;
 top:35%;
  left: 74.3%;
}


.button4 {
  position: absolute;
  top: 76.6%;
  left: 30%;
  border-radius: 50%;
  height: 10.2%;
  width: 18%;
  z-index: 3;
  background-color: rgba(30, 32, 48);
  animation: fade-in-slide5 1s linear forwards;
  animation-timeline: view()
} 
@keyframes fade-in-slide5 {
  from {   left: 50%;

  }
  to {  left: 20%;

  }
}
.button4 .button2-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0;
  background-image: url('https://web.archive.org/web/20160312084140im_/http://splatoon.nintendo.com/assets/img/nav-bg-fill-blue.png?1443460871');
  background-repeat: repeat-x;
  background-position: 0% 1800%;
  transition: background-position 0.8s ease;
  z-index: 0;
}


.button5 {
  position: absolute;
  font-size: 24px;
  margin-top: 10px;
  color: #ffffff;
  bottom: 1.5%;
  left: 79%;
  line-height: 60px;
  transition: background-color 0.3s ease;
  border-color: rgba(30, 32, 48);
}



a {
  position: absolute;  
  margin-top: 10px;
  font-size: 20px;
  color: #ffffff;
  left: 10%;
  bottom: 3%;
  
}


}
@media only screen and (min-width: 1600px) and (max-width: 2550px){
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;

    
}

.container{
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  background-color: blue;
  
}

.contactinitial-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    cursor:progress;
}

.Contactpage {
    top: 10%;
    font-size: 48px;
    font-weight: bold;
    color: white;
    animation: fadeInOut 5s ease-out forwards;
}

.about:hover, .work:hover, .contact:hover {
    color: rgb(255, 255, 255); 
    text-shadow: 5px 12px 10px white;
    animation: shiver 0.1s infinite;
    }
    .work {
      z-index: 3;
  
  }

.contact-page {
    position: absolute;
    left: 0;
    width: 100%;
    height:250%;
    text-align: center;
    overflow: hidden;
  
    background-color: rgba(30, 32, 48);
    z-index: 2; /* Set z-index higher than homepage */
    transition: top 0.01s ease-in-out; /* Apply transition to 'top' property */
    display: flex;
    justify-content: center;
    align-items: center; 
  } 
  
.myself3 {
    font-size: 124px; /* Adjust the font size to a reasonable value */
    color:#ffffff;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: bold;
    line-height: 1; 
    position: absolute;
    left: 200px;
    top: 10%;
    max-width: 49%;
    text-align: left;
    z-index: 3;
  
  }

  .contactimg{
    position:absolute;
    width: 7%;
    height: 5%;
    border-radius: 50%;
    left: 75%;
    top: 16%;
    opacity: 1;
    
    }

.arrow1 {
  position: absolute;
  top: 25%; /* Adjust left position for Contact */
  font-size: 4px;
  left: 75.8%;
  transform: translate(-50%, -50%) rotate(45deg); /* Adjust rotation */
  width: 30px;/* Adjust width */
  height: 25px; /* Adjust height */
  user-select: none;
}
/* 
___________________fOrm */







.formBox{
    position: absolute;
    width: 55%;
    left: 200px;
    top: 30%;
    height: 70%;

}

.row50{
    display: flex;
    justify-content: space-between;
    margin-bottom: 100px;
    width: 100%;
    left: 20%;

}

.inputBox{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 10px;
    margin-bottom: -60px;
    

}


.inputBox span{
    color: #ffffffac;
    font-family:Georgia, 'Times New Roman', Times, serif;
    margin-bottom: 20px;
    margin-top: 40px;
    font-weight: 500;
    font-size: 36px;
    text-align: left;
}

.inputBox input{

    padding: 10px;
    margin-bottom: 10px;
    font-size: 36px;
    outline: none;
    border: none;
    background-color: transparent; 
    margin-left: 30px;
    color:rgb(255, 255, 255);  
}

.inputBox input::placeholder {
    color: rgba(255, 255, 255, 0.19); 
    font-size: 30px;
}


.success-message {
    position: absolute;
    top: 78%;
    left: 0.5%;
    color: green;
    font-size: 30px;
    font-weight: bold;
    margin-top: 10px;
    z-index: 10;
  }
  .fade-out {
    opacity: 0;
    transition: opacity 5s ease;
  }

  
  

.custom-hr {
    width: 100%;
    border: 0;
    border-top: 2px solid rgba(255, 255, 255, 0.19); /* Customize the color and transparency */
    margin: 10px 10; /* Adjust the vertical spacing */
}
.horizontalline {
    position: absolute;
    top: 87%;
    left: 11.5%;
    width: 80%;
    height: 2px; /* Adjust the height of the line as needed */
    background-color: rgba(255, 255, 255, 0.574); /* Change the color of the line */
  }
  




.footer-content {
  max-width: 1200px; /* Maximum width for content */
}





.button1 {
  position: absolute;
  font-size: 24px;
  color: rgb(255, 255, 255);
  font-family: Georgia, 'Times New Roman', Times, serif;
  background-color: transparent;
  border: 1.2px solid rgb(255, 255, 255);
  border-radius: 50px;
  top: 30%;
  left: 74.3%;
  width: 300px; 
  height: 60px;
  overflow: hidden;
  cursor: pointer;
  transition:  1s ease-out

}

.button2 .button2-text {
  position: relative;
  z-index: 1;
}
.button2:hover .button2-bg{
  color: white;

  background-position: center;
}

.button2 .button2-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url('https://web.archive.org/web/20160312084140im_/http://splatoon.nintendo.com/assets/img/nav-bg-fill-blue.png?1443460871');
  background-repeat: repeat-x;
  background-position: 0% -100%;
  transition: background-position 0.5s ease;
  z-index: 0;
}


.button3 {
  position: absolute;
 top:35%;
  left: 74.3%;
}


.button4 {
  position: absolute;
  top: 76.6%;
  left: 30%;
  border-radius: 50%;
  height: 10.2%;
  width: 18%;
  z-index: 3;
  background-color: rgba(30, 32, 48);
  animation: fade-in-slide5 1s linear forwards;
  animation-timeline: view()
} 
@keyframes fade-in-slide5 {
  from {   left: 50%;

  }
  to {  left: 20%;

  }
}
.button4 .button2-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0;
  background-image: url('https://web.archive.org/web/20160312084140im_/http://splatoon.nintendo.com/assets/img/nav-bg-fill-blue.png?1443460871');
  background-repeat: repeat-x;
  background-position: 0% 1800%;
  transition: background-position 0.8s ease;
  z-index: 0;
}


.button5 {
  position: absolute;
  font-size: 24px;
  margin-top: 10px;
  color: #ffffff;
  bottom: 1.5%;
  left: 79%;
  line-height: 60px;
  transition: background-color 0.3s ease;
  border-color: rgba(30, 32, 48);
}



a {
  position: absolute;  
  margin-top: 10px;
  font-size: 20px;
  color: #ffffff;
  left: 10%;
  bottom: 3%;
  
}


}

/*4K*/
@media only screen and (min-width: 2550px) and (max-width: 3000px) {
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;

    
}

.container{
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  background-color: blue;
  
}

.contactinitial-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    cursor:progress;
}

.Contactpage {
    top: 10%;
    font-size: 48px;
    font-weight: bold;
    color: white;
    animation: fadeInOut 5s ease-out forwards;
}

.about:hover, .work:hover, .contact:hover {
    color: rgb(255, 255, 255); 
    text-shadow: 5px 12px 10px white;
    animation: shiver 0.1s infinite;
    }
    .work {
      z-index: 3;
  
  }

.contact-page {
    position: absolute;
    left: 0;
    width: 100%;
    height:250%;
    text-align: center;
    overflow: hidden;
  
    background-color: rgba(30, 32, 48);
    z-index: 2; /* Set z-index higher than homepage */
    transition: top 0.01s ease-in-out; /* Apply transition to 'top' property */
    display: flex;
    justify-content: center;
    align-items: center; 
  } 
  
.myself3 {
    font-size: 124px; /* Adjust the font size to a reasonable value */
    color:#ffffff;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: bold;
    line-height: 1; 
    position: absolute;
    left: 200px;
    top: 10%;
    max-width: 49%;
    text-align: left;
    z-index: 3;
  
  }

  .contactimg{
    position:absolute;
    width: 7%;
    height: 5%;
    border-radius: 50%;
    left: 75%;
    top: 16%;
    opacity: 1;
    
    }

.arrow1 {
  position: absolute;
  top: 25%; /* Adjust left position for Contact */
  font-size: 4px;
  left: 75.8%;
  transform: translate(-50%, -50%) rotate(45deg); /* Adjust rotation */
  width: 30px;/* Adjust width */
  height: 25px; /* Adjust height */
  user-select: none;
}
/* 
___________________fOrm */







.formBox{
    position: absolute;
    width: 55%;
    left: 200px;
    top: 30%;
    height: 70%;

}

.row50{
    display: flex;
    justify-content: space-between;
    margin-bottom: 100px;
    width: 100%;
    left: 20%;

}

.inputBox{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 10px;
    margin-bottom: -60px;
    

}


.inputBox span{
    color: #ffffffac;
    font-family:Georgia, 'Times New Roman', Times, serif;
    margin-bottom: 20px;
    margin-top: 40px;
    font-weight: 500;
    font-size: 36px;
    text-align: left;
}

.inputBox input{

    padding: 10px;
    margin-bottom: 10px;
    font-size: 36px;
    outline: none;
    border: none;
    background-color: transparent; 
    margin-left: 30px;
    color:rgb(255, 255, 255);  
}

.inputBox input::placeholder {
    color: rgba(255, 255, 255, 0.19); 
    font-size: 30px;
}


.success-message {
    position: absolute;
    top: 78%;
    left: 0.5%;
    color: green;
    font-size: 30px;
    font-weight: bold;
    margin-top: 10px;
    z-index: 10;
  }
  .fade-out {
    opacity: 0;
    transition: opacity 5s ease;
  }

  
  

.custom-hr {
    width: 100%;
    border: 0;
    border-top: 2px solid rgba(255, 255, 255, 0.19); /* Customize the color and transparency */
    margin: 10px 10; /* Adjust the vertical spacing */
}
.horizontalline {
    position: absolute;
    top: 87%;
    left: 11.5%;
    width: 80%;
    height: 2px; /* Adjust the height of the line as needed */
    background-color: rgba(255, 255, 255, 0.574); /* Change the color of the line */
  }
  




.footer-content {
  max-width: 1200px; /* Maximum width for content */
}





.button1 {
  position: absolute;
  font-size: 24px;
  color: rgb(255, 255, 255);
  font-family: Georgia, 'Times New Roman', Times, serif;
  background-color: transparent;
  border: 1.2px solid rgb(255, 255, 255);
  border-radius: 50px;
  top: 30%;
  left: 74.3%;
  width: 300px; 
  height: 60px;
  overflow: hidden;
  cursor: pointer;
  transition:  1s ease-out

}

.button2 .button2-text {
  position: relative;
  z-index: 1;
}
.button2:hover .button2-bg{
  color: white;

  background-position: center;
}

.button2 .button2-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url('https://web.archive.org/web/20160312084140im_/http://splatoon.nintendo.com/assets/img/nav-bg-fill-blue.png?1443460871');
  background-repeat: repeat-x;
  background-position: 0% -100%;
  transition: background-position 0.5s ease;
  z-index: 0;
}


.button3 {
  position: absolute;
 top:35%;
  left: 74.3%;
}


.button4 {
  position: absolute;
  top: 76.6%;
  left: 30%;
  border-radius: 50%;
  height: 10.2%;
  width: 18%;
  z-index: 3;
  background-color: rgba(30, 32, 48);
  animation: fade-in-slide5 1s linear forwards;
  animation-timeline: view()
} 
@keyframes fade-in-slide5 {
  from {   left: 50%;

  }
  to {  left: 20%;

  }
}
.button4 .button2-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0;
  background-image: url('https://web.archive.org/web/20160312084140im_/http://splatoon.nintendo.com/assets/img/nav-bg-fill-blue.png?1443460871');
  background-repeat: repeat-x;
  background-position: 0% 1800%;
  transition: background-position 0.8s ease;
  z-index: 0;
}


.button5 {
  position: absolute;
  font-size: 24px;
  margin-top: 10px;
  color: #ffffff;
  bottom: 1.5%;
  left: 79%;
  line-height: 60px;
  transition: background-color 0.3s ease;
  border-color: rgba(30, 32, 48);
}



a {
  position: absolute;  
  margin-top: 10px;
  font-size: 20px;
  color: #ffffff;
  left: 10%;
  bottom: 3%;
  
}


}