@charset "UTF-8";


:root{
    --header_height: 6rem;
    --footer_height: 3rem;
    --main_height: calc(100vh - var(--footer_height) - var(--header_height)) 
}

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;

}

body{
    background-image: linear-gradient(0deg, rgb(13, 46, 54), rgb(16, 43, 107));
    /* background-color: white */
}

header{
    width: 100%;
    height: var(--header_height);
    background-color: rgb(13, 21, 54);
    border-bottom: 3px solid black;
    padding: 1rem
}

header > h1{
    color: white;
    font-variant: small-caps;
    font-family: sans-serif;
    text-wrap: balance;
    text-align:center;
    font-size: 2rem;
}

header > p{
    text-align: center;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    margin: .5rem;
}

main{
    display: flex;
    height: var(--main_height);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
}

main > p{
    font-size: 1.2rem;

}

button{
    background-color: rgb(0, 60, 255);
    color: white;
    padding: 10px;
    border: 3px solid black;
    border-radius: 10px;
    font-family: serif;
    font-variant: small-caps;
    letter-spacing: 2px;
    font-size: 1rem;
    margin: 1rem
}

#fechar_modal{
    background-color: rgb(159, 49, 45);
    display: inline;
}

dialog{
    text-align: center;
    padding: 20px;
    background-color: rgb(29, 67, 192);
    margin: auto auto;
}

#modal > h2{
    margin: 10px;
    font-family: sans-serif ;
    font-variant: small-caps;
}

#modal > p{
    font-family: sans-serif;
    text-wrap: balance;
    font-size: 1.05rem
}

#modal::backdrop{
    background-image: linear-gradient(225deg, rgba(27, 109, 210, 0.7), rgba(255, 99, 71, 0.7));
}

footer{
    display: grid;
    height: var(--footer_height);
    place-items: center;
    color: white;
    font-family: 'Courier New', Courier, monospace;
}


footer p{
    position: relative;
}

footer p span {
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0;
    transition: all 200ms linear;
}

footer:hover span{
    font-size: 1rem;
    padding: 10px;
    outline: 2px solid black;
    background-color: rgb(29, 67, 192);
}

footer p span span{
    display: block;
    font-size: 0px;
    transition: all 200ms linear;
}

footer:hover span > span{
    height: 5px;
    width: 10px;
    transform: translate(-50%, 10px);
    padding: 1px;
    outline: 1px solid black;
    background-color: rgb(159, 49, 45);
}