/* Import Light and Dark Colour Schemes*/
@import url("assets/catppuccin/catppuccin.css");

/* Set Up Fonts */
/* EXTRALIGHT (200) */
@font-face {
    font-family: "Atkinson Hyperlegible Next";
    font-weight: 200;
    font-display: swap;
    src:
        local("Atkinson Hyperlegible Next"),
        url("assets/fonts/AtkinsonHyperlegibleNext-ExtraLight.woff2") format("woff2");
}

@font-face {
    font-family: "Atkinson Hyperlegible Next";
    font-weight: 200;
    font-display: swap;
    font-style: italic;
    src:
        local("Atkinson Hyperlegible Next"),
        url("assets/fonts/AtkinsonHyperlegibleNext-ExtraLightItalic.woff2") format("woff2");
}

/* LIGHT (300) */
@font-face {
    font-family: "Atkinson Hyperlegible Next";
    font-weight: 300;
    font-display: swap;
    src:
        local("Atkinson Hyperlegible Next"),
        url("assets/fonts/AtkinsonHyperlegibleNext-Light.woff2") format("woff2");
}

@font-face {
    font-family: "Atkinson Hyperlegible Next";
    font-weight: 300;
    font-display: swap;
    font-style: italic;
    src:
        local("Atkinson Hyperlegible Next"),
        url("assets/fonts/AtkinsonHyperlegibleNext-LightItalic.woff2") format("woff2");
}

/* REGULAR (400) */
@font-face {
    font-family: "Atkinson Hyperlegible Next";
    font-weight: 400;
    font-display: swap;
    src:
        local("Atkinson Hyperlegible Next"),
        url("assets/fonts/AtkinsonHyperlegibleNext-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Atkinson Hyperlegible Next";
    font-weight: 400;
    font-display: swap;
    font-style: italic;
    src:
        local("Atkinson Hyperlegible Next"),
        url("assets/fonts/AtkinsonHyperlegibleNext-RegularItalic.woff2") format("woff2");
}

/* MEDIUM (500) */
@font-face {
    font-family: "Atkinson Hyperlegible Next";
    font-weight: 500;
    font-display: swap;
    src:
        local("Atkinson Hyperlegible Next"),
        url("assets/fonts/AtkinsonHyperlegibleNext-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "Atkinson Hyperlegible Next";
    font-weight: 500;
    font-display: swap;
    font-style: italic;
    src:
        local("Atkinson Hyperlegible Next"),
        url("assets/fonts/AtkinsonHyperlegibleNext-MediumItalic.woff2") format("woff2");
}

/* SEMIBOLD (600) */
@font-face {
    font-family: "Atkinson Hyperlegible Next";
    font-weight: 600;
    font-display: swap;
    src:
        local("Atkinson Hyperlegible Next"),
        url("assets/fonts/AtkinsonHyperlegibleNext-SemiBold.woff2") format("woff2");
}

@font-face {
    font-family: "Atkinson Hyperlegible Next";
    font-weight: 600;
    font-display: swap;
    font-style: italic;
    src:
        local("Atkinson Hyperlegible Next"),
        url("assets/fonts/AtkinsonHyperlegibleNext-SemiBoldItalic.woff2") format("woff2");
}

/* BOLD (700) */
@font-face {
    font-family: "Atkinson Hyperlegible Next";
    font-weight: 700;
    font-display: swap;
    src:
        local("Atkinson Hyperlegible Next"),
        url("assets/fonts/AtkinsonHyperlegibleNext-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "Atkinson Hyperlegible Next";
    font-weight: 700;
    font-display: swap;
    font-style: italic;
    src:
        local("Atkinson Hyperlegible Next"),
        url("assets/fonts/AtkinsonHyperlegibleNext-BoldItalic.woff2") format("woff2");
}

/* EXTRABOLD (800) */
@font-face {
    font-family: "Atkinson Hyperlegible Next";
    font-weight: 800;
    font-display: swap;
    src:
        local("Atkinson Hyperlegible Next"),
        url("assets/fonts/AtkinsonHyperlegibleNext-ExtraBold.woff2") format("woff2");
}

@font-face {
    font-family: "Atkinson Hyperlegible Next";
    font-weight: 800;
    font-display: swap;
    font-style: italic;
    src:
        local("Atkinson Hyperlegible Next"),
        url("assets/fonts/AtkinsonHyperlegibleNext-ExtraBoldItalic.woff2") format("woff2");
}

/* Rest of the CSS */
:root {
    /* Needed for `light-dark` function to work */
    color-scheme: light dark;
}

body {
    text-align: center;
    font-size: 1.2rem;
    font-family: "Atkinson Hyperlegible Next", "Roboto", sans-serif;
    background-color: light-dark(var(--ctp-latte-base), var(--ctp-macchiato-base));
    color: light-dark(var(--ctp-latte-text), var(--ctp-macchiato-text));
}

::selection {
    background-color: light-dark(rgb(var(--ctp-latte-overlay2-rgb) / 25%),
            rgb(var(--ctp-macchiato-overlay2-rgb) / 25%));
}

h2 {
    color: light-dark(var(--ctp-latte-subtext0), var(--ctp-macchiato-subtext0));
}

h3 {
    color: light-dark(var(--ctp-latte-subtext1), var(--ctp-macchiato-subtext1));
}

a {
    color: light-dark(var(--ctp-latte-blue), var(--ctp-macchiato-blue));
}

a:visited {
    color: light-dark(var(--ctp-latte-lavender), var(--ctp-macchiato-lavender));
}

.warning {
    color: light-dark(var(--ctp-latte-yellow), var(--ctp-macchiato-yellow));
}

.error {
    color: light-dark(var(--ctp-latte-red), var(--ctp-macchiato-red));
}

.good {
    color: light-dark(var(--ctp-latte-green), var(--ctp-macchiato-green));
}

.okay {
    color: light-dark(var(--ctp-latte-yellow), var(--ctp-macchiato-yellow));
}

.bad {
    color: light-dark(var(--ctp-latte-red), var(--ctp-macchiato-red));
}

.spoiler {
    color: transparent;
    background-color: light-dark(var(--ctp-latte-crust),
            var(--ctp-macchiato-crust));
}

.spoiler:hover {
    color: light-dark(var(--ctp-latte-subtext1), var(--ctp-macchiato-subtext1));
    background-color: light-dark(var(--ctp-latte-mantle),
            var(--ctp-macchiato-mantle));
}

.review-div {
    padding-bottom: 4rem;
}

.columns {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
}

.content-poster {
    border: light-dark(var(--ctp-latte-crust), var(--ctp-macchiato-crust));
    border-style: solid;
    border-width: 0.15em;
    border-radius: 2%;
    width: 80%;
}

.content-title {
    font-weight: 500;
}

.content-original-title {
    font-style: italic;
}

cite {
    font-style: normal;
    font-weight: 500;
}

.review-text {
    text-align: justify;
}

.footer-flex {
    font-size: 0.6em;
    line-height: 1.7em;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.inline-logo {
    height: 1.1em;
    vertical-align: middle;
}