body {
    margin: 0px;
    padding: 0px;
    background-color: #383838;
    background-image: url("./backgroundBlue.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    color: white;
}
:root {
    --frameMarginSizeX: 5px;
    --frameMarginSizeY: 5px;
    --frameBorderSize: 2px;
    --framePaddingSize: 4px;
}
#sideBar {
    float:left;
    background-color: rgba(17, 24, 55, 0.9);
    margin: var(--frameMarginSizeY) var(--frameMarginSizeX);
    padding: var(--framePaddingSize);
    height: calc(100vh - (var(--frameMarginSizeY) + var(--framePaddingSize) + var(--frameBorderSize)) * 2);
    overflow: auto;
    width:320px;
    border: rgb(84, 100, 170) var(--frameBorderSize) solid;
    border-radius: 5px;
    backdrop-filter: blur(2px);
}
#contentBar {
    float:right;
    background-color: rgba(17, 24, 55, 0.9);
    margin: var(--frameMarginSizeY) var(--frameMarginSizeX);
    padding: var(--framePaddingSize);
    height: calc(100vh - (var(--frameMarginSizeY) + var(--framePaddingSize) + var(--frameBorderSize)) * 2);
    overflow: auto;
    width:calc(100vw - 320px - (var(--frameMarginSizeX) + var(--framePaddingSize) + var(--frameBorderSize)) * 4);
    border: rgb(84, 100, 170) var(--frameBorderSize) solid;
    border-radius: 5px;
    backdrop-filter: blur(2px);

    color: rgb(215, 215, 255);
    font-family: "Funnel Sans", sans-serif;
}
#sideBarCollapse {
    color: white;
    font-size: 20px;
    font-weight: 900;
    background-color: rgb(20, 28, 62);
    border-radius: 5px 0 0 5px;
    width:40px;
    height: 60px;
    text-align: center;
    border: rgb(84, 100, 170) var(--frameBorderSize) solid;
    border-right: none;
    padding-left: 0px;
    position: absolute;
    top:calc(50% - 20px);
    left: 295px;
}
#sideBarCollapse:hover {
    background-color: rgb(30, 40, 84);
    cursor: pointer;
}
a {
    color: rgb(215, 215, 255);
}
.sideOption {
    width: 100%;
    color: rgb(215, 215, 255) !important;
    font-family: "Funnel Sans", sans-serif;
    font: Arial;
    font-size: 20px;
    font-weight: 500;
    text-decoration: none !important; 
}
.sideOption:hover {
    border-radius: 2px;
    background-color: rgba(42, 52, 110, 0.3);
    font-weight: 900;
    cursor: pointer;
}
.link { 
    color: inherit; 
    padding:1px;
    width:100%
} 
.link:hover { 
    border-radius: 4px;
    background-color: rgba(42, 52, 110, 0.6);
    font-weight: 600;
} 

h1 {
    margin: 5px 0;
}
h2 {
    margin: 5px 0;
}
h3 {
    margin: 5px 0;
    font-size: 22px;
}
h4 {
    margin: 5px 0;
    font-size: 20px;
}
h5 {
    margin: 5px 0;
    font-size: 18px;
}
h6 {
    margin: 5px 0;
    font-size: 16px;
}
img {
    border-radius: 8px;
    border: rgb(45, 63, 164) 2px solid;
}