@charset 'utf-8';

*
{
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    font-size: 1em;
    box-sizing: border-box;
}

:root
{
    --cor-um: 95, 158, 160;
    --cor-um-escuro: 57, 94, 96;
    --cor-dois: 255, 221, 102;
    --cor-tres: 238, 238, 238;
}

html
{
    width: 100%;
    height: 100%;
    font-size: 20px;
}

body
{
    width: 100%;
    min-height: 100%;
    background-color: #EEE;
}

header
{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100px;
    border-bottom: 0.25rem solid rgb(var(--cor-dois));
    background-color: rgb(var(--cor-um));
    color: white;
    text-transform: lowercase;
    font-size: 5em;
}

.logoThulum
{
    padding-right: 0.05em;
    font-size: 60px;
    white-space: nowrap;
    letter-spacing: -0.1em;
    line-height: 0.85;
    overflow: hidden;
}

.logoThulum span
{
    position: relative;
    z-index: 1;
}

.logoThulum #ponto
{
    position: relative;
    display: inline-flex;
    justify-content: center;
    margin: auto -0.05em auto 0.025em;
    color: rgb(var(--cor-dois));
    z-index: 0;
    animation: piscante 1500ms ease-in infinite alternate;
}

.logoThulum #ponto::after
{
    content: "";
    position: absolute;
    bottom: 0;
    width: 0.4em;
    height: 0.4em;
    border-radius: 50%;
    background-color: currentColor;
    z-index: 0;
}

@keyframes piscante
{
    0%
    {
        opacity: 1;
    }
    100%
    {
        opacity: 0;
    }
}

@media (max-width: 600px) and (min-width: 400px)
{
    header
    {
        font-size: 3em;
    }
}

@media (max-width: 399px)
{
    header
    {
        height: 25vh;
        font-size: 2.5em;
    }
}