* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}


:root {
    --cor1 : rgba(0, 0, 0, 0.58);
    --cor2: rgb(143, 143, 143);
    --cor3: rgb(27, 27, 27);
    --cor4: rgba(255, 255, 255, 0.2);
    --cor5 : rgba(0, 0, 0, 0.548);
    --corletras1: rgb(214, 214, 214);
    --corletras2: rgb(51, 51, 51);

}


body {
    background-image: linear-gradient(90deg, var(--cor3), var(--cor2));
    position: relative;
    font: normal 600 1em "Oswald";
    overflow-x: hidden;
    color: var(--corletras1);
}


.topo {
    position: relative;
    width: 100vw;
    transform: translateY(-7px);
}


.videofocus {
    position: relative;
    width: 100vw;
    transform: translateY(6px);
    pointer-events: none;
}


.videofocussmart {
    display: none;
}

.apresentacao {
    position: relative;
}


.principal {border: rgba(0, 0, 255, 0) solid 1px;
    box-shadow: inset 5px 5px 15px var(--cor1);
    height: 100vh;
}


.artigo {border: rgba(255, 0, 0, 0) solid 1px;
    height: 8em;
    box-shadow: 5px 5px 15px var(--cor1);
    width: 50vw;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.titulo {
    font-size: 1em;
}

.destaque {
    font-size: 1.3em;
}

.art {
    font-size: 0.9em;
}


#design {
    display: flex;
    flex-direction: column-reverse;
    background-image: url('midias/MOUSE\ W1\ 1.webp');
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}


#designA {
    background-color: black;
    box-shadow: 10px -10px 10px var(--cor1);
    
}


#texturas {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    background-image: url('midias/MOUSE\ W1\ 2.webp');
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}


#texturasA {
    position: absolute;
    top: 0;
    right: 0;
    background-color: black;
    box-shadow: -10px 10px 10px var(--cor1);
    transform: translateY(-1px);
}


#funcoes {
    display: flex;
    flex-direction: column-reverse;
    background-image: url('midias/MOUSE\ W1\ 3.webp');
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}


#funcoesA {
    background-color: black;
    box-shadow: 10px -10px 10px var(--cor1);
}


#mp {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    background-image: url('midias/MOUSE\ W1\ 4.webp');
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}


#mpA {
    position: absolute;
    top: 0;
    right: 0;
    background-color: black;
    box-shadow: -10px 10px 10px var(--cor1);

}


#designA, #funcoesA {
    background-image: url('midias/fundofocus2.png');
    color: var(--corletras1);
    border-radius: 0px 20px 0px 0px;
    transform: translate(-2px, 2px);
}


#texturasA, #mpA {
    background-image: url('midias/fundofocus1.png');
    color: var(--corletras2);
    border-radius: 0px 0px 0px 20px;
    transform: translate(2px, -2px);
}


.adicional {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: 100px;
    color: var(--corletras1);
    box-shadow: 0px 0px 10px var(--cor1);
    text-align: start;
    background-image: url('midias/filler.png');
    background-position-y: 47%;
    background-size: cover;
}


.WMENU {
    background-color: var(--cor4);
}


.wmenu1 {
    color: var(--corletras2);
    text-shadow: 2px 2px 2px var(--cor5);
}


.wm1 {
    color: var(--corletras2);
    text-shadow: 1px 1px 2px var(--cor5);
}


.wm2 {
    color: var(--corletras2);
    text-shadow: 1px 1px 2px var(--cor5);
}


.wm1:hover {
    background-color: var(--cor3);
    color: var(--corletras1);
    box-shadow: 5px 5px 5px var(--cor5);
}


.wm2:hover {
    background-color: var(--cor3);
    color: var(--corletras1);
}


/*LISTA DE PROJETOS*/
#listaPROJETOSd a:hover,
#listaPROJETOSm a:hover{
    background-color: var(--corletras1);
}
#listaPROJETOSd:hover a,
#listaPROJETOSm:hover a{
    color: var(--corletras1);
}
#listaPROJETOSd a,
#listaPROJETOSm a{
    color: var(--cor1);
}
#listaPROJETOSd li:hover a,
#listaPROJETOSm li:hover a{
    color: var(--cor1);
}
/*LISTA DE PROJETOS*/



.WELLINGTON {
    font: normal 300 20px "Special Gothic Condensed One";
}


.showcase {
    font: normal 300 17.8px "Tomorrow";
    justify-content: center;
    transform: translateY(-30%);
}

.homebotao {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 10px 5px 10px;
    text-decoration: none;
    color: var(--corletras2);
}

.homebotao:hover {
    background-color: var(--cor3);
    border-radius: 10px;
    color: var(--corletras1);
    box-shadow: 5px 5px 5px var(--cor5);
    cursor: pointer;
    transition: background-color 0.3s ease-in-out,
                box-shadow 0.4s ease-in-out;
}

/*RODAPÉ*/
#RODAPE {
    position: absolute;
    width: 100%;
    height: 50px;
    z-index: 1;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding: 1%;
    right: 0;
    flex-direction: row;
    justify-content: flex-start;
    box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.4);
}


footer#RODAPE {             
    color: var(--cortextocaixa1);
    font-size: 1em;
}


