main.css

html, body{
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
  box-sizing: border-box;
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #2c2c2c; 
}
 
::-webkit-scrollbar-thumb {
  background: rgb(82, 82, 82); 
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(0, 0, 0); 
}

@font-face {
  font-family: inkfree;
  src: url(fonts/inkfree-webfont.woff);
}

#title {
  background-image: linear-gradient(0deg, rgba(0,0,0,0.8),rgba(0,0,0,0.8)) ,url(assets/bgs/home-bg.jpg);
  background-size: cover;
  width: 100%;
  height: 55vw;
}

#keys {
  margin-left: 5%
}

.jumps {
  background-color: transparent;
  margin-top: 1%;
  margin-left: 0.3%;
  color: rgb(255, 255, 255);  
  border-style: none;
  border-color: rgb(255, 255, 255);
  font-size: 3vw;  
  font-family: inkfree ;
}

#home {
  display: flex;
  justify-content: left;
}

#heading {
  text-align: left;
  font-size: 6.7vw;
  font-family: inkfree;
  font-weight: bold;
  margin: 0px;
  color: rgb(255, 255, 255);
  text-shadow: 0.3vw 1px rgb(77, 204, 255);
  padding: 30% 10% 0% 20%;
  animation-name: reveal-start;
  animation-duration: 1s;
}

.jumpto {
  font-family: inkfree;
  font-size: 4vw; 
  color: rgb(255, 255, 255);
  margin: 1% 0% 0% 35%;
  animation-name: reveal-start;
  animation-duration: 1s;
}

.jumpto:hover {
  color: rgb(77, 204, 255);
}

.jumpto:hover .jumps{
  color: rgb(77, 204, 255);
}

#logo {
  max-width: 40%;
  height: auto;
  margin: 5% 5% 0% 15%;
  animation-name: reveal-start;
  animation-duration: 1s;
}

#curve {
  margin: 0%;
  width: 100%;
  height: 5vw;
  border-radius: 100% 100% 0% 0%;
  background-color: rgb(255, 255, 255);
  position: absolute;
  top: 52vw;
  z-index: 1; 
}

#bg {
  width: 100%;
  height: auto;
  background: linear-gradient(180deg, white, rgb(199, 255, 255), rgb(164, 255, 255)); 
}

#center {
  text-align: center;
}

#about-head, #horoscope-head {
  font-family: inkfree;
  font-weight: bolder;
  font-size: 6.5vw ;
  margin: 5vw 0% 0% 0%;
}

#about-content {
  font-family: Dosis;
  font-size: 2.7vw;
  font-weight: 500;
  padding: 0% 10%;
}

.down {
  display: flex;
  justify-content: left;
}

.left {
  background-image: url(assets/bgs/box-bg.jpg);
  background-size: cover;
  border-radius: 5%;
  border: solid;
  border-color: black;
  min-width: 15%;
  max-width: 15%;
  height: 10%;
  margin: 5% 0% 0% 10%;
  text-align: center;
  padding: 3%;
}

#guide {
  color: black;
  font-family: Cabin;
  font-size: 2.7vw;
  margin: 8% 7% 0% 7%;
}

#sign-images-1, #sign-images-2 {
  display: flex;
  justify-content: left;
  margin-left: 20%;
}

#sign-images-1 {
  margin-top: 2%;
}

#sign-images-1 img, #sign-images-2 img {
  width: 10%;
  height: auto;
  margin: 3% 0% 0% 3%;
} 

.right {
  background-image: url(assets/bgs/box-bg.jpg);
  background-size: cover;
  border-radius: 5%;
  border: solid;
  border-color: black;
  width: 45%;
  height: 60%;
  margin: 5% 0% 0% 5%;
  text-align: left;
  padding: 1% 3%;
  display: none;
  animation-name: reveal-start;
  animation-duration: 2s;
}

.select, .date {  
  display: inline-block;  
  position: relative;  
}  

.selectbtn, .datebtn {  
  font-family: serif;
  font-weight: bold;
  background-color: transparent;
  color: rgb(0, 0, 0);  
  border-style: none;
  border-color: rgb(0, 0, 0);
  font-size: 2.7vw;  
  width: 100%;
}  

.selectbtn {
  margin-bottom: 4%
}

.selectbtn:hover , .datebtn:hover {
  color: grey;
}

.select-content, .date-content {  
  position: absolute;  
  background-color: rgb(255, 255, 255);  
  border-style: solid;
  border-color: black;
  display: none;  
  z-index: 1;
  min-width: 10vw;
}  

