/* Global CSS Reset */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

body,
h1,
p {
    margin-block-end: 0;
}

body {
    min-height: 100vh;
    line-height: 1.5;
}

h1 {
    line-height: 1.1;
}

button {
    font-family: inherit;
}

/* Importing Fonts */
@font-face {
    font-display: swap;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url(./assets/fonts/open-sans-v44-latin-regular.woff2) format('woff2');
}

/* open-sans-600 - latin */
@font-face {
    font-display: swap;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: url(./assets/fonts/open-sans-v44-latin-600.woff2) format('woff2');
}

/* Root Changes */
:root {
    /* Colors */
    --clr-black: hsl(0, 0%, 0%);
    --clr-white: hsl(0, 0%, 100%);

    --clr-site-background: hsl(210, 29%, 24%);
    --clr-background: hsl(39, 77%, 83%);

    --clr-decreaseBtn: hsl(6, 78%, 57%);
    --clr-decreaseBtn-hover: hsl(6, 78%, 37%);

    --clr-resetBtn: hsl(184, 6%, 53%);
    --clr-resetBtn-hover: hsl(184, 6%, 33%);

    --clr-increaseBtn: hsl(168, 76%, 36%);
    --clr-increaseBtn-hover: hsl(168, 76%, 16%);

    /* Font */
    --FF: 'Open Sans', sans-serif;

    --FS-16: 1rem;     /* 16px */
    --FS-42: 2.625rem; /* 42px */

    --FW-normal: normal;
    --FW-600: 600;

    /* Other */
}

/* Typography */
body {
    font-family: var(--FF);
    font-size: var(--FS-16);
    font-weight: var(--FW-normal);
}

#countLabel {
    font-size: var(--FS-42);
    text-align: center;
    font-weight: var(--FW-600);
    color: var(--clr-black);
}

.button {
    font-size: var(--FS-16);
    color: var(--clr-white);
    font-weight: var(--FW-600);
}

/* General - Mobile View */
.page-container {
    max-width: 400px;
    display: flex;
    align-items: center;
    background-color: var(--clr-site-background);
}

main {
    background-color: var(--clr-background);
    margin: 60px auto;
    width: 350px;
    border-radius: 12px;
    text-align: center;
    padding: 15px;
}

#countLabel {
    margin: 20px 0;
}

#btnContainer {
    margin-bottom: 20px;
}

.btnRow {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-around;
}

.button {
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
}

.decreaseBtn,
.increaseBtn,
.resetBtn {
    transition: background-color 0.15s ease-in-out;
}

.decreaseBtn {
    background-color: var(--clr-decreaseBtn);
}

.decreaseBtn:hover,
.decreaseBtn:focus {
    background-color: var(--clr-decreaseBtn-hover);
}

.resetBtn {
    background-color: var(--clr-resetBtn);
}

.resetBtn:hover,
.resetBtn:focus {
    background-color: var(--clr-resetBtn-hover);
}

.increaseBtn {
    background-color: var(--clr-increaseBtn);
}

.increaseBtn:hover,
.increaseBtn:focus {
    background-color: var(--clr-increaseBtn-hover);
}

/* General - Desktop View */
@media (min-width: 1000px) {
    .page-container {
        max-width: 1000px;
        margin: 0 auto;
    }
}