* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    scroll-behavior: smooth;
}

html, body {
    font-size: 0.8em;
    font-family: 'Open Sans', sans-serif;
    color: white;
    background: url(img/moon-2048727_960_720.jpg) no-repeat center center fixed;
    background-size: cover;
}

.header {
    position: sticky;   
    position: -webkit-sticky; /* Safari */
    top: 0;  
    height: 9vh;
    width: auto; 
    background: radial-gradient(rgb(92, 64, 64) 5%, rgba(10,10,10,1) 10%, rgb(51, 18, 18) 10%,
                rgba(10,10,10,1) 20%, rgba(20,20,20,1) 30%, rgba(30,30,30,1) 40%,rgb(83, 71, 71) 40%,
                rgb(58, 44, 44) 50%, rgba(25,25,25,1) 60%, rgb(58, 44, 44) 80%,
                rgb(104, 97, 97) 100%);
    text-shadow: 1px 1px 1px rgb(243, 243, 231);
}

.nav ul {
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
}

.nav ul li {                        /* 26/9 testado OK */
    position: relative; 
    display: inline;                /* => menu lado a lado */
    font-size: clamp(0.1rem, 1.8em, 2.0rem);
    padding: 0.5em 0.2em;
}

.nav ul li a:hover, a:focus {  
    background: #333;
    border-radius: 80px;
    padding: 2px;
    font-size: 14px;
    -moz-box-shadow: 8px 8px 8px 8px #CCC;
    -webkit-box-shadow: 4px 4px 8px 8px #ccc;
}

.nav ul li:hover ol {                   /* 26/9 teste ok */
    display: block; 
}

.nav ul li ol {
    position: absolute;                                 /* 24/10 OK =  ol depende da relative */                   
    display: none;                                      /* 26/9 teste OK oculta o sub menu*/  
    background: radial-gradient( rgba(60,52,59,1) 0%, rgba(12,10,15,1) 100%);
}

.nav ul li ol li {
    display: block;                                 /* 27/9 teste OK */
    font-size: 10px;   
    text-transform: uppercase;
    text-align: center;                             /* 24/10 teste ok*/
    width: 180px;
    padding: 0.2em 0;
    border: 0.2px ridge rgb(66, 61, 61);
}

.nav ul li ol li a { 
    all: revert;
    text-decoration: none;
    color: white;
}

.nav cite {
    font-style: normal;
}

.main {   /* verificados 13/09 */
    white-space: pre-line; /* 26/10=OK= espaços em branco dentro dos elementos são manipulados*/
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}    

.intro {
    font-size: 13px;
    color:rgb(221, 233, 168);
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
}

.container {
    display: flex; /* Lado a lado */
    flex-wrap: wrap; /* Quebra de linha  e row (padrao) */
    justify-content: center;  /*  space-around  distribuicao */
    padding: 0.5em;
    font-size: 11px;
}

.mostrar {
    background-color: rgba(12, 12, 12, 0.801);
    outline: 1px groove rgb(214, 175, 170);   /* contorno */
    font-size: 12px;
    color:rgb(245, 244, 215);
    display: flex;
    flex-direction: column;
    align-items: center; /* Necessario para a IMG */
    margin: 1% 10% 1% 10%;
    padding: 0.7em 0.7em 0.7em 0.7em;
}

.buttonResult{
    color: white;
    text-align: center;
    cursor: pointer;
    width: auto;
    height: auto;
    border-radius: 50%;
    background-color: #008CBA;
    padding: 15px;
}

.buttonResult:hover {
    background-color: #0ab1e9;
    color: white;
    border-radius: 50%;
}

#linkcodigo{    /* ID para codigo github */
    color: rgb(214, 186, 158);
    font-size: 12px;
    padding: 7px;
}

/* botao de pois de clicado: content: '✓';  
.visited {
    background-image: none;
    background-color: yellow;
    color: ciano;
}*/

/* https://www.w3.org/Style/Examples/007/figures.pt_BR.html */

figure {
    display: table;
    cursor: pointer;
    border-top: none;
    padding: 0.5em;
}

figure img{
    max-width: 130px;
    max-height: 110px;
    border-radius: 15px;
    border: 1px #259ab8 ridge;
    /*filter: brightness(0.9); */
}

figure img:hover {              /* mouse sobre o botao */
    font-size: medium;
    transform: scale(1.6);
    transition: all 0.7s;
}

figcaption {
    text-align: center;
    display: table-caption;
    font-weight: bold;
    caption-side: top;
    padding: 0.2em;
    border-bottom: none;
}

