@layer fonts {
    /* inter-regular - latin */
    @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('./assets/fonts/inter-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* inter-600 - latin */
    @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    src: url('./assets/fonts/inter-v19-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* inter-700 - latin */
    @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: url('./assets/fonts/inter-v19-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }
}

@layer colors {
    :root {
        /* Color palette */
        --color-white: hsl(0, 0%, 100%);
        --color-green: hsl(75, 94%, 57%);
        --color-grey-700: hsl(0, 0%, 20%);
        --color-grey-800: hsl(0, 0%, 12%);
        --color-grey-900: hsl(0, 0%, 8%);
        /* Layout colors */
        --layout-backgroundcolor: var(--color-grey-900);
        --layout-cardcolor: var(--color-grey-800);
        --layout-cardbuttoncolor: var(--color-grey-700);
        /* Font colors */
        --font-h1color: var(--color-white);
        --font-h2color: var(--color-green);
        --font-pcolor: var(--color-white);
        --font-anchorcolor: var(--color-white);
    }
}

@layer typography {
    body {
        font-family: 'Inter', sans-serif;
        font-size: 16px;
        line-height: 1.5;
        color: var(--font-pcolor);
    }

    h1 {
        color: var(--font-h1color);
        font-size: 24px;
        font-weight: 600;
        margin: 1rem 1rem 0 1rem;

        @media (width <= 400px) {
            font-size: 20px;
        }
    }

    h2 {
        color: var(--font-h2color);
        font-size: 13px;
        font-weight: 600;
        margin: 0.2rem 1rem 0 1rem;

        @media (width <= 400px) {
            font-size: 10px;
        }
    }

    p {
        color: var(--font-pcolor);
        font-size: 13px;
        margin: 1.5rem 1rem 0 1rem;

        @media (width <= 400px) {
            font-size: 10px;
        }
    }

    a {
        color: var(--font-anchorcolor);
        text-decoration: none;
        font-size: 14px;
        font-weight: 700;
        margin: 0.5rem 1rem;

        @media (width <= 400px) {
            font-size: 12px;
        }
    }
}

@layer layout {

    *, *::before, *::after {
        box-sizing: border-box;
    }

    body {
        background-color: var(--layout-backgroundcolor);
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 97vh;
    }

    main {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: calc(100 / 16 * 1rem); /* 100px */
        width: 100%;
        height: 100%;

        @media (width <= 400px) {
            padding: calc(50 / 16 * 1rem); /* 50px */; 
        }
    }

    section.card {
        height: 560px;

        @media (width <= 768px) {
            height: calc(550 / 16 * 1rem); /* 550px */; 
        }

        @media (width <= 400px) {
            width:  calc(250 / 16 * 1rem); /* 250px */; 
            height:  calc(405 / 16 * 1rem); /* 405px */; 
            
        }
    }

    .card {
        background-color: var(--layout-cardcolor);
        border-radius: 10px;
        padding: calc(30 / 16 * 1rem); /* 30px */
        margin: calc(20 / 16 * 1rem); /* 20px */
        width: calc(380 / 16 * 1rem); /* 380px */
        display: flex;
        flex-direction: column;
        align-items: center;

        @media (width <= 768px) {
            height: calc(300 / 16 * 1rem); /* 300px */; 
            width: calc(330 / 16 * 1rem); /* 330px */;
            margin: calc(5 / 16 * 1rem); /* 5px */
            padding: calc(25 / 16 * 1rem); /* 25px */
        }

        @media (width <= 400px) {
            height: calc(300 / 16 * 1rem); /* 300px */; 
            width: calc(330 / 16 * 1rem); /* 330px */;
            margin: calc(5 / 16 * 1rem); /* 5px */
            padding: calc(15 / 16 * 1rem); /* 15px */
        }
    }

    .btn-section {
        margin: calc(12 / 16 * 1rem); /* 12px */
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-bottom: 0;
    }

    .card-button {
        background-color: var(--layout-cardbuttoncolor);
        color: var(--font-anchorcolor);
        border: none;
        padding: calc(10 / 16 * 1rem); /* 10px */
        margin: 0.5rem 0.5rem 0.5rem 0.5rem;
        width: 100%;
        border-radius: 7px;
        cursor: url(/assets/images/pointer-cursor-30.png), auto;
        text-align: center;

        @media (width <= 400px) {
            height: calc(30 / 16 * 1rem); /* 30px */; 
            width: 100%;
            margin: calc(5 / 16 * 1rem); /* 5px */
            padding: calc(5 / 16 * 1rem); /* 5px */
        }
    }

    .card-button:active {
        background-color: var(--color-green);
        color: var(--layout-backgroundcolor);
        cursor: url(/assets/images/pointer-cursor-30.png), auto;
    }

    .card-button:last-child {
        margin-bottom: 0;
    }  

    .card-button:hover {
        opacity: 0.8;
    }

    img {
        max-width: calc(85 / 16 * 1rem); /* 85px */
        height: auto;
        border-radius: 100px;

        @media (width <= 400px) {
            height: calc(60 / 16 * 1rem); /* 60px */; 
            width: calc(60 / 16 * 1rem); /* 60px */; 
        }
    }

    footer {
        text-align: center;
        height: 3%;
        font-size: 10px;
        width: 100vw;
        > a { 
            font-size: 10px;
            margin: 0;
            color: hsl(228, 45%, 44%);
        }
    }
}