@keyframes arrow-waving {
    0% {
        -webkit-transform: translate3d(30%, 0, 0);
        -moz-transform: translate3d(30%, 0, 0);
        -o-transform: translate3d(30%, 0, 0);
        transform: translate3d(30%, 0, 0);
    }

    20% {
        -webkit-transform: translate3d(10%, 0, 0);
        -moz-transform: translate3d(10%, 0, 0);
        -o-transform: translate3d(10%, 0, 0);
        transform: translate3d(10%, 0, 0);
    }

    85% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    100% {
        -webkit-transform: translate3d(-15%, 0, 0);
        -moz-transform: translate3d(-15%, 0, 0);
        -o-transform: translate3d(-15%, 0, 0);
        transform: translate3d(-15%, 0, 0);
    }
}

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


body {
    font-size: 62.5%;
    font-family: 'Champgne & Limousines', sans-serif;
    background: var(--primary);

    -webkit-transition: 0.2s ease-out;
    -moz-transition: 0.2s ease-out;
    -o-transition: 0.2s ease-out;
    transition: 0.2s ease-out;
    scroll-behavior: var(--ease-out);

    --primary: #EBEBEB;
    --primary-transparent: rgba(235, 235, 235, 0.749);
    --secondary: #2B3243;
    --secondary-transparent: rgba(44, 51, 68, 0.749);

    --primary-transparent-small: #ebebeb7f;
    --secondary-transparent-small: #2b3243cc;

    --primary-before: #ebebeb33;
    --secondary-before: #2b3243cc;

    --primary-border-color: #ebebeb4c;
    --secondary-border-color: #2b32437f;

    --green: #68B86E;
    --yellow: #d8b535;
    --red: #FF7667;

    --logo-url-day: url('../images/s_day.svg');
    --logo-url-night: url('../images/s_night.svg');

    --background-filter: blur(5px) grayscale(0) opacity(0.25); 

    --ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);
}

body.night {
    --primary: #2B3243;
    --secondary: #EBEBEB;
    --primary-transparent: #2B3243BF;
    --secondary-transparent: #EBEBEBBF;

    --primary-transparent-small: #2b3243cc;
    --secondary-transparent-small: #ebebeb7f;

    --primary-border-color: #2b32437f;
    --secondary-border-color: #ebebeb4C;

    --primary-before: #2b3243cc;
    --secondary-before: #ebebeb33;

    --logo-url-day: url('../images/s_night.svg');
    --logo-url-night: url('../images/s_day.svg');

    --background-filter: blur(5px) grayscale(0.3) opacity(0.3); 
}

body::-webkit-scrollbar {
    width: 8px;
    background: rgba(0, 0, 0, 0.1)
}

body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.4)
}


section {
    width: 100%;
    height: 100vh;

    min-height: 750px;
    position: relative;
}


ul {
    list-style: none;
}

small {
    display: block;
    color: #646464;
}

input, label {
    font-family: 'Champgne & Limousines', sans-serif;
}

a:-webkit-any-link {
    /* color: unset; */
    text-decoration: none;
}

a {
    text-decoration: none;
}

/* ==========================================
    REGRAS
=============================================

-> Sempre que for setar a cor para um objeto que será afetado pelo modo noturno
   use as cores das variáveis, de preferencia use uma das classes predefindas para cor

*/

.container {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 10px
}

.saulo-mira-text {
    font-family: 'Playfair Display', sans-serif;
    display: inline-block;
}

.saulo-mira-text::first-letter {
    font-size: 1.2em;
}

.outlined-small-text {
    color: transparent;
    -webkit-text-stroke-width: 0.4px;
}

.stroke-primary {
    -webkit-text-stroke-color: var(--primary);
}

.stroke-secondary {
    -webkit-text-stroke-color: var(--secondary);
}

.text-primary {
    color: var(--primary);
}

.text-secondary {
    color: var(--secondary);
}

.btn-mira {
    min-width: 240px;
    max-width: 300px;

    font-size: calc(21rem / 16);
    font-family: 'Champgne & Limousines', sans-serif;

    background-color: transparent;
    border: 1px solid;
    outline: none;

    padding: 16px;
    border-radius: 27px;

    cursor: pointer;

    -webkit-transition: cubic-bezier(0, 0.13, 0, 0.98) .4s all;
    -moz-transition: cubic-bezier(0, 0.13, 0, 0.98) .4s all;
    -o-transition: cubic-bezier(0, 0.13, 0, 0.98) .4s all;
    transition: cubic-bezier(0, 0.13, 0, 0.98) .4s all;
}

.btn-mira:hover {
    letter-spacing: 1px;
}

.btn-green {border-color: var(--green); color: var(--green) ;}
.btn-green:hover { -webkit-filter: drop-shadow(0 0 5px var(--green)); filter: drop-shadow(0 0 5px var(--green));}
.btn-yellow {border-color: var(--yellow); color: var(--yellow);}
.btn-yellow:hover { -webkit-filter: drop-shadow(0 0 5px var(--yellow)); filter: drop-shadow(0 0 5px var(--yellow)); }
.btn-red {border-color: var(--red); color: var(--red);}
.btn-red:hover {-webkit-filter: drop-shadow(0 0 5px var(--red)); filter: drop-shadow(0 0 5px var(--red));}



