/*
* ayushsplaining base V1.0
* Copyright 2022, Ayush Mukherjee
* Free to use under the MIT license.
* 11/22/2022
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Variables
- Typography
- Components
- Layout
- Utilities
- Media Queries
*/


/* Variables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
    --color-black: 116 93% 4%;
    --color-primary: hsl(28 89% 64%);
    --color-primary-light: hsl(28 32% 76%);
    --color-bg: hsl(273 43% 7%);
    --color-bg-light: hsl(273 43% 29%);
    --color-accent: hsl(0 82% 64%);

    --ff-heading: 'Eczar', serif;
    --ff-text: 'Actor', sans-serif;
    --ff-bolder: 600;

    --transition-delay-short: 400ms;
    --transition-delay-long: 20000ms;

    --max-viewport-width: 900px;
}


/* Components
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
    padding: 0;
}


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

html {
    color-scheme: dark;
}

body {
    margin: 0;
    font-family: system-ui;
    font-size: 1.125rem;
    line-height: 1.6;
}


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}


/* Media Queries
-------------------------------------------------- */
@media(min-width: 1600px) {
    :root {
        --max-viewport-width: 1200px;
    }
}

@media(min-width: 2400px) {
    :root {
        --max-viewport-width: 1600px;
    }
}