@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --primary-color: rgba(32, 33, 36, 1);
    --primary-color-25: rgba(32, 33, 36, 0.25);
    --primary-color-50: rgba(32, 33, 36, 0.5);
    --primary-color-75: rgba(32, 33, 36, 0.75);
    --secondary-color: rgba(242, 241, 238, 1);
    --secondary-color-25: rgba(242, 241, 238, 0.25);
    --secondary-color-50: rgba(242, 241, 238, 0.5);
    --secondary-color-75: rgba(242, 241, 238, 0.75);
    --tertiery-color: rgba(71, 71, 71, 1);
    --tertiery-color-25: rgba(71, 71, 71, 0.25);
    --primary-font: 'Open Sans', sans-serif;
    --accent-font: 'Aspekta', sans-serif;
    --accent-font-2: 'NDOT 47 (inspired by NOTHING)', sans-serif;
    --box-shadow: 0 0 10px rgba(32, 33, 36, 0.5);
    --box-shadow-light: 0 0 10px rgba(32, 33, 36, 0.15);
    --border-radius-large: 25px;
    --border-radius-medium: 10px;
    --accent-color: rgba(90, 99, 116, 1);
}

.dark-mode {
    --primary-color: rgba(242, 241, 238, 1);
    --primary-color-25: rgba(242, 241, 238, 0.25);
    --primary-color-50: rgba(242, 241, 238, 0.5);
    --primary-color-75: rgba(242, 241, 238, 0.75);
    --secondary-color: rgba(32, 33, 36, 1);
    --secondary-color-25: rgba(32, 33, 36, 0.25);
    --secondary-color-50: rgba(32, 33, 36, 0.5);
    --secondary-color-75: rgba(32, 33, 36, 0.75);
    --tertiery-color: rgba(242, 241, 238, 1);
    --tertiery-color-25: rgba(242, 241, 238, 0.25);
    --box-shadow: 0 0 10px rgba(15, 16, 18, 0.5);
    --box-shadow-light: 0 0 10px rgba(15, 16, 18, 0.15);
}

body,
html {
    margin: 0;
    padding: 0;
    font-family: var(--primary-font);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--primary-color);
    background-color: var(--secondary-color);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--accent-font);
    line-height: 1.25;
}

p {
    margin: 0;
}

button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    margin-top: 10px;
    border: none;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

button:hover {
    box-shadow: var(--box-shadow);
    transition: all 0.3s ease-in-out;
}