/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600&display=swap');

/* Variables */
:root {
        --clr-red: hsl(0, 36%, 70%);
        --clr-red-soft: hsl(0, 93%, 68%);
        --clr-red-dark: hsl(0, 6%, 24%);
        --clr-red-grayish: #d9cacd;
        --gr-red-light: 135deg, hsl(0, 0%, 100%) 0%, hsl(0, 100%, 98%) 100%;
        --gr-red-dark: 135deg, hsl(0, 80%, 86%) 0%, hsl(0, 74%, 74%) 100%;
}

/* Global styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Josefin Sans', sans-serif;
    min-height: 100vh;
    background: url('../assets/img/bg-pattern-desktop.svg'), linear-gradient(var(--gr-red-light));
    background-repeat: no-repeat;
}

/* Utilities */
.container {
    max-width: 1400px;
}

@keyframes invalid {
    0% {
        transform: translateY(-50%) scale(0);
    }

    100% {
        transform: translateY(-50%) scale(1);
    }
}

@keyframes headingSlide {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }

    100% {
        opacity: 1;
        transform: translate(0);
    }
}

@keyframes opacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Global media queries */
@media (max-width: 900px) {
    body {
        position: relative;
        padding: 40px 0 100px 0;
    }
}