/* IzaacWeb V3 */

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

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

a {color: #e7e7e7e7; transition: color 0.3s;}

a:hover {color: lime; transition: color 0.3s;}

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

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

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

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

.Titulo {color: lime; background-color: #000000aa;
         box-shadow: 0px 0px 15px lime;
         border-radius: 50%;
         font-style: italic;
         cursor: default;
         width: 75%; position: relative;
         top: -150px; font-size: 25px;}

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

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

.Github:hover {border: 2px outset lime; color: white; transition: border 0.3s;}
.Github:active {border: 2px outset lime; background: white; color: black;}

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

#horas {color: white; width: 0px; position: relative; top: -100px; text-shadow: 0px 0px 15px cyan; cursor: default;}
#minutos {color: white; width: 0px; position: relative; top: -100px; text-shadow: 0px 0px 15px cyan; cursor: default;}
#segundos {color: white; width: 0px; position: relative; top: -100px; text-shadow: 0px 0px 15px cyan; cursor: default;}
#periodo {color: white; width: 0px; position: relative; top: -100px; text-shadow: 0px 0px 15px cyan; cursor: default;}
#separacao {color: white; width: 0px; position: relative; top: -100px; text-shadow: 0px 0px 15px cyan; cursor: default;}

/* 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 outset white; border-radius: 50px;
     background-color: #0b061f; 
     margin-bottom: 1em; display: block;
     text-align: center; padding: 3px;
     font-weight: bold;
     width: 200px; font-size: 10px;
     transition: border 0.3s;
     position: relative; top: -110px;}

#P1:hover {border: 2px outset lime; transition: border 0.3s;}
#P1:active {border: 2px outset lime; background: white; color: black;}

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

#P2:hover {border: 2px outset lime; transition: border 0.3s;}
#P2:active {border: 2px outset lime; background: white; color: black;}

#A3 {color: lime; display: block; background: #0a0b64b7; width: 250px; height: 290px;
     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 outset white; border-radius: 50px;
     background-color: grey; 
     margin-bottom: 1em; display: block;
     text-align: center; padding: 3px;
     font-weight: bold;
     width: 200px; font-size: 10px;
     transition: border 0.3s;
     position: relative; top: -365px;}

#S1:hover {border: 2px outset lime; transition: border 0.3s;}
#S1:active {border: 2px outset lime; background: white; color: black;}

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

#S2:hover {border: 2px outset lime; transition: border 0.3s;}
#S2:active {border: 2px outset lime; background: white; color: black;}

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

#S3:hover {border: 2px outset lime; transition: border 0.3s;}
#S3:active {border: 2px outset lime; background: white; color: black;}

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

#S4:hover {border: 2px outset lime; transition: border 0.3s;}
#S4:active {border: 2px outset lime; background: white; color: black;}

#S5 {color: white; text-decoration: none;
     border: 2px outset white; border-radius: 50px;
     background-color: #412d0a; 
     margin-bottom: 1em; display: block;
     text-align: center; padding: 3px;
     font-weight: bold;
     width: 200px; font-size: 10px;
     transition: border 0.3s;
     position: relative; top: -365px;}

#S5:hover {border: 2px outset lime; transition: border 0.3s;}
#S5:active {border: 2px outset lime; background: white; color: black;}

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

#S6:hover {border: 2px outset lime; transition: border 0.3s;}
#S6:active {border: 2px outset lime; background: white; color: black;}

#S7 {color: white; text-decoration: none;
     border: 2px outset white; border-radius: 50px;
     background-color: orange; 
     margin-bottom: 1em; display: block;
     text-align: center; padding: 3px;
     font-weight: bold;
     width: 200px; font-size: 10px;
     transition: border 0.3s;
     position: relative; top: -365px;}

#S7:hover {border: 2px outset lime; transition: border 0.3s;}
#S7:active {border: 2px outset 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-shadow: 0px 0px 15px cyan;
     text-decoration: underline;}

#I1 {position: relative; top: -150px; width: 70%;
     box-shadow: 0px 0px 15px magenta;
     border-radius: 20px;
     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; width: 90%;}

#T2 {color: white; position: relative;
     top: 50px; cursor: default; 
     text-shadow: 0px 0px 15px cyan;
     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;
     text-shadow: 0px 0px 15px orange;
     left: -20px;}

#T4 {color: yellow; position: relative;
     top: -15px; cursor: default;
     text-shadow: 0px 0px 15px red;
     left: -20px;}

#T5 {color: blue; position: relative;
     top: -15px; cursor: default; 
     text-shadow: 0px 0px 15px cyan;
     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; width: 90%;}

/* Proporções Extras */

@media screen and (min-width: 900px){
   .Botao_superior {height: 3%; width: 3%;}
   .Titulo {font-size: 30px; top: -450px;}
   .Projetos_img {height: 50%; width: 50%;}
   .Github {font-size: 15px; width: 300px;}
   #S1,#S2,#S3,#S4,#S5,#S6,#S7 {font-size: 12px; top: -410px;}
   #P1,#P2 {font-size: 12px; top: -135px;}
   #A1 {font-size: 22px;}
   #A3 {font-size: 22px; width: 300px; height: 325px;}
   #A2 {font-size: 22px; width: 300px; height: 125px}
   #T1,#T2 {font-size: 35px; font-weight: bold;}
   #A4 {font-size: 15px;}
   #Te1,#T3,#T4,#T5,#T6 {font-size: 18px;}
   #I1,#I2 {height: 50%; width: 50%;}
   #I1 {border-radius: 50px;}
   #I3 {height: 15%; width: 15%;}
   #Te2 {font-size: 14px;}
   #menu a {font-weight: bold;}
}