/* figure::after {
    position: absolute;
    bottom: -20px; 
    content: attr(data-title);   
    width: 100%;   
    left: 0; }
    button:nth-child(2) {
    margin: 0.1em 0.1em;}
    button:nth-last-child(1) {
    margin: 0.1em 0.1em; } */

.batimentos {
    color: rgb(211, 5, 5);
}

.copas { 
    color: gold;
}

.olimpiadas {
    background: linear-gradient(to right,
      rgb(220, 220, 233) 20%,
      rgb(221, 236, 165) 20%, rgb(148, 184, 148) 40%,
      rgb(221, 191, 191) 40%, rgb(187, 123, 123) 60%,
      orange 60%, orange 80%,
      rgb(235, 224, 235) 80%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tabuada {
    color:rgba(182, 198, 250, 0.795)
}

.combustiveis {
    color:aquamarine;
}

.mediaIdade {
    color:rgb(216, 211, 164);
}

.adivinharNumero {
    background: linear-gradient ( to bottom,
        #1abc42 50%,
        #258dd3 50%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.linhaColuna {
    color:rgba(214, 214, 55, 0.856);
}

.imgtabela {
    border: 2px solid #D20;
    height: 16em;
    width: 26em;
    margin-top: 7px;
    background: url(https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces/sample1-tabledom.jpg);
}

.megaSena {
    color:#0ab1e9;
}

.ulNumbers {
    border: 1px solid rgb(214, 219, 139);
    background-color: rgb(29, 44, 56);
    font-family: monospace;
    font-size: 17px;
    margin: 5px;
    list-style-type: none;
    padding: 2px;
}

.liNumbers {
    border: 2px solid rgb(54, 173, 219);
    display: inline-block;
    background-color: white;
    color: black;
    font-size: larger;   
    width: 30px;
    border-radius: 50%;
    user-select: none;
    margin: 5px;
    /* padding: 5px 10px; */    
}

.canvasLearning {
    color:#ece1de;
}

.damas {  
    background: linear-gradient(to right,
    rgb(234, 234, 241) 20%,
    rgb(245, 247, 131) 20%, rgb(149, 247, 149) 40%,
    rgb(221, 191, 191) 40%, rgb(240, 201, 201) 60%,
    rgb(255, 238, 0) 60%, rgb(255, 251, 0) 80%,
    rgb(235, 224, 235) 80%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bandeiras {
    color:#d49797;
}

.canvasCondicionais {
    color:#0ae954;
}

.canvasCrescente {
    color:#55bde0;
}

.canvasParabola {
    color:#adcbd1;
}

.seno {
    color:#5a65a1;
}

.cliques {
    color:#e0d755;
}

.botaoMouse {
    color:#0ae9b7;
}

.paint {
    color:#e9eef0;
}

.animacoes {
    background: linear-gradient(to bottom,
        #e8eeea 40%,
        #0f0f0f 20%,
        #e8eeea 40%
    );
    background-clip: text; /* border-box; */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tiroAlvo {
    color:#fa3e3e;
}

.formEventos {
    color:#cdd0db;
}

.formArray {
    color:#badce7;
}

.objetos {
    color:#e1e3e4;
}

.dom {
    color:#55bde0;
}

.imc {
    color:#afe055;
}

.social {
    display: flex; /* Menu lado a lado */
    justify-content: center;
}

.social img {
    border-radius: 30%;
    animation: animate 6s ease-out infinite;
    height: 36px;
    width: 30px;
    margin: 10px;
}

#footer {
    display: flex;
    justify-content: space-between;
}

@keyframes animate {
    0% {
        box-shadow: 0 0 0 2px rgba(66, 66, 55, 0.7), 0 0 0 2px rgba(71, 71, 41, 0.884);
    }
    20% {
        box-shadow: 0 0 0 5px rgba(51, 54, 3, 0.877), 0 0 0 5px rgba(70, 63, 23, 0.842);
    }
    40% {
        box-shadow: 0 0 0 10px rgba(60, 63, 47, 0.685), 0 0 0 10px rgba(127, 128, 123, 0.521);
    }
    80% {
        box-shadow: 0 0 0 4px rgba(57, 61, 3, 0.877), 0 0 0 4px rgbrgba(59, 52, 7, 0.842);
    }
    100% {
        box-shadow: 0 0 0 10px rgba(56, 58, 27, 0.856), 0 0 0 10px rgrgba(83, 88, 52, 0.911)
    }
}

a {
    color: #fff;
}

a:visited {
    color: #ece1de;
    font-weight: 400;
}

a:before { 
    color:rgb(0, 0, 158);
}