/* Defaults */

body { box-sizing:border-box; margin:0; padding:0; background-color:rgb(255, 250, 244); font-family:Verdana, Geneva, Tahoma, sans-serif; }
div { box-sizing:border-box; margin:0; padding:0; }
pre { margin:0; }
a { color:rgb(0,0,255); }
a:active, a:hover { color:rgb(0,102,255); }
h1 { box-sizing:border-box; margin:0; padding:0; font-size:1.5rem; margin-bottom:1rem; font-weight:bold; }
h2 { box-sizing:border-box; margin:0; padding:0; font-size:1.3rem; margin-bottom:1rem; font-weight:bold; }
p { box-sizing:border-box; margin:0; padding:0; margin-bottom:1rem; }
table { border-collapse:collapse; border:solid 1px grey; font-size:0.9rem; }
th { border:solid 1px grey; padding:0.25rem 0.5rem; text-align:left; }
td { border:solid 1px grey; padding: 0.25rem 0.5rem;  }

h1:last-child { margin-bottom:0; }
h2:last-child { margin-bottom:0; }
p:last-child { margin-bottom:0; }

pre { overflow:auto; }
code { margin-bottom:1rem; margin-top:0; font-size:0.85rem !important; } /* Important is needed because PrismJS don't wanna let you change font size *shrug* */
code:last-child{ margin-bottom:0; }

.my-highlight { overflow-x:auto; }

/* Main Structure */

body { display:flex; flex-direction:column; }
.lyt_header { border-bottom:solid 1px black; padding:1rem; padding-top:0.5rem; }
.lyt_header-inner { width:1024px; max-width:100%; margin:0 auto; text-align:center; }
header { font-size:1.5rem; font-weight:bold; }
strong { font-weight:bold; }

/* Info Block */

.info-block pre { max-height:640px; }
.info-block { width:800px; max-width:100%; border: solid 1px black; margin:0 auto; padding:0.5rem; margin-top:1rem; margin-bottom:1rem; border-radius:8px; }

.info-block_heading { border:solid 1px grey; padding:0.5rem; margin-bottom:0.5rem; border-radius:8px; }
.info-block_heading:last-child { margin-bottom:0; }
.info-block_content { border:solid 1px grey; padding:0.5rem; margin-bottom:0.5rem; border-radius:8px; }
.info-block_content:last-child { margin-bottom:0; }

/* Edits Block */

.credits-block { display:flex; justify-content:center; }

/* Blinking Box */

.blink { display:flex; flex-direction:row; }
.blink_text { flex:1; }

/* Reference Page */

.reference { padding:16px; }
.reference_nav { display:flex; justify-content:center; margin-bottom:4px; }
.reference_link { margin-right:4px; padding:8px; border-left:solid 2px grey; border:solid 2px grey; }
.reference_active-link { border-bottom: solid 2px green; }
.reference_main { padding:16px; font-size:0.75rem; border:solid 2px grey; tab-size:4; }

/* Example Editor */

.example-editor { display:flex; flex-direction:row; margin-bottom:3rem; }
.example-editor_left-col { flex:1; padding:1rem; display:flex; flex-direction:column; }
.example-editor_divider { width:8px; background-color:darkgrey; }
.example-editor_right-col { flex:1; padding:1rem; display:flex; flex-direction:column; }

.example-editor_col-header { display:flex; margin-bottom:0.5rem; }
.example-editor_heading-container { flex:1; }

.example-editor_col-main { flex:1; display:flex; align-items:center; }
.example-editor_ace-container { flex:1; height:480px; }
.example-editor #editor { height:480px; }
.example-editor_game-container { flex:1; align-items:center; justify-content:center; }

/* Sample Listings */

.samples { display:flex; }
.sample { width:240px; max-width:100%; border:solid 1px grey; border-radius:8px; padding:8px; text-decoration:none; }
.sample_img-container { display:flex; align-items:center; justify-content:center; background:lightgrey; border-radius:8px; margin-bottom:0.25rem; }
.sample_heading-container { text-align:center; margin-bottom:0.5rem; }
.sample_description-container { background-color:transparent; color:black; margin-bottom:0.5rem; }
.sample_description-container:last-child { margin-bottom:0; }

.sample_img { max-width:100%; border-radius:8px; }