escuro.css

html {height: 250%; background: linear-gradient(to left top, #444444, #000);
      font-family: 'Poppins', sans-serif;
      background-repeat: no-repeat; cursor: default;}

@keyframes glow { 0% {box-shadow: 0px 0px 15px #e89000; border: solid 2px #e89000;}
                  50% {box-shadow: 0px 0px 15px #ffab0f; border: solid 2px #ffab0f;}
                  100% {box-shadow: 0px 0px 15px #e89000; border: solid 2px #e89000;}
}

body {margin: 0px; padding: 0px;
      background-image: url(Imagens/background2.png);
      background-size: 500px;
      background-repeat: repeat-x;}

.Tema_Claro {position: relative; top: -1653px;
              left: 10px; color: white;
              box-shadow: 0px 0px 5px white;
              border: solid 2px white;}

.Titulo {border: solid 2px #e89000;
         position: relative; 
         top: -20px; background: black;
         animation-name: glow; animation-duration: 4s; animation-delay: 1.5s; animation-iteration-count: infinite;
         color: white;}

#A1 {border: solid 2px #e89000;
     position: relative; top: 50px;
     background: black;
     color: white;
     box-shadow: 0px 0px 15px  #e89000;
     animation-name: glow; animation-duration: 4s; animation-delay: 1.5s; animation-iteration-count: infinite;
     border-radius: 50%;}

.Inicio {position: relative; top: 50px;
         color: white;}

.Bolo {position: relative; top: 50px;
       height: 50%; width: 50%;}

#A2 {border: solid 2px  #e89000;
     position: relative; top: 100px; 
     background: black;
     box-shadow: 0px 0px 15px #e89000;
     border-radius: 50%;
     animation-name: glow; animation-duration: 4s; animation-delay: 1.5s; animation-iteration-count: infinite;
     color: white;}

.Receita {position: relative; top: 100px;
          color: white;}

#B1,#B2,#B3 {text-decoration: underline;
             color: white; text-shadow: 0px 0px 15px orange; font-weight: bold;}

.Final {position: relative; top: 150px;
        color: white;}

@media screen and (min-width: 528px){
  html {height: 525%;}
  .Tema_Claro {top: -1585px;}
}

@media screen and (min-width: 1000px){
  html {height: 300%;}
  .Tema_Claro {top: -1650px; background: black;}
}