@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

:root {
    --black: #09090B;
    --red: #FF1F22;
    --orange: #ff5e24;
}
* {
    font-family: "Oswald", sans-serif;
}
body {
    background-color: var(--black);
    overflow-x: hidden;
}

#inicio {
    background-image: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.95)), url("../images/academia.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.text-degrade {
    background: linear-gradient(90deg, var(--red), var(--orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#brilho {
    width: 300px;
    height: 300px;
    background: #FF5E24;
    background: radial-gradient(circle,rgba(255, 94, 36, 1) 1%, rgba(255, 31, 34, 1) 8%, rgba(255, 255, 255, 0) 70%);
    position: absolute;
    right: -15%;
    top: -20%;
    scale: 3;
    animation: infinite ease-in-out change-scale 5s;
}

@keyframes change-scale {
    50% {
        scale: 3.5;
    }
    100%{ 
        scale: 3;
    }
}

@media (max-width: 768px) {
    #brilho {
        width: 200px;
        height: 200px;
    }
    #sec2-livro {
        min-height: 70vh;
    }
}
#sec2-livro {
    position: relative;
}
.livro {
    width: 341px;
    height: 512px;
    background-image: url("../images/livro.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1002;

    animation: livro-anim ease-in-out infinite 3s;
    position: absolute;
}
#sombralivro {
    height: 450px;
    width: 360px;
    background-image: url("../images/sombra.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    position: absolute;
    z-index: 1001;
    margin-top: 40px;
    opacity: 70%;
    animation: sombra-anim ease-in-out infinite 3s;
}

@keyframes livro-anim {
    50% {
        margin-bottom: 50px;
    }
    100% {
        margin-bottom: 0px;
    }
}
@keyframes sombra-anim {
    50% {
        opacity: 30%;
    }
    100% {
        opacity: 70%;
    }
}