/*Forces the site to play nice on all browsers*/
* {
    box-sizing: border-box;
}
/*"resets" the default margin/paddings, letting me edit them easier... but forcing me to edit all of them rip*/
* {
    margin: 0;
    padding: 0;
}
/*color guide
  --dark green: #626F47;
  --light green: #A4B465;
  --yellow: #FFCF50;
  --orange: #d36114
  --off white: #F8F2E5;
  #D5E796
*/
:root {
    --bg: #F7EAC7;
    --txt: #663c0e;
    --link: #d36114;
    --linkv: #626F47;
    --code: #e7d8ae;
    /*boxes*/
    --box: #AAC384;
    --boxtxt:#3B2308;
    --boxlink:#b5510e;
    --boxlinkv:#464f32;
}

/*Allows for dark mode*/
@media (prefers-color-scheme: dark) {
	:root {
	  /*colors*/
      --bg: #482c0d;
      --txt: #F7EAC7;
      --link: #f48438;
      --linkv: #AAC384;
      --code: #7e5931;
      /*boxes*/
      --box: #626F47;
      --boxtxt:#fef6e2;
      --boxlink:#ff9752;
      --boxlinkv:#d2eea8;
	}
}

/*BASIC TEXT, LIKE BODY, P, A, H,, ETC.*/
body {
    background-color:var(--bg);
    font-family: Garamond, serif;
    color:var(--txt);
    font-size: 1.6rem;
}

header {
    background-color:var(--box);
    color:var(--boxtxt);
}

nav {
    background-color:var(--box);
    margin-bottom: 3rem;
    border-bottom: 2px solid var(--txt);
}

header p,
header img {
    margin-top: 0rem;
}

header h1 {
    margin-bottom: 0rem;
}

nav p,
nav img {
    margin-top: 0rem;
}

main {
    padding: 0% 15% 0% 15%; /* top | right | bottom | left | also applies to margin */
}

footer {
    background-color:var(--box);
    color:var(--boxtxt);
    margin-top: 3rem;
    border-top: 2px solid var(--txt);
    position:absolute; 
    width: 100%;
}

footer p {
    margin: 1rem 0rem .5rem 1.5rem;
}

header p, nav p, footer p {
    color: var(--boxtxt);
    }
header a, nav a, footer a {
    color: var(--boxlink);
    }
header a, nav a, footer a:visited {
    color: var(--boxlinkv);
}

p {
    margin: 1rem 0rem .5rem 0rem;
    line-height: 1.3;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    margin: 0rem 0rem .5rem 0rem;
}

h1:after {
    content:' ';
    display: block;
    border: 1px solid var(--txt);
}

h1:before {
    content:'\1F41D';
}

a {
    color:var(--link)
}

a:visited {
    color: var(--linkv);
}

mark {
    background-color:var(--link);
    color:var(--bg)
}

ul, ol, ul li, ol li {
    margin: 1rem 0rem .5rem 1.5rem;
}

ul li::marker {
    content: '\273F   ';
    font-size: 1.3rem;
}

ol > li::marker {
    font-weight: bold;
}

blockquote {
    margin: 1rem 0rem .5rem 5.5rem;
    padding: .1rem .5rem .1rem 1rem;
    line-height: 1.3;
    background-color: var(--code);
    border-left: solid var(--link)
}

code{
    font-family: 'Courier New', monospace;
    background-color: var(--code);
    color: var(--txt);
    font-size: 1.4rem;
}

pre {
    font-family: 'Courier New', monospace;
    background-color: var(--code);
    max-width: 100%;
    overflow-x: auto;
    padding: .5rem
}

pre > code {
    background-color: transparent;
}

hr {
    border: none;
    border-top: 3px solid var(--linkv);
    color: var(--linkv);
    overflow: visible;
    text-align: center;
    height: 5px;
    margin: 1rem 0rem;
}
  
hr::after {
    background: var(--bg);
    content: "\273F";
    padding: 0 4px;
    position: relative;
    top: -20px;
}

img {
    max-width: 100%;
    height: auto;
}

.center-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 80%;
}

figcaption {
    font-size: 1.3rem;
    text-align: center;
}

/*THE TABLE*/
table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

caption {
    font-weight: bold;
    font-size: 1.8rem;
    text-align: center;
    text-decoration: underline;
}

td,th {
  padding: .5rem;
  font-weight: normal;
}

thead th {
    font-weight: bold;
}

tbody th {
    font-weight: bold;
    text-align: left;
}

tbody tr:nth-child(odd) {
    background-color: var(--code);
}

tbody tr:nth-child(even) {
    background-color: var(--bg);
}

/*INTERACTIVE*/
button {
    font-size: 1.3rem;
    font-family: Garamond, serif;
    text-align: center;
    background-color: var(--txt);
    color: var(--bg);
    text-decoration: none;
    border: none;
    border-radius: 5px;
    padding: 10px;
    margin: 5px;
    display: inline-block;
}

button:hover {
    cursor: pointer;
    background-color: var(--linkv);
}

textarea, input {
    font-family: 'Courier New', monospace;
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--linkv);
    background-color: var(--code);
    border: 1px solid var(--code);
    border-radius: 1px;
    box-shadow: none;
    box-sizing: border-box;
}  

fieldset {
    display:inline-block;
    border: none;
}

input[type="radio"] {
    margin: 1rem 0rem .5rem 1.5rem;
    appearance: none;
    border-radius: 50%;
    width: .9rem;
    height: .9rem;
    border: .15rem solid var(--txt);
    position: relative;
    top: .4rem;
}

input[type=radio]:checked {
    border: .45rem solid var(--link);
}

@media (hover: hover) {
    input[type="radio"]:not(:checked):hover {
      background-color: var(--box);
      cursor: pointer;
    }
}

input[type=radio] label {
    cursor: pointer;
}
  
/*CLASSES*/
.center {
    text-align: center;
}

.box{
    background-color:var(--box);
    color: var(--boxtxt);
    padding: 1rem;
    margin: .5rem .3rem;
 }
 .box hr:after {
    background: var(--box);
 }
 .box a {
    color: var(--boxlink);
 }
 .box a:visited {
    color: var(--boxlinkv);
}

.scroll {
    background-color: var(--code);
    height: 10rem;
    overflow-y: scroll;
    margin: 1rem 3rem;
    padding: .5rem;
} 
/*FLEX BOX*/
.container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin:auto;
}
    .half {flex: 50%;}
    .third {flex: 33%;}
    .twothird {flex: 66%;}
    .threequarter {flex: 75%;}
    .quarter {flex: 25%;}