/* Page Organization Variables */
:root {
    --center-column-width: 550px;
    --center-buffer-height: 30px;
    --header-image-height: 150px;

    --topic-list-padding: 40px;

    --summary-padding: 50px;
}

/* Font Setting */
@font-face {
    font-family: 'EB Garamond';
    src: url('./Fonts/EBGaramond/static/EBGaramond-Regular.ttf');
}

@font-face {
    font-family: 'EB Garamond';
    src: url('./Fonts/EBGaramond/static/EBGaramond-Bold.ttf');
    font-weight: bold;
}

@font-face {
    font-family: 'EB Garamond';
    src: url('./Fonts/EBGaramond/static/EBGaramond-Italic.ttf');
    font-style: italic;
}

@font-face {
    font-family: 'EB Garamond';
    src: url('./Fonts/EBGaramond/static/EBGaramond-BoldItalic.ttf');
    font-style: italic;
    font-weight: bold;
}

@font-face {
    font-family: 'Simon Says';
    src: url('./Fonts/SimonSays/SimonSays-Regular.ttf');
}

/* Class Definitions */
.offblackbackground {
    background-color: #0C0C0C;;
}

.offwhitecolor {
    color: #D4CCC4;
}

.offblackcolor {
    color: #0C0C0C;
}

.offredcolor {
    color: #ed7876;
}

.simonsaystext {
    font-family: 'Simon Says', sans-serif;
}

.italic {
    font-style: italic;
}

.linkcolor {
    font-weight: normal;
    color: #fffefe;
}

/* Element Definitions */
html {
    margin: 0;
    width: 100%;
    height: 100%;
}

body {
    font-family: 'EB Garamond', sans-serif;
    background-color: #4E126B;
    color: white;
    margin: 0;
    width: 100%;
    height: 100%;
}

* {
    box-sizing: border-box;
}

/* Div containing all elements in the page */
#pageBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

#centerBuffer {
    position: fixed;
    top: 0px;

    width: var(--center-column-width);
    min-height: var(--center-buffer-height);
    height: var(--center-buffer-height);

    background-color: #4E126B;
}

/* Center Area */
#centerContainer {
    display: flex;
    flex-direction: column;

    width: var(--center-column-width);
    max-width: var(--center-column-width);
    min-height: 100%;
    height: fit-content;

    margin: 0 0;
}
#centerContainer a {
    font-weight: bold;
}

/* Header Area */
#containerBuffer {
    width: 100%;
    min-height: var(--center-buffer-height);
    height: var(--center-buffer-height);
}

#headerArea {
    width: 100%;
    height: var(--header-image-height);
    min-height: var(--header-image-height);
}
#header {
    width: 100%;
    height: 100%;
}
#header>img {
    display: block;
    object-fit: contain;
    width: 100%;
    height: 100%;
}

/* Body Area */
#centerBody {
    display: flex;
    flex-direction: column;
    align-items: center;

    min-height: fit-content;
    height: calc(100% - var(--center-buffer-height) - var(--header-image-height));

    color: #fffefe;
}

#warningHeader {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 250px;

    font-size: 28px;
    text-align: center;

    margin-top: 5px;
    margin-bottom: 5px;
}

#topicList {
    width: 100%;

    line-height: 1.4;
    list-style: none;

    font-size: 25px;

    padding-left: var(--topic-list-padding);
    padding-right: var(--topic-list-padding);

    margin: 0 0;
}
#topicList>li {
    background-image: url('./Images/Landing/Bullet%20Point.png');
    background-repeat: no-repeat;
    background-size: auto 15px;
    background-position-y: 11px;

    padding-left: 25px;
}

#proceed {
    font-size: 35px;

    margin-top: 18px;
    margin-bottom: 8px;
}

#summary {
    line-height: 1.6;

    font-size: 21px;
    text-align: center;

    padding-left: var(--summary-padding);
    padding-right: var(--summary-padding);
}

#spiralLink {
    width: 60%;
    height: calc(0.6 * var(--center-column-width));

    background-image: url("./Images/Landing/Spiral%20Placeholder.png");
    background-size: contain;

    margin-top: 50px;
}
#spiralLink:hover {
    background-image: url("./Images/Landing/Spiral%20Hover.gif");
}

#resources {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;

    font-size: 32px;
    text-align: center;

    padding-left: 25px;
    padding-right: 25px;

    margin-top: 25px;
}

#links {
    padding-left: 25px;
    padding-right: 25px;
}
#links>div {
    font-size: 28px;
    margin-top: 15px;
}

#creditsSection {
    width: 100%;

    font-size: 35px;
    font-weight: bold;

    padding-left: 75px;
    padding-right: 75px;

    margin-bottom: 100px;
}
#creditsTitle {
    font-size: 125px;
}

/* Media Query */
@media only screen and (max-width: 600px) {
    #flex {
        flex-wrap: wrap;
    }

    aside {
        width: 100%;
    }

    main {
        order: 1;
    }

    #leftSidebar {
        order: 2;
    }

    #rightSidebar {
        order: 3;
    }

    #navbar ul {
        flex-wrap: wrap;
    }
}