/* Standardize Sizing */
* {
    box-sizing:border-box;
}

/* Reused Variables */
:root {
    --yellow: #DA9100; /* Harvest Gold */
    --red: #4B0607; /* Black Bean */
    --purple: #311B4B; /* Russian Violet */
    --blue: #191970; /* Midnight Blue */
    --green: #013220; /* Dark Green */
    --gray: #9C9D98; /* default hiraeth gray */
    --transparentbg: rgba(228,228,228,0.7); /* transparent bg for text boxes */
}
/* Defining Fonts */
/* Open Dyslexic */
@font-face {
    font-family:"Open Dyslexic";
    src:
    local("OpenDyslexic Regular"), local("OpenDyslexic-Regular"),
    url("/layout/fonts/Open Dyslexic/OpenDyslexic-Regular.otf") format("opentype");
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:"Open Dyslexic";
    src:
    local("OpenDyslexic Italic"), local("OpenDyslexic-Italic"),
    url("/layout/fonts/Open Dyslexic/OpenDyslexic-Italic.otf") format("opentype");
    font-weight:normal;
    font-style:italic;
}
@font-face {
    font-family:"Open Dyslexic";
    src:
    local("OpenDyslexic Bold"), local("OpenDyslexic-Bold"),
    url("/layout/fonts/Open Dyslexic/OpenDyslexic-Bold.otf") format("opentype");
    font-weight:bold;
    font-style:normal;
}
@font-face {
    font-family:"Open Dyslexic";
    src:
    local("OpenDyslexic Bold Italic"), local("OpenDyslexic-BoldItalic"),
    url("/layout/fonts/Open Dyslexic/OpenDyslexic-BoldItalic.otf") format("opentype");
    font-weight:bold;
    font-style:italic;
}

/* background and body basic stuff */
body {
    background: var(--gray) url('images/bg.jpg');
    background-repeat:no-repeat;
    background-size:cover;
    background-position:50% 75%;
    background-attachment:fixed;
    overflow-x:hidden;
}

/* Navigation Bar */
#navbar {
    display:flex;
    flex-wrap:nowrap;
    flex-direction:row;
    justify-content:space-evenly;
    text-align:center;
    width:100vw;
    background-color: var(--gray);
    position:fixed;
    top:0;
    left:0;
    z-index:8;
    opacity:1;
    font-size:1.5rem;
}
#navbar a {
    border: 1px solid #797876;
    text-decoration:none;
}
#navbar a:hover {
    color: #480607;
}

/* Make things display corrently */
/* For Desktop, grid display */
@media screen and (min-width:601px) {
    #gridded {
        display:grid;
        grid-template-columns:80% 1fr;
        gap:20px;
        justify-content:space-around;
        width:100vw;
    }
    #mainbox {
        width:95%;
        margin:5vh auto 1vh auto;
    }
    #sidebar {
        background: var(--transparentbg);
        padding:10px;
        text-align:center;
        margin: 5vh auto 1vh auto;
        border-radius:20px;
        display:flex;
        flex-wrap:wrap;
        flex-direction:column;
    }
}
/* For phones, default and remove sidebar */
@media screen and (max-width:600px) {
    #gridded {
        display:block;
    }
    #sidebar {
        display:none;
    }
    #mainbox {
        width:100%;
        margin:8vh auto 1vh auto;
    }
}

/* main adjustment & universal code (phone & pc) */
#mainbox {
    background: var(--transparentbg);
    padding:10px;
    border-radius:20px;
}
#mainbox p {
    text-indent:25px;
}

/* Headers */
h1 {
    text-align:center;
}
h2 {
    text-align:center;
}
h3 {
    text-align:center;
}

/* Description Subtext */
.definition {
    font-style:italic;
    text-indent:0;
    text-align:center;
    border-bottom:1px dotted var(--blue);
    padding-bottom:8px;
    margin-bottom:-10px;
    border-radius:50%;
}
.definition:first-letter {
    font-weight:bold;
}

/* Regular Links */
a {
	color: var(--blue);
	text-decoration: wavy underline;
}
a:hover, a:focus, a:active {
	color: var(--red);
}

/* italics, bold, etc */
i {
    font-style:italic;
}
em {
    font-style:oblique;
}
b {
    font-weight:bold;
}
strong {
    font-weight:bold;
}
u {
    text-decoration:underline;
}
s {
    text-decoration:line-through;
}