/* these are the colors for the whole layout */

:root {
    --text: #34347A;
    --links: #5F5FAD;
    --sidebar: #9696FF;
    --notwhite: #BAFFBA;
    --popcolor: #BFBFBF;
}

/* this is the background image for the header bar; change or delete it as you like. */
.top {
    background-image: url(pcb_bg.gif);
    background-position: center;
    /*this might not be the best positioning for your image; experiment/delete as needed ! */
}


/* this makes the navigation links tilt when you hover over them; delete if not wanted */
.sidebar li:nth-child(odd):hover {
    transform: rotate(10deg);
}

.sidebar li:nth-child(even):hover {
    transform: rotate(-10deg);
}

/* and this is the weird shadows on the header title. delete or change if you don't like em. */

.top h1 {
    text-shadow: 2px 2px var(--text), -2px -2px var(--notwhite);
}

/* main css */

* {
    box-sizing: border-box;
    scrollbar-color: var(--text) var(--sidebar);
}

::selection {
    background-color: var(--text);
    color: var(--notwhite)
}

body {
    margin: 0;
    padding: 0;
    color: var(--text);
    background-color: var(--notwhite)
}

img {
    max-width: 100%;
}

figure {
    border: 1px solid;
}

a {
    color: var(--links)
}

a:hover {
    color: var(--notwhite)
}

blockquote {
    border-left: 4px solid var(--popcolor);
    padding-left: 15px;
    font-size: small;
    max-width: 80%;
}

.bodybox ul,
ol {
    list-style-position: inside;
    display: table;
}

.bodybox ul li,
ol li {
    margin-left: 13px;
    text-indent: -12px;
}


.container {
    width: 800px;
}

.top {
    border: 2px solid var(--text);
    background-color: var(--sidebar);
    height: 100px;
    display: grid;
    grid-template-columns: 150px repeat(3, 1fr);
    grid-template-rows: repeat(2, 50px);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    border-bottom-right-radius: 50px;
}

.logo {
    grid-area: 1 / 1 / 3 / 2;
    justify-content: center;
    display: flex;
    align-items: center;
}

.head {
    grid-area: 1 / 2 / 2 / 5;
}

.subhead {
    grid-area: 2 / 2 / 3 / 5;
    overflow: hidden;
    font-size: 13pt;
    display: flex;
    justify-content: flex-end;
    align-items: end;
    padding: 5px;
    padding-right: 35px;
    color: var(--notwhite);
    text-shadow: 1px 1px var(--sidebar);
    font-style: italic;
}

.top h1 {
    margin: 0;
    font-size: 40pt;
    text-align: center;
    color: var(--popcolor);
}

.top img {
    max-height: 100%;
}


.sidebar {
    border: 2px solid var(--text);
    background-color: var(--sidebar);
    width: 150px;
    min-height: calc(90vh - 100px);
    float: left;
    margin-right: 50px;
    margin-bottom: 20px;
    border-bottom-right-radius: 50px;
    border-top: none;
    text-align: center;
}

.sidebar h1 {
    font-size: 18pt;
}

.sidebar ul,
.sidebar li {
    padding: 0;
    list-style-type: none;
}

.sidebar li {
    margin: 20px;
}

.sidebar a {
    font-weight: bold;
    font-size: 15pt;
}


.bodybox {
    padding: 20px;
}