/*Comment*/

:root {
    --background-colour: #110F1A;
    --background2-colour: #191627;
    --Main-colour: #312852;
    --border-colour: #52418A;
    --accent-colour: #725AC1;
    --text-colour: #F7ECE1;
    --link-colour: #725AC1;
    --leftbox-width: 25%;
}

/*Link edits*/
a:link {
    color: var(--link-colour);
}

/*changes that apply to the ENTIRE page*/
body {
    background: var(--background-colour);
    color: var(--text-colour);
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}

section.page {
    margin: 0px 20%;
    align-content: center;
}

/*Style for all the main elements of the page*/
header, footer, section.mainbox, section.leftbox {
    background: var(--background2-colour);
    border: var(--border-colour);
    border-style: double;
    border-radius: 10px;
}

header, footer, section.mainsection {
    margin: 25px 0;
    align-items: center;
}

section.mainsection, ul.headerlist, ul.headerlist li, body, section.page{
    border-color: rgb(118, 245, 118);
    border-width: 1px;
    border-style: dashed;
}

/*All the stuff that makes the header look nice*/
nav {
    display: inline-flex;
    align-items: center;
}

section.headerlogo {
    margin-left: 25px;
    margin: 10px 0px 10px 25px
}

ul.headerlist li {
    display: inline-flex;
    margin: 10px;
    background-color: var(--Main-colour);
    padding: 5px;
    border-radius: 5px;
}


@media only screen and (max-width: 1100px) {
    section.page {
        margin: 0 2%;
    }
}

@media only screen and (max-width: 600px) {
    section.page {
        margin: 0;
    }
}




/*The stuff that makes the main section(s) work*/

/*BROKEN NEEDS FIX

section.mainbox, section.leftbox {
    display:inline-block;

}

section.mainbox {
    width: calc(100% - calc(var(--leftbox-width)));
}

section.leftbox {f 
    width: var(--leftbox-width);
    margin-right: 25px;
}







/*to do:

make header into two separate containers instead of lists and make buttons
fix problem with left box and main box