/* IzaacWeb */

html {background: radial-gradient(farthest-corner at right top,#000000,#00030C,#001403);
      background-repeat: no-repeat;
      font-family:'Poppins';
      display: flex;
      font-size: 20px;}

body {margin: 0px; padding: 0px;}

@keyframes glow { 0% {box-shadow: 0px 0px 30px magenta;}
            25% {box-shadow: 0px 0px 15px purple;}
            50% {box-shadow: 0px 0px 30px lime;}
            75% {box-shadow: 0px 0px 15px purple;}
            100% {box-shadow: 0px 0px 30px magenta;}
}

.Background {width: 100%; height: 100%;}

.Botao_superior {color: white;
                 border: solid 2px white;
                 box-shadow: 0px 0px 5px white;
                 height: 7%; width: 7%;
                 margin: 10px;}

.Botao_superior:hover {box-shadow: 0px 0px 15px;}

.Titulo {color: lime; background-image: url(img/Background.png); 
         box-shadow: 0px 0px 15px lime;
         border-radius: 50%;
         cursor: default;
         width: 75%; position: relative;
         top: -150px; font-size: 25px;}

.Projetos_img {width: 75%; height: 75%; position: relative; top: -90px;}

/* A= Apresentações, P= Perfis, S= Sites, T= Títulos, I= Imagens, Te= Textos*/

#A1 {color: white; position: relative;
     top: -75px; cursor: default;}

#A2 {color: lime; display: block; background: #0a0b64b7; width: 250px; height: 110px;
     border-radius: 50px;
     cursor: default;
     padding: 5px;
     box-shadow: 0px 0px 15px lime;}

#P1 {color: white; text-decoration: none;
     border: 2px solid white; border-radius: 50px;
     background-color: #0b061f; 
     margin-bottom: 1em; display: block;
     text-align: center; padding: 3px;
     width: 200px; font-size: 10px;
     position: relative; top: -110px;}

#P1:hover {border: 2px solid lime;}
#P1:active {border: 2px solid lime; background: white; color: black;}

#P2 {color: white; text-decoration: none;
     border: 2px solid white; border-radius: 50px;
     background-color: #03064f; 
     margin-bottom: 1em; display: block;
     text-align: center; padding: 3px;
     width: 200px; font-size: 10px;
     position: relative; top: -110px;}

#P2:hover {border: 2px solid lime;}
#P2:active {border: 2px solid lime; background: white; color: black;}

#A3 {color: lime; display: block; background: #0a0b64b7; width: 250px; height: 255px;
     box-shadow: 0px 0px 15px lime; 
     border-radius: 50px;
     cursor: default;
     padding: 5px;
     position: relative; top: -75px}

#S1 {color: white; text-decoration: none;
     border: 2px solid white; border-radius: 50px;
     background-color: grey; 
     margin-bottom: 1em; display: block;
     text-align: center; padding: 3px;
     width: 200px; font-size: 10px;
     position: relative; top: -330px;}

#S1:hover {border: 2px solid lime;}
#S1:active {border: 2px solid lime; background: white; color: black;}

#S2 {color: white; text-decoration: none;
     border: 2px solid white; border-radius: 50px;
     background-color: #3e036b; 
     margin-bottom: 1em; display: block;
     text-align: center; padding: 3px;
     width: 200px; font-size: 10px;
     position: relative; top: -330px;}

#S2:hover {border: 2px solid lime;}
#S2:active {border: 2px solid lime; background: white; color: black;}

#S3 {color: white; text-decoration: none;
     border: 2px solid white; border-radius: 50px;
     background-color: teal;
     margin-bottom: 1em; display: block;
     text-align: center; padding: 3px;
     width: 200px; font-size: 10px;
     position: relative; top: -330px;}

#S3:hover {border: 2px solid lime;}
#S3:active {border: 2px solid lime; background: white; color: black;}

#S4 {color: white; text-decoration: none;
     border: 2px solid white; border-radius: 50px;
     background-color: green; 
     margin-bottom: 1em; display: block;
     text-align: center; padding: 3px;
     width: 200px; font-size: 10px;
     position: relative; top: -330px;}

#S4:hover {border: 2px solid lime;}
#S4:active {border: 2px solid lime; background: white; color: black;}

#S5 {color: white; text-decoration: none;
     border: 2px solid white; border-radius: 50px;
     background-color: #d39a00; 
     margin-bottom: 1em; display: block;
     text-align: center; padding: 3px;
     width: 200px; font-size: 10px;
     position: relative; top: -330px;}

#S5:hover {border: 2px solid lime;}
#S5:active {border: 2px solid lime; background: white; color: black;}

#S6 {color: white; text-decoration: none;
     border: 2px solid white; border-radius: 50px;
     background-color: purple; 
     margin-bottom: 1em; display: block;
     text-align: center; padding: 3px;
     width: 200px; font-size: 10px;
     position: relative; top: -330px;}

#S6:hover {border: 2px solid lime;}
#S6:active {border: 2px solid lime; background: white; color: black;}

#A4 {color: grey; position: relative;
     top: -275px; font-size: 10px;
     cursor: default;}

#T1 {color: white; position: relative;
     top: -150px; cursor: default;
     text-decoration: underline;}

#I1 {position: relative; top: -150px; width: 70%;
     box-shadow: 0px 0px 15px magenta;
     height: 70%; border: solid 2px grey; 
     animation-name: glow; animation-duration: 4s; animation-delay: 1.5s; animation-iteration-count: infinite;}

#Te1 {color: #e7e7e7e7; position: relative;
      top: -150px; cursor: default;}

.Github {color: white; text-decoration: none;
     border: 2px solid white; border-radius: 50px;
     background-color: #047303b7; 
     margin-bottom: 1em; display: block;
     text-align: center; padding: 3px;
     width: 200px; font-size: 10px;
     position: relative; top: -150px;}

.Github:hover {border: 2px solid lime; color: white;}
.Github:active {border: 2px solid lime; background: white; color: black;}

.Dispositivos_lista {
    display: flex;
    justify-content: center;
    list-style-type: none;
    margin: 5em 0;}

#T2 {color: white; position: relative;
     top: 50px; cursor: default; 
     text-decoration: underline;}

#I2 {position: relative; top: 5px; left: -20px;
     width: 100%;
     height: 50%; box-shadow: 0px 0px 2px #efefefef}

#T3 {color: red; position: relative;
     top: -15px; cursor: default;
     left: -20px;}

#T4 {color: purple; position: relative;
     top: -15px; cursor: default;
     left: -20px;}

#T5 {color: blue; position: relative;
     top: -15px; cursor: default; 
     left: -20px;}

#I3 {position: relative; top: -100px; width: 25%;
     box-shadow: 0px 0px 15px magenta;
     height: 25%; border: solid 2px green;
     border-radius: 50%;}

#T6 {color: green; position: relative;
     top: -130px; cursor: default; 
     text-decoration: underline;}

#Te2 {color: #e7e7e7e7; position: relative;
      top: -100px; cursor: default;
      font-size: 9px;}

#Te3 {color: #e7e7e7e7; position: relative;
      top: -75px; cursor: default; 
      font-size: 15px;}

a {color: #e7e7e7e7;}

a:hover {color: lime;}

/* Proporções Extras */

@media screen and (min-width: 900px){
   .Botao_superior {height: 3%; width: 3%;}
   .Projetos_img {height: 50%; width: 50%;}
   #I1,#I2 {height: 50%; width: 50%;}
}