/*TEXT IMPORT*/
@import url('https://fonts.googleapis.com/css2?family=Poor+Story&display=swap');

/*VARIABLES*/
:root {
    /*BACKGROUND COLORS*/
    --background-color: #000;
    --main-background: rgba(0, 0, 0, 0.5);

    /*TEXT COLORS*/
    --text-color: #fff;
    --link-color: #5D00BA;
    --link-color-hover: #7780ec;

    /*TEXT*/
    --font: "Poor Story", arial;
    --font-size: 16px;

    /*OTHER*/
    --margin: 10px;
    --padding: 10px;
    --main-border: 30px solid transparent;
    --sidebar-width: 30%;
}

/*BASICS*/

*{
    box-sizing: border-box;
}

body {
    font-size: var(--font-size);
    font-family: var(--font);
    color: var(--text-color);
    background: var(--background-color) url("./BGs/purplehouse.jpg") no-repeat center fixed;
    background-size: cover;
}

a,
a:visited {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    color: var(--link-color-hover);
    text-decoration: wavy;
}

::selection{
    text-shadow: 2px 2px 4px var(--link-color);
    background-color: rgba(255, 255, 255, 0.8);
}

.icon {
  display: block;
  width: 200px;
  height: 200px;
  max-width: 100%;
  border: 2px double #fff;
  margin-bottom: 5px;
}

h1,
h2,
h3 {
    margin: 0;
    padding: 0;
}

ul {
    margin: 0 5px 0 -10px;
}

li {
    text-align: justify;
}

p {
    text-align: justify;
}

/*LAYOUT*/

.foreground img {
    position: fixed;
    z-index: 3;
    width: 250px;
}

.layout {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: var(--margin);
}

main {
    display: grid;
    grid-template: 'left right' auto / auto var(--sidebar-width);
    grid-gap: 0;
    width: 900px;
    border: var(--main-border);
    border-image: url(./Graphics/About/laceyspikeyborder.png) 40 round;
    background-clip: padding-box;
    background-color: var(--main-background);
}

.left {
    grid-area: left;
    border-right: 2px dashed #fff;
    padding: var(--padding);
}

.right {
    grid-area: right;
    padding: var(--padding)
}

.section {
    display: inline-block;
    width: 100%;
}

.section:not(:last-child) {
    margin-bottom: 1em;
    border-bottom: 2px dashed #fff;
}

.overflow {
    max-height: 250px;
    overflow-y: auto;
}

.overflow2 {
    max-height: 450px;
    overflow-y: auto;
}
.overflow1,
.overflow2 {
    overflow-y: auto;
    padding: var(--padding)
}

header,
footer,
footer > div,
header > div {
    max-width: 800px;
    display: inline-block;
    text-align: center;
    margin: 0;
}

.quiz_size {
    height: 100px;
}

.iframe-box{
    display: flex;
    justify-content: center;
}