@charset "UTF-8";
@font-face {
    font-family: "FreshFruit";
    src: url('../fonts/Fresh\ Fruit.ttf') format('truetype');
}

@font-face {
    font-family: "SuperFruit";
    src: url('../fonts/superfruit.ttf') format('truetype');
}

@font-face {
    font-family: "AcidFruit";
    src: url('../fonts/FRUIT\ ACID.otf') format('opentype');
}

:root {
    --font-fresh: "FreshFruit", 'cursive', Arial, Helvetica, sans-serif;
    --font-super: "SuperFruit", Arial, Helvetica, sans-serif;
    --font-acid: "AcidFruit", Arial, Helvetica, sans-serif;

    --cor01: #A8D73B;
    --cor02: #FF6F20;
    --cor03: #FFEA00;
    --cor04: #E63946;
    --cor05: #6A0572;
}

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

::-webkit-scrollbar {
    display: none;
}

html, body {
    background-color: rgb(216, 222, 226);
    font-family: Arial, Helvetica, sans-serif;
    scroll-behavior: smooth;
}

header {
    width: 100vw;
    height: 40vw;
    background: var(--cor02) url('../images/pikaso_embed.png') center no-repeat fixed;
    background-size: cover;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);
}

header section h1 {
    font-family: var(--font-fresh);
    color: var(--cor02);
    font-size: 5vw;
    text-align: center;
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
    padding: 10px;
}

header p {
    font-family: var(--font-super);
    font-size: 3.5vw;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    display: inline-block;
    box-sizing: border-box;

    position: relative;
    top: 5px;
    left: 80vw;
    transform: translate(-50%, -50%);
}

header p a {
    text-decoration: none;
    color: var(--cor01);
    margin: 6px;
    padding: 2px;
}

header p a:hover {
    font-size: 4vw;
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.4);
    transition: .5s;
}

header nav {
    font-family: var(--font-acid);
    font-size: 3vw;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
    display: inline-block;
    box-sizing: border-box;

    position: absolute;
    top: 35vw;
    left: 48vw;
    transform: translate(-50%, -50%);
}

header nav a {
    color: var(--cor03);
    text-decoration: none;
    margin: 0px 6px;
    padding: 6px;
}

header nav a:hover {
    font-size: 3.2vw;
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.4);
    transition: .5s;
}

/* Fim da config do header */


main nav {
    padding: 30px 0px;
    font-family: var(--font-super);
    font-size: 4.5vw;
    text-align: center;
    box-sizing: border-box;
}

main nav a {
    padding: 4px;
    margin: 0px 10px;
    text-decoration: none;
    color: var(--cor05);
}

main nav a:hover {
    font-size: 4.7vw;
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1);
    transition: .5s;
}

main h2 {
    font-family: var(--font-acid);
    font-size: 5vw;
    text-shadow: -2px 2px 1px var(--cor05);
    color: var(--cor01);
    text-align: center;
}

main article {
    max-width: 20vw;
    height: auto;
    margin: 2vw;
    display: inline-block;
    border-radius: 10%;
}

main div {
    max-width: 20vw;
    max-height: 18vw;
    min-height: 18vw;
    overflow: hidden;
    border-radius: 9% 9% 0px 0px;
}


main article img {
    width: 100%;
    height: 100%;
    border-radius: 5%;
    position: relative;
}

main article:hover {
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
    transition: .5s;
}

main article div > img:hover {
    transform: scale(1.4);
    height: 100%;
    transition: 1s;
}

main article img.car {
    width: 4vw;
    height: 4vw;
    left: 14.5vw;
}

main article img.car:hover {
    background-color: var(--cor02);
    transform: scale(1.1);
    border-radius: 8px;
    transition: .5s;
}

main article p {
    font-family: var(--font-fresh);
    font-size: 2vw;
    padding: 6px;
}

main aside {
    margin: 10vw 0vw;
}

main aside > article {
    max-width: 18vw;
    margin: 0vw 3vw;
    position: relative;
    top: 2vw;
    border-radius: 8px;
}

main aside .avimp {
    top: -2vw;
}

main aside span img {
    text-shadow: 2px 2px 1px black;
    margin: 0px;
    padding: 0px;
}

/* Fim da config do main */

footer {
    width: 100vw;
    max-height: auto;
    background: var(--cor02) url(../images/fundo-rodape.jpeg) center center no-repeat fixed;
    background-size: cover;
    box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

footer article {
    max-width: 50vw;
    margin: 4vw;
    padding: 1vw;
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.6);
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

footer h2 {
    color: var(--cor01);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
    display: inline-block;
}

footer div > p {
    position: relative;
    text-align: center;
    margin-top: 10vw;
    padding: 10px;
    color: white;
    background-color: rgba(95, 94, 94, 0.6);
}

footer img {
    max-width: 6vw;
    padding: 8px;
    display: inline;
    display: block;
    margin: auto;
}

footer img:hover {
    transform: scale(1.1);
    transition: .8s;
}

footer div > p a {
    color: white;
    text-decoration: none;
}

footer div > p a:hover {
    text-decoration: dashed;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    font-size: 1.2em;
    transition: .5s;
}