.f img{
    width: 30px;
    margin: 5px;
}
/*RODAPÉ*/

/*TELA DE LOADING*/

#loadingframe {background-color: rgb(0, 0, 0);
    position: fixed;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    overflow: hidden;
}


.load {
    position: relative;
    width: 500px;
}


#animacao1 {
    animation: pulsar1 1s infinite alternate;
    stop-color: black; 
    stop-opacity: 1;
}


@keyframes pulsar1 {
    from    {stop-color: var(--cor1);}
    to      {stop-color: var(--cor2);}
}

#loadingframe.paginacarregada {
    opacity: 0;
    pointer-events: none;
}


#focusload {
    width: 20vw;
    position: absolute;
    display: flex;
    animation: logopulsando 1.5s infinite;
}

@keyframes logopulsando {
    0%          {opacity: 0;}
    50%         {opacity: 1;}
    100%        {opacity: 0;}
}

/*TELA DE LOADING*/



/*MENU HAMBURGER*/
.swm1, .swm2 {
    display: none;
}


.wmenuside>svg {
   display: none;
}


.wmenu2>svg {
   display: none;
}
/*MENU HAMBURGER*/

/*MEDIA QUERIES*/


@media (max-width: 500px){
    body {
    font-size: 0.8em;
}
}

@media (max-width: 520px){

    header {
    position: absolute;
    max-width: 100%;
    }


    .topo {
    position: relative;
    height: 98vh;
    overflow: hidden;
    }


    body {
    position: relative;
    max-width: 100%;
    }


    .videofocus {
    display: none;
    }


    .videofocussmart {
    position: absolute;
    height: 100%;
    width: 114%;
    top: 0;
    left: -13%;
    object-fit: cover;
    object-position: 50%;
    display: block;
    pointer-events: none;
    }


    .apresentacao {
    position: relative;
    width: 100%;
    }


    footer {
    background-image: linear-gradient(90deg, var(--cor3), var(--cor2));
    text-align: center;
    color: var(--corletras1);
    }


    .artigo {
    height: 10em;
    max-width: 100%;
    padding: 15px;
    }

    .titulo {
    font-size: 1em;
    }


    .destaque {
    font-size: 1.5em;
    }


    .principal {
    top: 1px;
    }

 
    .art {
    font-size: 0.9em;
    }

/*MENU HAMBURGER*/
   .wmenu2>svg {
    display: flex;
    fill: var(--corletras2);
    }


    .wmenuside>svg {
    display: flex;
    fill: var(--corletras1);
    }


    .wmenu2>svg:hover {
    background-color: var(--corletras1);
    fill: var(--corletras2);
    box-shadow: 5px 5px 5px var(--cor5);
    }


    .wmenuside>svg:hover {
    background-color: var(--corletras1);
    fill: var(--corletras2);
    box-shadow: 5px 5px 5px var(--cor5);
    }


    .wmenuside {
    background: linear-gradient(90deg, var(--cor3), var(--cor2));
    }


    .wm1 {
    display: none;
    }


    .wm2 {
    display: none;
    }


    .WMENU {
    max-height: 10em;
    }


    .swm1 {
    color: var(--corletras1);
    text-shadow: 1px 1px 2px var(--cor5);
    }


    .swm2 {
    color: var(--corletras1);
    text-shadow: 1px 1px 2px var(--cor5);
    }


    .swm1:hover {
    background-color: var(--corletras1);
    color: var(--corletras2);
    box-shadow: 5px 5px 5px var(--cor5);
    }


    .swm2:hover {
    background-color: var(--corletras1);
    color: var(--corletras2);
    box-shadow: 5px 5px 5px var(--cor5);
    }
    /*MENU HAMBURGER*/

    /*LISTA DE PROJETOS*/
    #listaPROJETOSd a:hover,
    #listaPROJETOSm a:hover{
        background-color: white;
    }
    #listaPROJETOSd:hover a,
    #listaPROJETOSm:hover a{
        color: white;
    }
    #listaPROJETOSd a,
    #listaPROJETOSm a{
        color: var(--cor1);
    }
    #listaPROJETOSd li:hover a,
    #listaPROJETOSm li:hover a{
        color: var(--cor1);
    }
    /*LISTA DE PROJETOS*/


}




@media (max-width: 400px){
    .artigo{
    height: 20%;
    }
}
/*MEDIA QUERIES*/

/*TELA DE LOADING*/

#loadingframe {background-color: rgb(0, 0, 0);
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}


.load {
    display: flex;
    height: 100vh;
}


.focusload {
    width: 70vw;
    fill: url('#rgFocus');
    transform-origin: center;
    pointer-events: none;
}


.focusload>path{
    scale: 1.5;
}


#animacao1 {
    animation: pulsar1 1s infinite alternate;
    stop-color: black; 
    stop-opacity: 1;
}


@keyframes pulsar1 {
    from    {stop-color: var(--cor1);}
    to      {stop-color: var(--cor2);}
}

#loadingframe.paginacarregada {
    opacity: 0;
    pointer-events: none;
}


@media (max-width: 900px){

    .artigo {
    height: 30%;
    max-width: 100%;
    padding: 15px;
    }

}


/*TELA DE LOADING*/