/* =========================================================*/
/*                    GLOBAL VARIABLES                      */
/* =========================================================*/

:root {
    --clr-primary-200: #ffffff;
    --clr-primary-300: #cecac5;
    --clr-primary-400: #5e5e5e;
    --clr-primary-900: #343536;
}
/* =========================================================*/
/*                     MAIN PAGE SETUP                      */
/* =========================================================*/
* {
    margin: 0;
    padding: 0;
}
*, 
*::before,
*::after {
    box-sizing: border-box;
}
html {
    font-family: var(--ff-primary);
    font-size: 1rem;
    font-weight: lighter;
    color: var(--clr-primary-400);
    scroll-behavior: smooth;
    overflow-x: hidden;
    /* cursor: url('../cursor-filled.png'), pointer; */
}
body {
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    background-color: var(--clr-primary-200);
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
a {
    text-decoration: none;
}
/* a, button {
    cursor: url('../images/pointer-filled.png'), auto;
} */
button {
    border: none; 
    margin: 20px 0 20px 0;
    padding: 10px;
    border: solid 1px var(--clr-primary-900);
    color: var(--clr-primary-900);
    font: var(--ff-body);
    width: fit-content;
    transition: background-color 0.5s ease, filter 0.2s ease-in-out, transform 0.2s;
    background-color: transparent;
    border-radius: 5px;
}
button:hover {
    color: var(--clr-primary-900);
    background-color: white;
    filter: drop-shadow(-1px 1px 3px var(--clr-primary-300));
    transform: translateY(-4px);
}
.animate__animated.animate__fadeInUp {
    --animate-duration: 2s;
}
/* =========================================================*/
/*                          SECTIONS                        */
/* =========================================================*/
section {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%; 
    padding: 0 10vw;
}

/* =========================================================*/
/*                REVEAL ON SCROLL EFFECT                   */
/* =========================================================*/
.reveal {
    position: relative; 
    transform: translateY(150px);
    opacity: 0;
    transition: all 2s ease;
}
.reveal.active {
    transform: translateY(0px);
    opacity: 1;
}

/* =========================================================*/
/*                        MEDIA QUERIES                     */
/* =========================================================*/

/* Wide Screen */
@media screen and (min-width:1920px) {
    section {
        padding: 0 25rem;
    }
}
/* Tablet */
@media screen and (max-width:820px) {
    section {
        padding: 0 12vw;
    }   
}
/* iPhone */
@media screen and (max-width:480px) {
    section {
        padding: 0 2rem;
    }
}