/**********************************************************************
  TABLE OF CONTENTS
  1. BASE STYLES
  2. CONTAINERS & LAYOUT (Header, Main, Footer)
  3. TYPOGRAPHY (Headings, Paragraphs, Lists)
  4. UTILITY CLASSES
  5. MEDIA QUERIES
    5.1. BREAKPOINTS (Background Images)
    5.2. ORIENTATION
    5.3. COLOR SCHEME (Dark Mode)
**********************************************************************/

/* ----------------------------------------------------------------------
  1. BASE STYLES
---------------------------------------------------------------------- */

html {
    font-size: clamp(0.8rem, 0.95rem + 0.22vw, 1.25rem);
    line-height: 1.2;
    margin: 0;
    padding: 0;
}

body {
    /* Box Model */
    margin: 0;
    min-height: 100vh; /* Added: Ensures body takes full viewport height for vertical centering */
    display: flex; /* Added: Enables flex container for vertical centering */
    flex-direction: column; /* Added: Stacks children vertically */
    justify-content: center; /* Added: Vertically centers content block */
    align-items: center; /* Added: Horizontally centers content block */
    /* Typography */
    color: #323d45;
    font-family: "Open Sans", "Droid Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-optical-sizing: auto;
    font-variation-settings: "wdth" 100;
    /* Visual */
    background-color: #fff;
    background-attachment: fixed;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

a {
    color: #e1b2c0;
    text-decoration: none;
    background: none;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 3px, 0 3px;
    border-bottom: 2px solid #ab7988;
    transition: background-size 400ms, color 0.8s;
}

a:hover {
    background-size: 0 3px, 100% 3px;
}

hr {
    /* Box Model */
    display: block;
    height: 1px;
    margin: 1em 0;
    padding: 0;
    border: 0;
    /* Visual */
    border-top: 1px solid #4a5760;
}

/* ----------------------------------------------------------------------
  2. CONTAINERS & LAYOUT
---------------------------------------------------------------------- */

header,
main {
    background-color: rgba(63, 43, 32, 0.7);
    color: #ccc;
    width: clamp(18rem, 1rem + 0.42vw, 40rem);
    margin: 1rem auto;
    padding: 1rem;
    border-radius: 10px;
    position: static;
    bottom: auto; /* Redundant, remove if position is static */
    text-align: left;
}

/* ----------------------------------------------------------------------
  3. TYPOGRAPHY
---------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    /* Box Model */
    margin: 0;
    padding: 0;
    /* Typography */
    font-family: "Rosarivo", "Droid Serif", "Times New Roman", Times, serif;
    /* Visual */
    background: transparent;
    /* Other */
    transition: 0.8s;
}

h1 {
    font-size: 2.2rem;
    line-height: 1.4;
}

h2 {
    font-size: 1.6rem;
    font-weight: 400;
}

p {
    /* Box Model */
    margin: 0;
    padding: 0;
    /* Typography */
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.8;
}

ul,
ol {
    text-align: left;
}

nav ul,
nav ol {
    /* Box Model */
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    font-size: 1.6rem;
}

/* ----------------------------------------------------------------------
  4. UTILITY CLASSES
---------------------------------------------------------------------- */

.text-pop {
    text-shadow: 1px 1px 1px #fff;
}

.warning {
    /* Visual */
    background-color: white;
    color: red;
    font-weight: bold;
}

.claret {
    color: #7f1734;
}

/* ----------------------------------------------------------------------
  5. MEDIA QUERIES
---------------------------------------------------------------------- */

/* 5.1. BREAKPOINTS (Background Images) */

@media screen and (max-width: 1080.99px) {
    body {
        background-image: url("../img/wall-1080.webp"), url("../img/wall-160x.webp");
    }
}

@media screen and (min-width: 1081px) {
    body {
        background-image: url("../img/wall-1920.webp"), url("../img/wall-160x.webp");
    }
}

@media screen and (min-width: 1921px) {
    body {
        background-image: url("../img/wall-2560.webp"), url("../img/wall-160x.webp");
    }
}

@media screen and (min-width: 2561px) {
    body {
        background-image: url("../img/wall-3840.webp"), url("../img/wall-160x.webp");
    }
}

/* 5.2. ORIENTATION */

@media screen and (orientation: landscape) {
    header,
    main {
        margin: 1rem auto;
    }

    h1 {
        font-size: 1.6rem;
    }
}

@media screen and (orientation: portrait) {
    header,
    main {
        flex-direction: row;
    }
}

/* 5.3. COLOR SCHEME (Dark Mode) */

@media (prefers-color-scheme: dark) {
    body {
        background-color: #333;
        color: #eee;
    }

    hr {
        border-top: 1px solid #eee;
    }

    .warning {
        background-color: #555;
        color: yellow;
    }
}