/* IzaacWeb V4 - Portfolio */

html {background: radial-gradient(farthest-corner at right top,#000000,#000c30,#003208);
      background-repeat: no-repeat;
      background-color: #001403;
      font-family:'Poppins', sans-serif;
      display: flex;
      transition: filter 2s ease, background-color 2s;
      font-size: 20px;}

body {margin: 0px; padding: 0px; width: 100%;}

li {font-size: 15px;}

strong {text-shadow: 0px 0px 3px blue;}

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

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

.Opcoes {text-align: center;}

.dropbtn {background-color: black;
          color: white;
          padding: 5px;
          position: relative;
          top: 90px;
          font-size: 13px;
          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;
                   top: 122px;
                   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: 13px;
                     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: black;
         box-shadow: 0px 0px 15px lime;
         cursor: default;
         width: 100%; font-size: 25px;}

.Separacao {color: #e7e7e7e7; box-shadow: 0px 0px 3px cyan;}

.Lista {font-size: 15px; text-align: left; padding: 10px;}

.Alura {font-size: 10px; text-decoration: none;}

.Emblema {float: right; height: 25px; width: 25px; padding-left: 50px; position: absolute;}

.Emblema2 {float: right; height: 25px; width: 25px; padding-left: 15px; position: absolute;}

.Emblema3 {float: right; height: 25px; width: 25px; padding-left: 15px; position: absolute;}

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

/* T= Títulos, I= Imagens, Te= Textos*/

#T1 {color: lime; cursor: default; background-color: black; box-shadow: 0px 0px 15px lime; font-size: 20px}

#I1 {width: 25%;
     box-shadow: 0px 0px 15px magenta;
     height: 25%; border: solid 2px grey;
     position: relative; top: 25px;
     transition: filter 1s;
     z-index: -1;
     border-radius: 100%;}

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

#Te1 {color: #e7e7e7e7; cursor: default; width: 90%;}

#Te2 {color: #e7e7e7e7; cursor: default;
      font-size: 10px; width: 90%;}

/* Proporções Extras */

@media screen and (min-width: 900px){
   .Titulo {font-size: 30px;}
   .dropbtn {top: 105px;}
   .dropdown-content {top: 135px;}
   .Alura {font-size: 15px;}
   #T1 {font-size: 25px;}
   li,#Te1 {font-size: 20px; text-align: center;}
   #I1,#I2 {height: 10%; width: 10%;}
   #Te2 {font-size: 15px;}
   #menu {font-weight: bold;}
}