:root{
    /* Color */
    --clr-primary-200: hsl(185, 41%, 65%);
    --clr-primary-400: hsl(185, 41%, 50%);
    --clr-primary-600: hsl(185, 41%, 34%);

    --clr-accent-200: hsl(353, 93%, 70%);
    --clr-accent-400: hsl(353, 93%, 59%);
    --clr-accent-600: hsl(353, 93%, 43%);

    --clr-black-200: hsl(330, 3%, 29%);
    --clr-black-400: hsl(330, 3%, 15%);
    --clr-black-600: hsl(330, 3%, 8%);

    --clr-white-200: hsl(60, 0%, 100%);
    --clr-white-400: hsl(60, 8%, 95%);
    --clr-white-600: hsl(60, 25%, 88%);

    /* Font Family */
    --ff-body: system-ui;
    --ff-heading: system-ui;

    /* Font-Size */
    --fs-300: clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem);
    --fs-400: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
    --fs-500: clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem);
    --fs-600: clamp(1.62rem, calc(1.37rem + 1.24vw), 2.33rem);
    --fs-700: clamp(1.94rem, calc(1.54rem + 2.03vw), 3.11rem);
    --fs-800: clamp(2.33rem, calc(1.7rem + 3.15vw), 4.14rem);
    --fs-900: clamp(2.8rem, calc(1.85rem + 4.74vw), 5.52rem);

    /* Font Weight */
    --fw-light: 200;
    --fw-base: 400;
    --fw-bold: 600;

}

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

*{
    margin: 0;
    padding: 0;
    font: inherit;
}

html{
    font-family: var(--ff-body);
    font-size: var(--fs-400);
    line-height: 1.5;
    color: var(--clr-black-400);
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100vh;
    padding: 20px;
    background:
            linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
            url(../img/background.jpg) no-repeat center center/cover;
}

section{
}

.container{
    max-width: 1200px;
}

h1{
    font-size: var(--fs-600);
}

p{
    font-size: var(--fs-500);
}


.container h1,
.container p{
    text-transform: uppercase;
    color: var(--clr-white-400);
}

/*       Navigation        */

.header-nav {
    position: fixed;
    width: 100%;
    top: 0;
}

.navbar {
    background-color: var(--clr-black-400);
    box-shadow: 0px 5px 5px -1px rgba(76,72,74,0.5);
}

.navbar_content {
    min-height: 110px;
    max-width: 1200px;
    padding: 0 30px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-link {
    vertical-align: middle;
    display: flex;
    column-gap: 10px;
    align-items: center;
}

.logo_img {
    width: 315px;
}

.nav-menu {
    transition: all 0.3s ease-in-out;
    display: none;
}

.nav_group {
    display: flex;
    column-gap: 40px;
}

.nav_item {

}

.nav_link {
    font-size: var(--fs-400);
    color: var(--clr-white-600);
    transition: all 0.2s;
}

.nav_link:hover,
.nav_link:focus {
    color: var(--clr-accent-200);
}

.nav_link:active {
    color: var(--clr-accent-600);
}

.hamburger {
    cursor: pointer;
    display: none;
}

.nav-end{
    min-height: 110px;
}

.bar {
    height: 2px;
    width: 27px;
    background-color: var(--clr-white-600);
    margin: 5px 0;
    opacity: 0.8;
    transition: all 0.3s ease-in-out;
}

/*       JS for Navigation        */
.nav--open {
    left: 50% !important;
}

.hamburger--open .bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger--open .bar:nth-child(2) {
    opacity: 0;
}

.hamburger--open .bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/*       Media Queries        */

@media (max-width: 992px) {
    .nav-menu {
        position: fixed;
        top: 90px;
        left: -100%;
        transform: translateX(-50%);
        background-color: var(--clr-black-400);
        box-shadow: 0px 5px 5px -1px rgba(76,72,74,0.5);
        width: 100%;
        padding: 10px 0 25px;
    }

    .nav_group {
        flex-direction: column;
        align-items: center;
        row-gap: 20px;
    }

    .nav_link {
        font-size: var(--fs-300);
    }

    .hamburger {
        display: block;
    }
}

@media (max-width: 567px) {
    .logo_img {
        width: 210px;
    }
}