@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none;
    outline: none;
    font-family: 'Poppins', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

:root {
    --orange: #f1be83;
    --red: #d47077;
    --blue: #668fe1;
    --dark-blue: #11253d;
    --teal: #4e9096;
    --black: #11253d;
    --brownish-black: #472020;
    --grey: #586471;
    --light-grey: #84919e;
    --lighter-grey: #d5e0ec;
    --creamy-white: #fef8ec;
    --form-input-bg: #efe6d6;
    font-size: 62.5%;
}

.page {
    width: 100vw;
    height: 100vh;
    background-color: var(--creamy-white);
    overflow: auto;
    position: relative;
    padding-bottom: 100px;
}

.modalPage {
    background-color: var(--creamy-white);
    z-index: 2;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    opacity: 0;
    position: relative;
    animation: fadeUp 0.3s forwards; 
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(10vh);
    } 100% {
        opacity: 1;
        transform: translateY(0vh);
    }
}