/* Fonts */
@font-face {
    font-family: "IBM Plex Sans";
    src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("fonts/IBMPlexSans-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}
/* End fonts */

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

* {
    margin: 0;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}


p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}
/* End reset */


:root {
    --bright-ass-bg: hsl(61deg, 100%, 56%);
    --neutral-bg: hsl(61deg, 3%, 97%);
    --main-font: "IBM Plex Sans";
    --accent-font: "IBM Plex mono", monospace;

    --main-text-color: hsl(0deg, 0%, 0%);
    --accent-text-color: hsl(248deg, 91%, 45%);
    --border-color: hsl(0deg, 0%, 86%);
    --card-bg: hsl(0deg, 0%, 100%);
    --card-bg-hover: hsl(0deg, 0%, 98%);

    --seconary-opacity: 70%;

    --heading-size: 90px;
    --heading-line-height: 110%;

    --logo-size: 24px;
    --sub-size: 28px;
    --rounding: 6px;

    --heading-top-margin: 160px;
    --heading-bottom-margin: 80px;

    --card-title-size: 22px;
    --card-body-size: 18px;

    --video-card-width: 278px;

    --container-width: 725px;
    --flex-direction: row;

    @media (max-width: 600px) {
        --heading-size: 48px;
        --sub-size: 22px;


        --flex-direction: column;
        --video-card-width: 100%;
    }
}



body {
    background: var(--neutral-bg);

    margin: 0;
    padding: 0;

    font-family: var(--main-font), sans-serif;
    font-variant-numeric: slashed-zero;
}

.logo {
    font-size: var(--logo-size);
}

section.hero {
    background: var(--bright-ass-bg);
}

h1 {
    font-size: var(--heading-size);
    font-weight: 400;
    line-height: var(--heading-line-height);
    margin-top: var(--heading-top-margin);
    margin-bottom: var(--heading-bottom-margin);
}

p.sub {
    font-size: var(--sub-size);
    margin-top: 1rem;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 16px;
}


img {
    width: 100%;
    border-radius: var(--rounding);
}

.video {
    position: relative;
}

.video .tag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    padding: 2px 4px;
    background: var(--card-bg);
    border-radius: var(--rounding);
}

.tag {
    font-family: var(--accent-font), monospace;
    color: var(--accent-text-color);
    font-size: 14px;
    text-transform: uppercase;
}

.resource {
    display: flex;
    flex-direction: var(--flex-direction);
    gap: 0.5rem;
}

.resource .video {
    width: var(--video-card-width);
}

.resource .card {
    flex: 1;
}

a {
    text-decoration: none;
    color: inherit;
}

.resource-grid {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;

    gap: 2rem;
}

.card {
    padding: 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);

    border-radius: var(--rounding);
}

.card:hover, .card:focus {
    background: var(--card-bg-hover);
}

.card-title {
    font-size: var(--card-title-size);
    margin: 0;
}

.card-body {
    margin: 0;
    font-size: var(--card-body-size);
    opacity: var(--seconary-opacity);
}