/* variables */
:root {
    --primary: #E7E7E8;
    --secondary: #121212;
    --accent: #E73539;
    --font-h1-mobile: normal 700 70px/90% "Saira Condensed", sans-serif;
    --font-h2-mobile: normal 700 50px/110% "Saira Condensed", sans-serif;
    --font-h3-mobile: normal 700 30px/110% "Saira Condensed", sans-serif;
    --font-h4-mobile: normal 700 24px/90% "Saira Condensed", sans-serif;
    --font-p-mobile: normal normal 16px/170% "Inter", sans-serif;
    --font-h1-tablet: normal 700 80px/90% "Saira Condensed", sans-serif;
    --font-h2-tablet: normal 700 50px/110% "Saira Condensed", sans-serif;
    --font-h3-tablet: normal 700 30px/110% "Saira Condensed", sans-serif;
    --font-h4-tablet: normal 700 24px/90% "Saira Condensed", sans-serif;
    --font-p-tablet: normal normal 16px/170% "Inter", sans-serif;
    --font-h1-desktop: normal 700 130px/90% "Saira Condensed", sans-serif;
    --font-h2-desktop: normal 700 70px/110% "Saira Condensed", sans-serif;
}

/* reset */
* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    box-sizing: border-box;
}

img {
    width: 100%;
}

body {
    background-color: var(--primary);
}

/* mobile styles */
.header {
    height: 500px;
    background: #161616 url("https://github.com/MisaHariRabe/ChampionBox/blob/main/Figma%20Basics%2001/Boy%20fight.jpg?raw=true") no-repeat -25% 50%/cover padding-box;
    padding: 20px;
    display: grid;
    grid-auto-flow: row;
    clip-path: polygon(0 0, 0 100%, 100% 90%, 100% 0%);
}

.header__nav {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    justify-items: space-between;
    align-self: self-start;
}

.header__nav__logo {
    display: grid;
    grid-auto-flow: column;
    place-items: center;
    gap: 9px;
    width: fit-content;
}

.header__nav__logo>svg {
    width: 50px;
}

.header__nav__logo>h3 {
    font: var(--font-h3-mobile);
    color: white;
}

.header__nav__links {
    display: grid;
    grid-auto-flow: column;
    place-items: center;
}

.header__nav__links>a[href="#signup"] {
    justify-self: end;
}

.header__nav__links>a {
    font: var(--font-h4-mobile);
    color: white;
}

a[href="#signup"] {
    font: var(--font-h4-mobile);
    color: white;
    background-color: var(--accent);
    padding: 10px 20px;
}

.header__nav__links>a:not([href="#signup"]) {
    display: none;
}

.header__title {
    font: var(--font-h1-mobile);
    color: white;
    text-transform: uppercase;
}

.hanging__menu {
    display: grid;
    grid-auto-flow: column;
    gap: 25px;
    width: fit-content;
    padding: 10px 35px;
    background-color: white;
    place-items: center;
    position: relative;
    left: 50%;
    translate: -50% -75px;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.082);
}

.hanging__menu>.item {
    display: grid;
    grid-auto-flow: row;
    place-items: center;
    gap: 7px;
}

.item>svg {
    width: 45px;
}

.item>.item__title {
    font: var(--font-h3-mobile);
    color: var(--accent);
}

.container {
    display: grid;
    grid-template-columns: repeat(4, 100px);
    gap: 16px;
    justify-content: center;
}

.main {
    grid-column: 1/5;
    display: grid;
    grid-auto-flow: row;
    gap: 20px;
    margin-bottom: 56px;
    width: 100%;
}

.main>figure {
    overflow: hidden;
}

.main__mobile__title,
.main__desktop__title {
    font: var(--font-h2-mobile);
    color: var(--secondary);
    border-left: 8px solid var(--accent);
    padding-left: 13px;
}

.main__desktop__title {
    display: none;
}

.main__about {
    display: grid;
    grid-auto-flow: row;
    justify-items: left;
    gap: 20px;
}

