body {
  background-color: #000000;
}

h1 {
     color: #f6ffe5;
     font-family: sans-serif;
     font-size: 40px;
     text-align: center;
     position: relative;
     top: 20%;
}

.div {
     height: 400px;
     width: 90%;
     background-color: #a7e6ff;
     margin-top: 70px;
     margin-left: 3%;
     border-radius: 30px;
     border: 7px solid #00364b;
}

h2 {
     color: #000;
     text-align: center;
     margin-top: 30px;
     font-size: 35px;
     font-family: sans-serif;
}
.from{
  color: white;
}

.img {
     margin-top: 10px;
     display: block;
     margin-left: auto;
     margin-right: auto;
     border-radius: 30px;
     width: 250px;
     height: 250px;
     border: 5px solid #000;
}


.div1 {
     width: 100%;
     height: 111px;
     background-color: #2C3239;
     position: relative;
     top: -29px;
     border-bottom-left-radius: 30px;
     border-bottom-right-radius: 30px;
}

.dark-mode {
     background-color: rgb(255, 251, 234);
     color: #5c5c5c;
}

#darkMode {
     background: none;
     color: #fff;
     border: 1px solid #003342;
     border-radius: 50%;
     width: 90px;
     height: 90px;
     font-size: 50px;
     position: absolute;
     top: 6%;
     right: 0px;
}


html {
     height: 100%;
   }
   
   .loader {
     margin-top: 30px;
     margin-left: 45%;
     width: 64px;
     height: 64px;
     border-radius: 50%;
     perspective: 800px;
     background-color: black;
     box-shadow: 4px 4px 10px #868686;
   }
   
   .inner {
     position: absolute;
     box-sizing: border-box;
     width: 100%;
     height: 100%;
     border-radius: 50%;  
   }
   
   .inner.one {
     left: 0%;
     top: 0%;
     animation: rotate-one 1s linear infinite;
     border-bottom: 3px solid #EFEFFA;
   }
   
   .inner.two {
     right: 0%;
     top: 0%;
     animation: rotate-two 1s linear infinite;
     border-right: 3px solid #EFEFFA;
   }
   
   .inner.three {
     right: 0%;
     bottom: 0%;
     animation: rotate-three 1s linear infinite;
     border-top: 3px solid #EFEFFA;
   }
   
   @keyframes rotate-one {
     0% {
       transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
     }
     100% {
       transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
     }
   }
   
   @keyframes rotate-two {
     0% {
       transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
     }
     100% {
       transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
     }
   }
   
   @keyframes rotate-three {
     0% {
       transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
     }
     100% {
       transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
     }
   }
 
 h4 {
     margin-top: 30px;
     text-align: center;
     font-size: 40px;
     font-family: sans-serif;
     color: #868686;
 }

#logo {
  position: absolute;
  top: 6%;
  left: 0px;
  width: 100px;
  height: 100px;
  border-radius: 20px;
}