/* -------------------------- Global Stylesheet -------------------------- */

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* -------------- Font Imports -------------- */

/* --- body text --- */
@font-face {
    font-family: IM;
    src: url('/styles/im_bold.ttf');
}
@font-face {
    font-family: IM;
    src: url('/styles/im_italic.ttf');
    font-style: italic;
}
@font-face {
    font-family: IM;
    src: url('/styles/im_bold2.ttf');
    font-weight: bold;
}

/* -------------- General -------------- */


:root {
    font-family: 'IM', 'Times New Roman', Times, serif;
    --text-color: #f9f8f0;
    --accent-color: #cf8000;
}
body {
    background-color: #060e1e;
    color: var(--text-color);
    background-image: url(../img/background.png);
    background-repeat:repeat;
    background-size: 2000px;
    background-position: 50% 0%;
}
html {
    font-size: 100%;
    color: var(--text-color);
    overflow-x: hidden;
}
* { 
    scrollbar-color: #636261 #000000;
}
::selection { 
    background: #B36200; 
    color: white;
}

h1 {
    font-weight: bold;
    font-size: 3.3rem;
    text-align: center;
}
h2 {
    font-weight: bold;
    font-size: 2rem;
    text-align: center;
    margin-top:3.5rem;
}
h3 {
    font-weight: bold;
    font-size: 2rem;
    text-align: center;
}
p { font-size: 1.2rem; line-height: 125%;}

.hidden {
    visibility: hidden;
}


/* --------------- CONTAINERS --------------- */
main.text-container {
    max-width: 700px;
    margin: 3rem auto;
}

/* --------------- MEDIA --------------- */
@media screen and (max-width: 750px) {
    main.text-container {
        max-width: 100%;
        margin: 3rem 1rem;
    }
    
}