/****************************************************************************/
/****************************************************************************/
/*SETUP**********************************************************************/
/****************************************************************************/
/****************************************************************************/

html,
body {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    font-size: 22px; /* 2.8svh */
    line-height: 1.3;
    overflow-x: hidden;
    overflow-y: scroll;
}

* {
    box-sizing: border-box;
    transition: 0.2s ease-out;
}

body {
    width: 100svw;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--color1);
    color: var(--white)
}

:root {
    /*Sizes*/
    --width: 50rem;
    /*Colors*/
    --color1: #FF8450;
    --color2: #FFECDA;
    --white: #FFFFFF;
}

/************/
/*TEXT STYLES*/
/************/

h1,
h2,
h3,
h4,
h5,
h6,
p,
span {
    padding: 0;
    margin: 0;
}

h1 {
    font-family: 'Nunito', sans-serif;
    font-size: 2.5rem;
    font-weight: 200;
    leading-trim: both;
    text-edge: cap;
    font-style: normal;
}

h2 {
    font-family: 'Nunito', sans-serif;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 200;
}

h3 {
    font-family: 'Nunito', sans-serif;
    font-size: 1.5rem;
    font-weight: 200;
    leading-trim: both;
    text-edge: cap;
}

h4 {
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    font-weight: 200;
    leading-trim: both;
    text-edge: cap;
}

p {
    font-family: 'Nunito', sans-serif;
    /*line-height: 1.5rem;*/
    font-size: 1rem;
    font-weight: 200;
    leading-trim: both;
    text-edge: cap;
}

small {
    font-family: 'Nunito', sans-serif;
    font-size: 0.75rem;
    font-weight: 200;
}

a {
    color: var(--white);
}

a:hover {
    cursor: pointer;
}

/*************/
/*TEXT COLORS*/
/*************/

.color1 {
    color: var(--color1)
}

.color2 {
    color: var(--color2)
}

.white {
    color: var(--white)
}

/************/
/*ANIMATIONS*/
/************/

.animateOnScreen {
    opacity: 0;
    animation: reveilBottomUp 1s ease-out 0s forwards;
    animation-play-state: paused;
}

@keyframes reveilBottomUp {
    from {
        transform: translateY(3rem);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideRightLeft {
    from {
        transform: translateX(3rem);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideLeftRight {
    from {
        transform: translateX(-3rem);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes jump {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-0.5rem);
    }

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