.select-content button, .date-content button {  
  background-color: white;
  font-family: serif;
  font-size: 1.7vw;
  border: none;
  color: rgb(0, 0, 0);  
  text-align: left;
  padding: 3%;
  width: 100%;  
}  

.big-img {
  position: absolute;
  z-index: 1;
  width: 15%;
  height: auto;
  margin: 23% 0% 0% 13.5%;
  display: none;
  animation-name: reveal-start;
  animation-duration: 2s;
}

.select-content button:hover, .date-content button:hover {  
  background-color: rgb(255, 217, 145);  
}  

.horoscope, .guide-remove, .hide-sign {
  display: none;
}

.show-select-content, .show-date-content, .show-horoscope, .show-right, .show-sign {  
  display: block; 
} 

.horoscope-text {
  color:rgb(0, 0, 0);
  font-family: Cabin;
  font-size: 2vw;
}

.horoscope-heading {
  font-family: arial;
  font-weight: bold;
  color: rgb(255, 0, 0)
}

#filler-bg {
  width: 100%;
  background-color: rgb(164, 255, 255);
  height: 10vw;
}

.footer {
  display: flex;
  justify-content: left;
  background-color: rgb(2, 12, 21);
  width: 100%;
  height: 17vw;
}

.github {
  margin-top: 5%;
  margin-left: 5%;
}

#github {
  width: 5vw;
  height: auto;
  margin: 0 2vw 0 0;
}

#github:hover {
  width: 4.8vw;
}

#support{
  margin-top: 4%;
  font-family: inkfree;
  font-weight: bold;
  font-size: 2.7vw;
  color: white;
}

.copyright-content{
  width: 50%;
  text-align: right;
  margin-top: 4%;
  margin-right: 4%;
}

#footer-logo{
  margin: 0px;
  font-size: 4vw;
  font-family: inkfree;
  font-weight: bold;
  color: rgb(255, 255, 255);
  text-shadow: 0.2vw 1px rgb(77, 204, 255);
}

#copyright{
  margin: 1% 0% 0% 0%;
  font-family: monospace;
  font-size: 1.5vw;
  color: white;
}

@keyframes reveal-start{
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.reveal{
  opacity: 0;
  transition: 1s all ease;
}

.reveal.active{
  opacity: 1;
}

@media (max-width: 480px) { 

  #title{
    height: 95vw;
  }

  #home{
    display: block;
  }

  #logo{
    display: none;
  }

  #heading {
    font-size: 15vw;
    padding: 10% 5% 0 0;
    text-align: center;
    text-shadow: 0.5vw 1px rgb(77, 204, 255);
  }

  #curve {
    top: 90vw;
  }

  .jumpto {
    font-size: 7vw;
  }

  .jumps {
    font-size: 7vw;
  }

  .jumpto:hover {
    color: rgb(255, 255, 255);
  }
  
  .jumpto:hover .jumps{
    color: rgb(255, 255, 255);
  }

  #about-head, #horoscope-head {
    font-size: 15vw ;
  }
  
  #about-content {
    font-size: 5vw;
  }
  
  .down {
    text-align: center;
    display: block;
  }

  .left {
    min-width: 50%;
    min-height: 10%;
    margin: 5% 0% 0% 20%;
    text-align: center;
    padding: 4%;
  }

  .selectbtn, .datebtn {  
    font-size: 6.5vw;  
  }  

  .select-content, .date-content{ 
    min-width: 40vw;
  }

  .select-content button, .date-content button {  
    font-size: 6vw;
  }

  #guide {
    font-size: 5vw;
  }

  .big-img {
    display: none;
  }

  #sign-images-1 img, #sign-images-2 img {
    width: 12%;
    height: auto;
    margin: 3% 0 0 2%;
  } 

  #sign-images-1 , #sign-images-2{
    margin-left: 15%;
  }

  .right {
    min-width: 70%;
    min-height: 10%;
    margin: 5% 0% 0% 11%;
    text-align: left;
    padding: 3%;
  }

  .horoscope-text {
    font-size: 5vw;
  }

  .footer {
    display: block;
    height: 60vw;
    text-align: center;
  }

  .github {
    margin-top: 0%;
    margin-left: 0%;
  }

  #github {
    margin: 5vw 0 0 0;
    width: 10vw;
  }

  #github:hover {
    width: 10vw;
  }

  #support {
    text-align: center;
    font-size: 5vw;
  }

  .copyright-content{
    width: 100%;
  }

  #footer-logo{
    text-align: center;
    font-size: 7vw;
    text-shadow: 0.35vw 1px rgb(77, 204, 255);
  }
  
  #copyright{
    text-align: center;
    font-size: 4vw;
  }
  

}