@import url('https://fonts.googleapis.com/css2?family=Sometype+Mono:ital@0;1&display=swap');

* {
    margin     : 0;
    padding    : 0;
    font-family: "Sometype Mono", monospace;
    color      : var(--color);
}

*::-webkit-scrollbar {
    display: none;
}

:root {
    --color: #FFFFFF;

    --bg-1           : #001c5c;
    --bg-decoration-1: #0d1833;
    --bg-decoration-2: #FFFFFF;
    --bg-decoration-3: #FF0000;
    --bg-decoration-4: #FF6900;
    --bg-tab         : #000B26;
    --bg-tab-selected: linear-gradient(var(--bg-tab) 40%, #212A41 130%);

    --height           : 93vh;
    --height-decoration: 1em;
    --width-decoration : 20em;

    --u: #FF3C3C;
}

h2 {
    font-size  : 17px;
    font-weight: 500;
}

h3 {
    font-weight: 100;
}

u {
    color: var(--u);
}

/* ------ ------- ------ ------- ------ ------ --------- */


/* ------ ------- ------ ------- ------ ------ --------- */

body {
    background    : var(--bg-1);
    height        : 100vh;
    display       : flex;
    flex-direction: column;
    overflow      : hidden;
}

.view {
    display: flex;
    width  : fit-content;
    height : 100vh;
    width  : 100vw;
}

.intro {
    width          : 100vw;
    height         : var(--height);
    display        : flex;
    justify-content: center;
    align-items    : center;
}

.intro-inactive {
    display: none;

}

.intro__img {
    animation      : intro__img 4s linear infinite;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.intro__line {
    height       : 14em;
    width        : 5px;
    opacity      : 0;
    background   : var(--bg-decoration-4);
    border-radius: 20px;
    margin       : 0 20px;
    position     : relative;
    animation    : intro__line 1.8s forwards normal .2s;
}

.intro__title-1 {
    background-color: var(--bg-1);
    overflow        : hidden;
}

.intro__title-1 .title-1 {
    animation: intro__title-1 1s forwards 1.5s;
    transform: translateX(-101%)
}

@keyframes intro__title-1 {
    0% {}

    100% {
        transform: translateX(0)
    }
}

.intro__title-2 {
    overflow: hidden;
}

.intro__title-2 .title-3 {
    animation: intro__title-2 .5s forwards 2.4s;
    transform: translateY(-100%)
}

@keyframes intro__title-2 {
    0% {}

    100% {
        transform: translateY(0)
    }
}

.tab-list {
    height         : 100%;
    width          : 98vw;
    display        : flex;
    justify-content: center;
    align-items    : end;
    margin         : auto;
    z-index        : 10000;
}

.tab {
    width          : 100%;
    height         : 100%;
    background     : var(--bg-tab);
    border-radius  : 25px 25px 0 0;
    display        : flex;
    align-items    : center;
    justify-content: center;
    z-index        : 100;
    cursor         : pointer;
    transition     : .3s;
}

.tab h2 {
    height         : 100%;
    width          : 100%;
    background     : var(--bg-tab);
    border-radius  : 25px 25px 0 0;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.tab-selected {
    height       : 120%;
    background   : var(--bg-tab-selected);
    border-bottom: solid 3px var(--bg-decoration-4);

    h2 {
        background: none;
    }
}

/*? ---- ---- ---- ---- - ---- ---- ---- ----*/
/*? ---- ---- ---- Decorations ---- ---- ----*/
/*? ---- ---- ---- ---- - ---- ---- ---- ----*/


.intro__decoration-1 {
    position     : absolute;
    height       : var(--height-decoration);
    width        : var(--width-decoration);
    border-radius: 6px;
}

.decoration--blue-top {
    width     : calc(var(--width-decoration) + 10em);
    top       : 8%;
    left      : -100%;
    background: var(--bg-decoration-1);
    z-index   : -3;
    animation : decoration--blue-top 2.5s forwards .3s ease;
}

.decoration--white-top {
    width     : calc(var(--width-decoration) + 5em);
    top       : 10%;
    left      : -100%;
    background: var(--bg-decoration-2);
    z-index   : -2;
    animation : decoration--white-top 3.5s forwards .2s;
}

.decoration--red-top {
    top       : 12%;
    left      : -100%;
    background: var(--bg-decoration-3);
    z-index   : -1;
    animation : decoration--red-top 2.5s forwards .2s ease;
}

.decoration--blue-bottom {
    width     : calc(var(--width-decoration) + 10em);
    bottom    : 16%;
    right     : -100%;
    background: var(--bg-decoration-1);
    z-index   : -3;
    animation : decoration--blue-bottom 2.5s forwards .3s ease;
}

.decoration--white-bottom {
    width     : calc(var(--width-decoration) + 5em);
    bottom    : 18%;
    right     : -100%;
    background: var(--bg-decoration-2);
    z-index   : -2;
    animation : decoration--white-bottom 3.5s forwards .2s;
}

.decoration--red-bottom {
    bottom    : 20%;
    right     : -100%;
    background: var(--bg-decoration-3);
    z-index   : -1;
    animation : decoration--red-bottom 2.5s forwards .3s ease;
}


.intro__decoration-2 {
    position     : absolute;
    border-radius: 6px;
    height       : 22em;
    width        : .8em;
}

.decoration--left-1 {
    bottom    : -100%;
    left      : 4%;
    background: var(--bg-decoration-1);
    animation : decoration--left-1 2.5s forwards .8s ease;
}

.decoration--left-2 {
    bottom    : -100%;
    left      : 6%;
    background: var(--bg-decoration-1);
    animation : decoration--left-2 2.5s forwards 1s ease;
}

.decoration--right-1 {
    top       : -100%;
    right     : 4%;
    background: var(--bg-decoration-1);
    animation : decoration--right-1 2.5s forwards .8s ease;
}

.decoration--right-2 {
    top       : -100%;
    right     : 6%;
    background: var(--bg-decoration-1);
    animation : decoration--right-2 2.5s forwards 1s ease;
}

/*! ---- ---- ---- ---- ---- ---- ---- ---- */
/*! --- ---- ---- Animations ---- ---- ---- */
/*! ---- ---- ---- ---- ---- ---- ---- ---- */
/** --- --- --- Intro --- --- --- */
@keyframes intro__line {
    0% {
        opacity : 1;
        position: relative;
        bottom  : -100%;
        height  : 1px;
        width   : 5px;
    }

    50% {
        opacity: 1;

        bottom   : 0;
        height   : 50px;
        transform: rotate(720deg);
    }

    100% {
        opacity  : 1;
        height   : 14em;
        width    : 5px;
        transform: rotate(720deg);
    }
}


@keyframes intro__img {
    0% {}

    100% {
        rotate: 360deg;
    }
}

/** --- --- --- Decorations --- --- --- */
/* Top */
@keyframes decoration--blue-top {
    0% {}

    100% {
        left: 15%;
    }
}

@keyframes decoration--white-top {
    0% {}

    100% {
        left: 10%;
    }
}

@keyframes decoration--red-top {
    0% {}

    100% {
        left: 5%;
    }
}

/* Bottom */
@keyframes decoration--blue-bottom {
    0% {}

    100% {
        right: 15%;
    }
}

@keyframes decoration--white-bottom {
    0% {}

    100% {
        right: 10%;
    }
}

@keyframes decoration--red-bottom {
    0% {}

    100% {
        right: 5%;
    }
}

/* Left */
@keyframes decoration--left-1 {
    0% {}

    100% {
        bottom: 24%;
    }
}

@keyframes decoration--left-2 {
    0% {}

    100% {
        bottom: 18%;
    }
}

/* Right */
@keyframes decoration--right-1 {
    0% {}

    100% {
        top: 10%;
    }
}

@keyframes decoration--right-2 {
    0% {}

    100% {
        top: 15%;
    }
}

/* --- --- --- tabs --- --- --- */

/* ! --- --- --- --- --- --- */
/* ! --- --- outside --- --- */
/* ! --- --- --- --- --- --- */

.view-intro {
    left: 0;
}

.view-about {
    animation: intro 2s forwards;
}

@keyframes about {
    0% {}

    100% {
        transform: translateX(-100%);
    }
}

.view-skills {
    animation: skills 2s forwards;
}

@keyframes skills {
    0% {}

    100% {
        transform: translateX(-44%);
    }
}

.view-projects {
    animation: projects 2s forwards;
}

@keyframes projects {
    0% {}

    100% {
        transform: translateX(-66%);
    }
}

/* ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- */
/* ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- */
/* ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- */
/* ! --- ! --- ! --- ! --- ! --- ! --- ! --- About ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- */
/* ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- */
/* ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- */
/* ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- */
/* ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- */

.about {
    height         : var(--height);
    width          : 100vw;
    display        : none;
    flex-direction : column;
    justify-content: center;
    align-items    : center;
}


.about__title-1 {
    width     : 50em;
    box-shadow: 0 -19em 0 20em var(--bg-1);
    margin-top: -4em;
}

.about__title-1 .title-1 {
    animation : title-1 2s forwards step-start;
    background: var(--bg-1);
}

@keyframes title-1 {
    0% {
        color: var(--bg-1);
    }

    30% {
        color: var(--bg-1);
    }

    50% {
        color: var(--color);
    }
}

.about__line {
    width        : 5em;
    height       : 0px;
    border-radius: 50px;
    border       : var(--bg-decoration-4) solid 2px;
    animation    : about__line 1.5s forwards;
    position     : relative;
    top          : -3em;
    z-index      : 10;
    box-shadow   : 0 1.8em 0 1.5em var(--bg-1);
    margin-top   : 1em;
}

@keyframes about__line {
    0% {}

    40% {
        width     : 60em;
        top       : -3em;
        box-shadow: 0 1.8em 0 1.5em var(--bg-1);
    }

    100% {
        width     : 60em;
        top       : 0;
        box-shadow: 0 -.2em 0 0 var(--bg-1);
    }
}

.about__text {
    line-height: 200%;
    width      : 55em;
    z-index    : -100;
}

.about__text-container {
    width    : 100%;
    height   : 100%;
    overflow : hidden;
    animation: about__text-container .8s forwards 1s;
    transform: translateY(-101%);
}

@keyframes about__text-container {
    00% {}

    100% {
        transform: translateY(8%);
    }
}

.paragraph {
    display    : flex;
    align-items: center;
    gap        : 3em;
}

/*? ---- ---- ---- ---- - ---- ---- ---- ----*/
/*? ---- ---- ---- Decorations ---- ---- ----*/
/*? ---- ---- ---- ---- - ---- ---- ---- ----*/
.about__decoration {
    position: absolute;
}

.ex__decoration {
    transform: translate(-30em, -30em);
    animation: ex__decoration 3s forwards;
}

.rectangule__decoration-red {
    transform: translate(100em, -15em);
    animation: rectangule__decoration-red 3s forwards;
}

.rectangule__decoration-white {
    transform: translate(-65em, 15.5em);
    animation: rectangule__decoration-white 3s forwards;
}

/*! ---- ---- ---- ---- ---- ---- ---- ---- */
/*! --- ---- ---- Animations ---- ---- ---- */
/*! ---- ---- ---- ---- ---- ---- ---- ---- */


/** Decorations */
@keyframes ex__decoration {
    0% {}

    100% {
        transform: translate(-36em, -13em) rotate(720deg)
    }
}

@keyframes rectangule__decoration-red {
    0% {}

    100% {
        transform: translate(27em, -15em);

    }
}

@keyframes rectangule__decoration-white {
    0% {}

    100% {
        transform: translate(-25em, 15.5em);
    }
}

/* ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! ---  ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- */
/* ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! ---  ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- */
/* ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! ---  ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- */
/* ! --- ! --- ! --- ! --- ! --- ! --- ! --- Skills ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- */
/* ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! ---  ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- */
/* ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! ---  ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- */
/* ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! ---  ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- */
/* ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! ---  ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- */

.skills {
    width          : 100vw;
    flex-direction : column;
    justify-content: center;
    align-items    : center;
    display        : none;
    gap            : 3em;
}

.skills__title-1--container {
    display: flex;
    width  : fit-content;
}

.skills__title-1 {
    height     : fit-content;
    display    : flex;
    overflow   : hidden;
    white-space: nowrap;
    animation  : type 1.8s steps(30, end) forwards;
}

@keyframes type {
    0% {
        width: 0;
    }

    100% {
        width: 34.5em;
    }
}

.title-line {
    height       : 2.5em;
    width        : .25em;
    border-radius: 25em;
    animation    : title-line 1s infinite step-end;
}

@keyframes title-line {
    0% {
        background: white;
    }

    50% {
        background: #ffffff00;
    }
}

.skills__block {
    width          : 60em;
    display        : flex;
    justify-content: center;
    gap            : 20%;
}

.block {
    width         : fit-content;
    display       : flex;
    flex-direction: column;
    align-items   : end;
    row-gap       : 2em;
}

.skills__paragraph {
    height   : 0;
    display  : grid;
    gap      : 2%;
    animation: skills__paragraph 1s forwards;
}

@keyframes skills__paragraph {
    0% {}

    100% {
        height: 6.5em
    }
}

.block-1 {
    grid-template-columns: 80% 2% auto;
    align-items          : center;
}

.block-1__title,
.block-2__title {
    height     : 100%;
    width      : 100%;
    overflow   : hidden;
    display    : flex;
    align-items: center;
}

h3 {
    transform: translateX(102%);
    z-index  : 100;
    animation: h3-left 1s forwards 0.7s;
    z-index  : 800;
}

@keyframes h3-left {
    0% {}

    100% {
        transform: translateX(0%)
    }
}

.block-1__icon {
    overflow: hidden;
    width   : fit-content;
}

i {
    transform: translateX(-160%);
    animation: i-left .5s forwards 1.5s;
    font-size: 300%;
}

@keyframes i-left {
    0% {}

    100% {
        transform: translateX(0);
    }
}

/* block 2 */

.block-2 {
    text-align           : start;
    grid-template-columns: 16% 2% 80%;
    align-items          : center;

    h3 {
        transform       : translateX(-101%);
        z-index         : 800;
        animation       : h3-right 1s forwards 0.7s;
        background-color: var(--bg-1);
    }

    i {
        transform: translateX(140%);
        animation: i-right .5s forwards 1.5s;
    }
}

@keyframes h3-right {
    0% {}

    100% {
        transform: translateX(0%);
    }
}

@keyframes i-right {
    0% {}

    100% {
        transform: translateX(0);
    }
}

.block-1,
.block-1 .title-3 {
    text-align: end;
}

.skills__line {
    width        : 5px;
    height       : 100%;
    background   : var(--bg-decoration-4);
    border-radius: 25px;
    z-index      : 1000;
}

.skills__paragraph>i {
    margin : auto;
    z-index: 400;
}

.fa-pen-ruler,
.fa-satellite-dish {
    color: var(--u);
}

.fa-black-tie,
.fa-code {
    color: var(--bg-tab);
}

/* ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! ------ ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- */
/* ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! ------ ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- */
/* ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! ------ ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- */
/* ! --- ! --- ! --- ! --- ! --- ! --- ! --- Projects ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- */
/* ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! ------ ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- */
/* ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! ------ ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- */
/* ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! ------ ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- */
/* ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! ------ ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- ! --- */

.projects {
    width          : 100vw;
    justify-content: center;
    align-items    : center;
    display        : none;
}

.slider-wrapper {
    width          : 50em;
    height         : 30em;
    margin-right   : 20em;
    background     : var(--bg-decoration-1);
    display        : flex;
    align-items    : end;
    justify-content: center;
    gap            : 1em;
    transition     : .3s ease-in-out;
    border-radius  : 25px;
    border         : var(--bg-decoration-4) solid 4px;
    z-index        : 1000;
}

.slider-wrapper input {
    visibility: hidden;
    display   : none;
}

.slider-wrapper__buttons {
    display        : flex;
    justify-content: center;
    position       : absolute;
    gap            : 10px;
    margin-bottom  : 20px;
    border-radius  : 15px;
    padding        : 10px;
    background     : #00000050;
    box-shadow     : #0009 0 0 12px 6px;
    z-index        : 300;
}

.slider-wrapper__buttons label {
    width        : 20px;
    height       : 20px;
    background   : var(--bg-decoration-2);
    border-radius: 8px;
    opacity      : 0.5;
    cursor       : pointer;
    z-index      : 100;
    transition   : .2s ease-in-out;
}

.slider-wrapper__buttons label:hover {
    scale  : 1.2;
    opacity: 1;
}

.slider-wrapper input:nth-child(1):checked~.slider-wrapper__content .slider-wrapper__buttons label:nth-child(1),
.slider-wrapper input:nth-child(2):checked~.slider-wrapper__content .slider-wrapper__buttons label:nth-child(2),
.slider-wrapper input:nth-child(3):checked~.slider-wrapper__content .slider-wrapper__buttons label:nth-child(3),
.slider-wrapper input:nth-child(4):checked~.slider-wrapper__content .slider-wrapper__buttons label:nth-child(4) {
    opacity      : 1;
    scroll-margin: 1.2;
    width        : 40px;
}

.slider-wrapper__content {
    display        : flex;
    justify-content: center;
    align-items    : end;
    width          : 50em;
    height         : 100%;
    border-radius  : 25px;
}

.slide {
    width            : 0%;
    height           : 0%;
    background-size  : cover;
    background-repeat: no-repeat;
    z-index          : 200;
}

.slide img {
    width        : 100%;
    height       : 100%;
    border-radius: 25px;
}

.slider-wrapper input:nth-child(1):checked~.slider-wrapper__content div:nth-child(1),
.slider-wrapper input:nth-child(2):checked~.slider-wrapper__content div:nth-child(2),
.slider-wrapper input:nth-child(3):checked~.slider-wrapper__content div:nth-child(3),
.slider-wrapper input:nth-child(4):checked~.slider-wrapper__content div:nth-child(4) {
    width     : 100%;
    height    : 100%;
    transition: .2s ease;
}

.projects__info {
    width    : 25%;
    height   : 15em;
    position : absolute;
    top      : 16em;
    left     : 36em;
    z-index  : 1;
    animation: projects__info .5s forwards;
}

@keyframes projects__info {
    0% {}

    100% {
        left: 58em;
    }
}

.projects__info-card {
    width        : 100%;
    height       : 100%;
    background   : var(--bg-decoration-1);
    border-radius: 0 25px 25px 0;
    z-index      : 10000;
}

.projects__info-card {
    display: none;
    z-index: 100;
    padding: 0 1em 1em;
}

.projects__info-card div {
    z-index  : 1;
    position : relative;
    left     : -100%;
    animation: projects__info-card .5s ease-in-out forwards;
}

@keyframes projects__info-card {
    0% {}

    100% {
        left: 0;
    }
}

.slider-wrapper input:nth-child(1):checked~.projects__info div:nth-child(1),
.slider-wrapper input:nth-child(2):checked~.projects__info div:nth-child(2),
.slider-wrapper input:nth-child(3):checked~.projects__info div:nth-child(3),
.slider-wrapper input:nth-child(4):checked~.projects__info div:nth-child(4) {
    display       : flex;
    flex-direction: column;
    overflow      : hidden;
}

.contact {
    width          : 100vw;
    justify-content: center;
    align-items    : center;
    gap            : 5rem;
    display        : none;
}

.contact__form {
    width                : 35rem;
    margin-bottom        : 5rem;
    display              : grid;
    column-gap           : 1rem;
    row-gap              : 8%;
    grid-template-columns: 1fr 1fr;
}

.contact__form>.title-1 {
    grid-column: 1/3;
    text-align : center;
    background : none;
}

.form-input {
    background   : var(--bg-decoration-1);
    border       : solid var(--bg-decoration-4);
    border-radius: 55px;
    resize       : none;
    height       : 3rem;
    padding      : 0 0 0 1rem;
    font-size    : 1rem;

}

.form-input--message {
    grid-column  : 1/3;
    height       : 7rem;
    border-radius: 1.5rem;
    padding-top  : 1rem;
}

.form-btn {
    background   : var(--bg-decoration-4);
    border       : solid var(--bg-decoration-4);
    border-radius: 55px;
    resize       : none;
    height       : 3.5rem;
    margin-bottom: 1rem;
    padding      : 0 0 0 1rem;
    font-size    : 1rem;

    transform: translateX(50%);

    .title-1 {
        background: none;
    }
}

.form-nav {
    grid-column    : 1/3;
    display        : flex;
    justify-content: space-around;
}

.fab {
    font-size      : 3.6rem;
    margin         : 0;
    padding        : 0;
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: space-between;
    gap            : .5rem;
}

.fa-facebook {
    color: var(--bg-decoration-1)
}

.fa-instagram {
    color: var(--u)
}

.fa-whatsapp {
    color: #47ff56
}

.fab-line {
    width        : 120%;
    height       : 5px;
    border-radius: 10px;
    background   : var(--bg-decoration-4);
}

.contact__conclusion {
    width        : 32rem;
    height       : 10rem;
    height       : fit-content;
    padding      : 2rem 1rem;
    border-radius: 25px;
    background   : var(--bg-decoration-1);
}

.contact__conclusion .title-1 {
    background: var(--bg-decoration-1);
}

/* ! --- --- --- --- --- Always let it at the bottom --- --- --- --- --- --- */
.active {
    display: flex;
    width  : 100vw;
    height : var(--height);
}