body {
    background-color:black;
    background-image: url("images/Cath.png");
    background-attachment:fixed;
    background-position-x:center;
    background-repeat:no-repeat;
    background-size:100% 100%;
    font-family:"Roboto Flex", sans-serif;
    text-align:center;
    color:white;
    margin:0;
    padding:0;
}
nav {
    background-color:#0a0137;
    font-family:"Metamorphous", serif;
    font-size:150%;
    width:100%;
    padding-bottom:1.9%;
}

nav ul {
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
    list-style-type:none;
    margin:0;
    padding:0;
}

nav ul li {
    width:150%;
}

nav ul li a {
    text-decoration:none;
    display:block;
    justify-content:space-evenly;
    align-content:center;
    color:#9515ff;
    transition:1.5s;
    height:150%;
}

nav ul li a:hover {
    background-color:#7a0bfc;
    color:white;
    text-decoration:none;
    transition:0.7s;
}


/* Classes */
.header {
    width:100%;
    height:20%;
    margin:0;
    padding:0;
}

.header .p {
    text-align:center;
    margin:0;
    padding:0;
}

.title {
    font-family:"Quintessential", serif;
    font-size:350%;
    margin-top:2.5%;
    margin-bottom:-2%;
}

.subtitle {
    font-family:"Metamorphous", serif;
    font-size:125%;
    color:#aa7ae1;
}

.container {
    width:100%;
    display:flex;
    flex-direction:row;
    margin:0;
    padding:0;
}

.sidebar {
    width:20.20%;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    align-items:center;
    margin:6% 0 0 0;
    padding:0;
}

.main {
    display:flex;
    flex-direction:column;
    width:59.5%;
    height:100%;
    margin:0;
    padding:0;
}

.section {
    background-color:#2e0c91;
    width:96%;
    border-radius:10px;
    overflow:auto;
}

.section ul {
    width:92%;
    margin-left:2%;
}

.sbSection {
    background-color:rgba(27,59,144,.9);
    width:92%;
    border-radius:5px;
    border-left:4px solid #ec21ff;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.sbSection p {
    width:88%;
    text-align:left;
    margin-top:0;
}

.sbSection p.sub {
    text-align:center;
    margin:0;
    padding:0;
}

.content {
    display:flex;
    flex-direction:column;
    justify-content:space-evenly;
    align-items:center;
    text-align:left;
    height:100%;
}

a {
    text-decoration:none;
    color:#9515ff;

}

h1 {
    font-family:"Metamorphous", serif;
    margin-left:6%;
}

h2 {
    font-family:"Metamorphous", serif;
    color:#aa7ae1;
    font-size:110%;
    margin-top:-2%;
    margin-left:20%;
}

h3 {
    font-family: "Metamorphous", serif;
    color:white;
    text-shadow:2px 2px black;
    text-align:center;
}

h4 {
    font-family: "Metamorphous", serif;
    font-size:110%;
    margin-left:10%;
}

h5 {
    font-family:"Metamorphous", serif;
    font-size:110%;
    margin-left:12%;
}

.icon {
    width:90%;
    margin-top:8%;
    padding:0;
}

.icon img {
    width:60%;
    border-radius:50%;
    border-top:4px solid #ec21ff;
    border-right:4px solid #9515ff;
    border-bottom:4px solid #9515ff;
    border-left:4px solid #ec21ff;
}

.spacer {
    height:17px;
    width:100%;
}

.scoot {
    width:80%;
    margin-top:-1.5%;
    margin-left:15%;
}

.scoot2 {
    padding-left:18%;
}