/* IzaacWeb V4 */

html {background: radial-gradient(farthest-corner at right top,#000000,#00030C,#001403);
      background-repeat: no-repeat;
      background-color: #001403;
      font-family:'Poppins', sans-serif;
      display: flex;
      filter: none;
      transition: filter 2s ease, background-color 2s;
      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: 300px; filter: hue-rotate(270deg); box-shadow: 0px 0px 50px #004646;}

.dropbtn {background-color: black;
          color: white;
          padding: 7px;
          font-size: 16px;
          font-weight: bold;
          box-shadow: 0px 2px 5px lime, -2px 0px 5px yellow;
          transition: background-color 0.3s, box-shadow 0.3s;
          border: outset 2px yellowgreen;}
  
.dropdown {position: relative;
           display: inline-block;
           cursor: default;}

.dropdown-content {display: none;
                   position: absolute;
                   background-color: black;
                   min-width: 100px;
                   box-shadow: 0px 2px 5px lime, -2px 0px 5px yellow;
                   z-index: 1;}

.dropdown-content a {color: white;
                     padding: 1px 1px;
                     font-size: 15px;
                     font-weight: bold;
                     text-decoration: none;
                     border: solid 1px yellowgreen;
                     display: block;
                     transition: background-color 0.3s, box-shadow 0.3s;}

.dropdown-content a:hover {background-color: darkgreen; box-shadow: 0px 0px 10px white; transition: background-color 0.3s, box-shadow 0.3s;}

.dropdown:hover .dropdown-content {display: block;}
  
.dropdown:hover .dropbtn {background-color: darkgreen; box-shadow: 0px 0px 10px white; transition: background-color 0.3s, 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: -250px; font-size: 25px;}

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

.Github {color: white; text-decoration: none;
         border: 2px outset yellowgreen; border-radius: 50px;
         background-color: black;
         margin-bottom: 1em; display: block;
         text-align: center; padding: 3px;
         font-weight: bold;
         box-shadow: 0px 2px 5px green, -2px 0px 5px lime;
         width: 200px; font-size: 10px;
         transition: border 0.3s, background-color 0.3s;
         position: relative; top: -150px;}

.Github:hover {border: 2px outset lime; color: white; background-color: green; transition: border 0.3s, background-color 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 yellowgreen; border-radius: 50px;
     background-color: black; 
     margin-bottom: 1em; display: block;
     text-align: center; padding: 3px;
     font-weight: bold;
     box-shadow: 0px 2px 5px #0b061f, -2px 0px 5px #0b061f;
     width: 200px; font-size: 10px;
     transition: border 0.3s, background-color 0.3s;
     position: relative; top: -110px;}

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

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

#P2:hover {border: 2px outset lime; background-color: #03064f; transition: border 0.3s, background-color 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 yellowgreen; border-radius: 50px;
     background-color: black;
     margin-bottom: 1em; display: block;
     text-align: center; padding: 3px;
     font-weight: bold;
     box-shadow: 0px 2px 5px grey, -2px 0px 5px white;
     width: 200px; font-size: 10px;
     transition: border 0.3s, background-color 0.3s;
     position: relative; top: -365px;}

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

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

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

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

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

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

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

#S5 {color: white; text-decoration: none;
     border: 2px outset yellowgreen; border-radius: 50px;
     background-color: black;
     margin-bottom: 1em; display: block;
     text-align: center; padding: 3px;
     font-weight: bold;
     box-shadow: 0px 2px 5px crimson, -2px 0px 5px red;
     width: 200px; font-size: 10px;
     transition: border 0.3s, background-color 0.3s;
     position: relative; top: -365px;}

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

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

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

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

#S7:hover {border: 2px outset lime; background-color: orange; color: black; transition: border 0.3s, background-color 0.3s, color 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;
     transition: filter 1s;
     animation-name: glow; animation-duration: 4s; animation-delay: 1.5s; animation-iteration-count: infinite;}

#I1:hover {filter: brightness(1.2); transition: filter 1s;}

#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;
     transition: filter 1s;
     border-radius: 50%;}

#I3:hover {filter: brightness(1.2); transition: filter 1s;}

#T6 {color: #0ab10a; position: relative;
     top: -130px; cursor: default;}

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

/* Proporções Extras */

@media screen and (min-width: 900px){
  .Background {height: 550px;}
  .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;}
}