.warning {
    border-style: double;
    border-width: 10px;
    border-color: hotpink;
    background-color: white;
    color: black;
    font-weight: 10pt;
    font-size: 20pt;
    padding: 20px;
    margin: 20px;
    text-align: center;
}


body {
    /*background-image: linear-gradient(#a407a9, #4a14a7);*/
    background-color: #4a14a7;
    color: white;
    font-family: Monaco, monospace;
}

/* the top bar for the title / header */
#title {
    margin-left: 5vw;
    margin-right: 5vw;
    margin-top: 40px;
    width: auto;
    padding: 20px;
    text-transform: uppercase;
    font-size: 3vw;
    border-width: 5px;
    border-style: solid;
    border-color: #350f76;
    background-color: #0d0024;
    text-align: center;
}

.gif {
    height: 10vw;
}


/* the location to hold the menu buttons */
#hold-menu {
    padding: 20px;
    margin-right: 10vw;
    margin-left: 10vw;
    width: auto;
    margin-bottom: 10vh;
}

.menu-button {
    margin-right: 1vw;
    margin-left: 1vw;
    padding: 2vw;
    background-color: #0d0024;
    border-radius: 7px;
    float: left;
    width: 8vw;

}

/* indicates the button of the page you're currently on */
#selected {
    outline-style: dotted;
    outline-width: 5px;
    outline-color: white;
}



/* hold files */
.file {
    /* appearance */
    /*background-color: red;*/
    margin-bottom: 50px;
    width: 50vw;
    /* padding: 20px; */

    /* the text */
    line-height: 1.8;
    color: white;
}




/* no ugly links */
a:link, a:visited, a:hover, a:active {
      color: white;
      text-decoration: none;
}

/* the title font */
#big-text {
    margin-left: 10%;
    margin-right: 10%;
}

/* keep all files in one place */
.files {
    margin-right: 9vw;
    width: 60vw;
}


/* Store the notes and the files next to eachother!! */
.content {
    width: 80vw;
    margin-left: 8vw;
    margin-right: 8vw;
    padding: 20px;
}


/* I freaking hate that I did this to myself why am I like this. I have too much ambition and I will never stop */
/* IT WAS WORTH IT THE TABS LOOK SO GOOD!!! */

/* THERE ARE 4 TABS MAX PER TAB SECTION */

/* storing the tabs for the files */
.tabs {
    width: 50vw;
    height: 6vh;
}

/* tabs that are not selected */
.tab {
    background-color: #350f76;
    width: 12vw;
    height: 6vh;
    /* border-radius: 10px; */
    text-align: center;
    font-size: 8pt;
    margin-right: 3px;
    float: left;

    cursor: pointer;
}

/* the tab that has been selected */
.select-tab {
    background-color: #0d0024;
    width: 12vw;
    height: 6vh;
    /* border-radius: 10px; */
    text-align: center;
    font-size: 8pt;
    margin-right: 3px;
    float: left;
}


/* the main content div for a file */
.file-content {
    background-color: #0d0024;
    width: 50vw;
    height: 50vh;
    padding: 10px;
    font-size: 15pt;
    overflow: auto;
}


/* so the files without a selected tab looks nice */
.lots-of-space-below {
    margin-bottom: 80px;
}

.file-header {
    font-size: 30pt;
}