:root {
    /* # verde = #99DD00
    # laranja = #DE721F
    # rosa = #A91FDE
    # azul = #14C5DE */

    --color-green: #9bdd0027;
    --color-orange: #DE721F;
    --color-pink: #A91FDE;
    --color-blue: #14C5DE;
    --color-black: #333;
}

* {
    background-color: #222;
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}

main {
    padding: 0px;
}

article {
    border-radius: 20px;
    min-width: 300px;
    max-width: 50%;
    margin: 100px auto;
    background-color: var(--color-black);
    animation-name: light-g;
    animation-iteration-count: infinite;
    animation-duration: 4s;
}


@keyframes light-g {
    0% {
        box-shadow: 0px 0px 20px 1px var(--color-green);
    }

    50% {
        box-shadow: 0px 0px 20px 10px var(--color-green);
    }

    100% {
        box-shadow: 0px 0px 20px 1px var(--color-green);
    }
}

article img {
    border-radius: 50%;
}
article img:hover {
        box-shadow: 0px 3px 20px var(--color-pink);
}

article a {
    background-color: var(--color-black);
}




.Fixation {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--color-orange);
    text-align: center;
    font-size: 3em;
    padding: 20px;
    border-radius: 20px 20px 20px 20px ;    
}

.obs {
    background-color: var(--color-black);
    font-size: 1.5em;
    color: var(--color-orange);
    text-align: justify;
    padding: 20px;
    margin: 20px;
    border-radius: 20px;
}

.obs::after {
    position: absolute;

    content: '';

    opacity: 1;

    border-left: 3px solid black;
    height: 1em;

    animation: pisca 1s linear infinite ;
}

.video {
    width: auto;
    padding: 20px;
    background-color: var(--color-black);
    min-width: auto;
    max-width: auto;
    min-height: auto;
}

.video iframe {
    width: 100%;
    background-color: var(--color-black);

    border-radius: 20px;

    animation-name: light-r;
    animation-iteration-count: infinite;
    animation-duration: 3s;
}


@keyframes light-r {
    0% {
        box-shadow: 0px 0px 20px 1px rgba(255, 0, 0, 0.116);
    }

    50% {
        box-shadow: 0px 0px 20px 5px rgba(255, 0, 0, 0.116);
    }

    100% {
        box-shadow: 0px 0px 20px 1px rgba(255, 0, 0, 0.116);
    }
}

@keyframes pisca {
    50% {
        border-left-color: transparent;
    }
}