.main__about>p {
    font: var(--font-p-mobile);
}

footer {
    background-color: var(--secondary);
}

.footer__container {
    grid-column: 1/5;
    grid-auto-flow: row;
    padding: 21px 0;
    display: grid;
    grid-auto-flow: row;
    gap: 68px;
}

.footer__items,
.footer__items__links {
    display: grid;
    grid-auto-flow: row;
    place-items: center;
    gap: 20px;
}

.footer__items__h2 {
    font: var(--font-h2-mobile);
    color: white;
}

.footer__items__icons {
    display: grid;
    grid-auto-flow: column;
    gap: 40px;
    place-items: center;
}

.footer__items__icons>svg {
    width: 40px;
    height: 40px;
}

.footer__items__email {
    display: grid;
    grid-auto-flow: column;
    place-items: center;
    gap: 10px;
}

.footer__items__email>a,
.footer__items__links>a {
    font: var(--font-p-mobile);
    color: white;
}

/* small tablet styles */
@media screen and (min-width: 750px) {
    .header {
        grid-template-columns: repeat(8, 70px);
        justify-content: center;
        background: #161616 url("https://github.com/MisaHariRabe/ChampionBox/blob/main/Figma%20Basics%2001/Boy%20fight.jpg?raw=true") no-repeat 150% 50%/contain padding-box;
        padding: 10px 0;
    }

    .header__nav {
        grid-column: 1/9;
        width: 100%;
    }

    .header__nav__logo>h3 {
        font: var(--font-h3-tablet);
    }

    .header__title {
        font: var(--font-h1-tablet);
        grid-column: 1/9;
        width: 100%;
    }

    .hanging__menu {
        gap: 60px;
        width: fit-content;
        padding: 20px 34px;
    }

    .container {
        grid-template-columns: repeat(8, 70px);
    }

    .main {
        grid-column: 1/9;
        grid-auto-flow: column;
        place-items: center;
    }

    .main__mobile__title {
        grid-column: 1/9;
        width: 100%;
    }

    .main>figure {
        grid-column: 1/5;
        width: 100%;
    }

    .main__img {
        scale: 1.2;
    }

    .main__about {
        grid-column: 6/9;
    }

    .footer__container {
        grid-column: 1/9;
    }

    .footer__items,
    .footer__items__links {
        grid-auto-flow: column;
        place-items: center;
    }
}

/* desktop styles */
@media screen and (min-width: 1200px) {
    .header {
        grid-template-columns: repeat(12, 75px);
        gap: 20px;
        justify-content: center;
        background: #161616 url("https://github.com/MisaHariRabe/ChampionBox/blob/main/Figma%20Basics%2001/Boy%20fight.jpg?raw=true") no-repeat 100% 50%/contain padding-box;
        height: 650px;
    }

    .header__nav {
        grid-column: 1/13;
        width: 100%;
    }

    .header__nav__logo>h3 {
        font: var(--font-h3-tablet);
    }

    .header__nav__links>a:not([href="#signup"]) {
        display: block;
    }

    .header__title {
        font: var(--font-h1-desktop);
        grid-column: 1/8;
        width: 100%;
    }

    .hanging__menu {
        gap: 100px;
        width: fit-content;
        padding: 40px 68px;
    }

    .container {
        grid-template-columns: repeat(12, 75px);
        gap: 20px;
    }

    .main {
        grid-column: 1/13;
        grid-auto-flow: column;
        place-items: center;
    }

    .main__mobile__title {
        display: none;
    }

    .main__desktop__title {
        display: block;
        font: var(--font-h2-desktop);
    }

    .main>figure {
        grid-column: 1/7;
        width: 100%;
    }

    .main__img {
        scale: 1.2;
    }

    .main__about {
        grid-column: 8/13;
        width: 100%;
    }

    .footer__container {
        grid-column: 1/13;
        width: 100%;
    }

    .footer__items,
    .footer__items__links {
        grid-auto-flow: column;
        place-items: center;
    }
}