.flex {
    display: flex;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.justify-items-center {
    justify-items: center;
}

.justify-content-center {
    justify-content: center;
}

.justify-space-around {
    justify-content: space-around;
}

.justify-space-between {
    justify-content: space-between;
}

.align-items-center {
    align-items: center;
}

.align-items-end { align-items: flex-end; }
.align-items-start { align-items: flex-start; }

.text-align-center { text-align: center; }
.text-shadow { text-shadow: 5px 4px 48px #000000;}

.grid { display: grid; }


/* ================================================================
    COMPONENTES
=================================================================== */

.foreground {
    width: 100%;
    height: 100%;

    padding: 10% 5px;
    font-size: 4em;
    text-align: center;
    color: #EBEBEB;

    position: absolute;

    background: -webkit-linear-gradient(180deg, #2B3243 0%, rgba(43, 50, 67, 0.58) 51.56%, #2B3243 100%);
    background: -moz-linear-gradient(180deg, #2B3243 0%, rgba(43, 50, 67, 0.58) 51.56%, #2B3243 100%);
    background: -o-linear-gradient(180deg, #2B3243 0%, rgba(43, 50, 67, 0.58) 51.56%, #2B3243 100%);
    background: linear-gradient(180deg, #2B3243 0%, rgba(43, 50, 67, 0.58) 51.56%, #2B3243 100%);

    opacity: 0;
    -webkit-transition: ease-out 0.25s;
    -moz-transition: ease-out 0.25s;
    -o-transition: ease-out 0.25s;
    transition: ease-out 0.25s;

    z-index: 8;

    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;

    cursor: pointer;
}

.foreground.active {
    opacity: 1;
}

.animated:not(.active) .foreground {
    display: none;
}



.slide-section {
    width: -moz-fit-content;
    width: fit-content;
    height: -moz-fit-content;
    height: fit-content;    

    -webkit-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.page {
    width: 100vw;
    height: 100%;
}


.fixed-back-button {
    position: absolute;
    padding-left: 40px;

    width: 10%;
    height: 100vh;

    background: -webkit-linear-gradient(90deg, rgba(120, 120, 120, 0.343) 0%, rgba(120, 120, 120,0.15449929971988796) 15%, rgba(120,120,120,0.04805672268907568) 39%, rgba(0,0,0,0) 100%);
    background: -moz-linear-gradient(90deg, rgba(120, 120, 120, 0.343) 0%, rgba(120, 120, 120,0.15449929971988796) 15%, rgba(120,120,120,0.04805672268907568) 39%, rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(90deg, rgba(120, 120, 120, 0.343) 0%, rgba(120, 120, 120,0.15449929971988796) 15%, rgba(120,120,120,0.04805672268907568) 39%, rgba(0,0,0,0) 100%);
    background: linear-gradient(90deg, rgba(120, 120, 120, 0.343) 0%, rgba(120, 120, 120,0.15449929971988796) 15%, rgba(120,120,120,0.04805672268907568) 39%, rgba(0,0,0,0) 100%);

    display: flex;
    align-items: center;

    opacity: 0.45;

    -webkit-transition: 1.4s var(--ease-out) opacity;
    -moz-transition: 1.4s var(--ease-out) opacity;
    -o-transition: 1.4s var(--ease-out) opacity;
    transition: 1.4s var(--ease-out) opacity;

    z-index: 3;
}

body.night .fixed-back-button {
    background: -webkit-linear-gradient(90deg, rgba(0,0,0,0.459586834733894) 0%, rgba(0,0,0,0.20449929971988796) 15%, rgba(0,0,0,0.04805672268907568) 39%, rgba(0,0,0,0) 100%);
    background: -moz-linear-gradient(90deg, rgba(0,0,0,0.459586834733894) 0%, rgba(0,0,0,0.20449929971988796) 15%, rgba(0,0,0,0.04805672268907568) 39%, rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(90deg, rgba(0,0,0,0.459586834733894) 0%, rgba(0,0,0,0.20449929971988796) 15%, rgba(0,0,0,0.04805672268907568) 39%, rgba(0,0,0,0) 100%);
    background: linear-gradient(90deg, rgba(0,0,0,0.459586834733894) 0%, rgba(0,0,0,0.20449929971988796) 15%, rgba(0,0,0,0.04805672268907568) 39%, rgba(0,0,0,0) 100%);
}

body:not(.slided) .fixed-back-button {
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;

    opacity: 0;
}

.fixed-back-button:hover {
    opacity: 1;
    cursor: pointer;
}

.fixed-back-button .back {
    width: 30%;
    min-width: 30px;
    height: -moz-fit-content;
    height: fit-content;

    background: none;
    border: none;

    -webkit-transform: rotate(180deg);
    -moz-transform:rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.fixed-back-button .back:hover {
    cursor: pointer;
}

.fixed-back-button .back:focus {
    outline: none;
}

.fixed-back-button.right .back {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
}

.fixed-back-button .back svg {
    width: 100%;
    height: auto;
}

.fixed-back-button:hover .back svg {
    -webkit-animation: arrow-waving 1s var(--ease-out) infinite;
    -moz-animation: arrow-waving 1s var(--ease-out) infinite;
    -o-animation: arrow-waving 1s var(--ease-out) infinite;
    animation: arrow-waving 1s var(--ease-out) infinite;
}

span.animation-wrapper {
    display: block;
}



@media only screen and (max-width: 1130px){
    section#title .fade-out,
    section {
        height: 120vh;
        min-height: 950px;
    }

    .foreground {
        font-size: 3.2em;
    }

    .text-shadow { text-shadow: 1px 1px 20px rgba(0, 0, 0, 0.8);}
}

@media only screen and (max-width: 700px){
    .foreground {
        font-size: 2.8em;
    }
}

@media only screen and (max-width: 600px){
    .fixed-back-button {
        position: absolute;
        padding-left: 15px;
    }
}