:root{
    --cl-pink: #ff00b4;
    --cl-blue: #00ffbc;
    --cl-blue-light:#8ea5ff;
    --cl-purple: #c493ff;
    --cl-black: #221e1e;
    --cl-footer: #221e1e7e;
    --cl-white: #fcfcfc;
    --cl-off: #C0C0C0;
    --ltr-sm: 1rem;
    --ltr-sm2: 1.25rem;
    --ltr-md: 1.5rem;
    --ltr-md2: 1.75rem;
    --ltr-bg: 2rem;
    --ltr-bg2: 2.25rem;
    --ltr-section-title: 3.75rem;
    --ltr-welcome: 6rem;
    --ltr-subwelcome: .7rem;
    --sz-sm: 1em;
    --sz-md: 1.5em;
    --sz-bg: 2em;
}

body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(--cl-black);
    color: var(--cl-white);
    font-size: 62.5%;
}

.landing_page{
    position: absolute;
    width: 100%;
    height: 100vh;
    z-index: 100000;
    background-color: black;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 5s;
    visibility: visible;
}

.landing_text{
    font-size: var(--ltr-welcome);
    font-family: 'Rubik Glitch', cursive;
    font-weight: normal;
}

/* Listas */

.list{
    list-style: none;
    margin: 0;
    padding: 0;
}

.list__item{
    font-size: var(--ltr-md2);
}

.list__item a{
    text-decoration: none;
    color: var(--cl-off);
}

/* Title */

.title{
    font-size: var(--ltr-welcome);
    color: var(--cl-white)
}

.subtitle{
    font-size: var(--ltr-subwelcome)
}

/* General view */

.section{
    display: flex;
    justify-content:center;
    align-items:center;
    height: 100vh;
    width: 100%;
    position: absolute;
    transition: 5s;
}

/* Butons */

.navegation{
    position: absolute;
    display: flex;
    color: var(--cl-off);
    font-size: var(--ltr-sm2);
    align-items: center;
    cursor: pointer;
    z-index: 1000;
}

.navegation:hover > .fa-solid,
.navegation:hover > .navegation__option{
    color: var(--cl-white);
    animation: neonBlueLight 2s infinite alternate-reverse steps(2);
}

.navegation--left{
    left: var(--sz-md);
}

.navegation--right{
    right: var(--sz-md);
    flex-direction: row-reverse;
}

.navegation--up{
    top: 5em;;
    flex-direction: column;
}

.navegation--bottom{
    bottom: var(--sz-md);
    flex-direction: column-reverse;
}

.navegation__option{
    margin: .2em;
}

/* Cards */

.cards{
    display: flex;
    justify-content: space-evenly;
    align-items: stretch;
    margin: 1rem 2rem 0;
    list-style: none;
}

.card{
    max-width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: var(--sz-sm);
    border: .1rem solid;
    border-radius: .6rem;
    animation: boxBlueNeon 2s infinite alternate-reverse steps(5);
}

.card__title{
    font-size: var(--ltr-sm2);
    text-align: center;
    margin-top: 0;
    margin-bottom: .3rem;
    font-family: 'Baloo Thambi 2', cursive;
    animation: letterBlueNeon 2s infinite alternate-reverse steps(5);
}

.card__item{
    width: 10%;
}

.card__icon{
    text-align: center;
    font-size: var(--ltr-bg);
    margin: 0;
}

.card__subtitle{
    font-size: var(--ltr-sm2);
    font-family: 'Baloo Thambi 2', cursive;
    margin: 0;
}

.card__text{
    font-size: var(--ltr-sm);
    margin: 0;
}