/* 
GENERAL SETTINGS
================
*/

:root {
    /* Generated by Coolors.co */
    --floral-white: hsl(46, 100%, 97%);
    --silver: hsl(38, 16%, 76%);
    --charcoal-brown: hsl(34, 6%, 24%);
    --carbon-black: hsl(40, 4%, 14%);
    --spicy-paprika: hsl(17, 83%, 54%);

    --color_primary-accent: var(--spicy-paprika);
    --color_brightest-color: var(--floral-white);
    --color_darkest-color: var(--carbon-black);
    --color_medium-light: var(--silver);
    --color_medium-dark: var(--charcoal-brown);

    --font_main: Georgia, 'Times New Roman', Times, serif;
    --font_secondary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    --h1-height: calc(2em /1);
    --h2-height: calc(3em /2);
    --h3-height: calc(4em /3);
    --h4-height: calc(5em /4);
    --h5-height: calc(6em /5);
    --h6-height: calc(7em /6);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font_main);
    background-color: var(--color_darkest-color);
    color: var(--color_brightest-color);
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font_secondary);
}

h1 {
    font-size: var(--h1-height);
}

h2 {
    font-size: var(--h2-height);
}

h3 {
    font-size: var(--h3-height);
}

h4 {
    font-size: var(--h4-height);
}

h5 {
    font-size: var(--h5-height);
}

h6 {
    font-size: var(--h6-height);
}

img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}


/* 
LAYOUT SETTINGS
===============
*/

html {
    height: 100vh;
    height: 100svh;
}

body {
    height: 100%;
}

#wrapper {
    min-height: 100%;
    max-width: 65ch;
    margin-inline: auto;
}