* {
    box-sizing: border-box;
}

@font-face {
    font-family: Fredoka;
    src: url(fonts/FredokaOne-Regular.otf) format("opentype")
}

@font-face {
    font-family: InterVariable;
    src: url(fonts/InterVariable.ttf) format("truetype")
}

.default-color-theme {
    color: #e8fffc;
    background-color: hsla(209, 20%, 29%, 0.8);
}

#authorship-theme {
    color: #e8fffc;
    background-color: rgb(34, 32, 52, 0.8);
}

body {
    background-image: url('resources/sr5z6b0fd3d84caws3.gif');
    image-rendering: pixelated;
    background-size: 50%;
    background-attachment: fixed;
}

nav {
    text-align: center;
    font-size: 30px;
    padding-top: 20px;
}

nav > h2 {
    line-height: 0;
}

a {
    color: #ffb999;
}

footer {
    background-image: linear-gradient(0deg, rgb(34, 32, 52) 95%, rgba(59, 74, 89, 0));
    text-align: center;
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 15px;
}

.nav_separator {
    background-color: #e8fffc;
    height: 5px;
    margin: 40px 20px;
    border-radius: 20px;
}

.readable-text > h2 {
    font-family: 'Fredoka', 'Intervariable', 'sans-serif';
    text-align: center;
    font-size: 50px;
}

.current-page {
    color: #feeaed;
}

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.container>.content {
    margin: 10px auto;
    width: 1200px;
    font-family: 'Fredoka', 'sans-serif';
    font-size: 21px;
    text-align: justify;
}

.container>header {
    flex: 0 0 250px;
    font-family: "Trebuchet MS", sans-serif;
    margin: 10px;
    font-size: 18px;
    text-align: center;
    line-height: 10px;
    height: 60px;
    align-self: flex-start;
}

.container>aside {
    flex: 0 0 250px;
    font-family: "Trebuchet MS", sans-serif;
    margin: 10px;
    font-size: 15px;
    line-height: 10px;
    text-indent: 10px;
    align-self: flex-end;
}

.flexed-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: start;
    gap: 10px;
}

.compact-list {
    list-style-type: square;
    padding-left: 25px;
    line-height: 18px;
    text-indent: 0;
    font-size: 15px;
}

.compact-list>li+li {
    margin-top: 5px;
}

.authorship-menu {
    line-height: 10px;
    text-indent: 20px;
}

.enclosed-authorship-figure {
    padding-top: 20px;
    padding-right: 20px;
    border: 10px outset #ffcea7;
    width: fit-content;
}

.enclosed-authorship-figure img {
    height: auto;
    max-width: 50%;
}

.enclosed-authorship-figure > p {
    line-height: 30px;
}

.readable-text {
    font-family: 'InterVariable', 'Trebuchet MS', 'sans-serif';
    font-size: 25px;
    padding-left: 20px;
    padding-right: 20px;
}


.text-acc-figure {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.text-acc-figure>div {
    flex: 50%;
}

.captioned-figure {
    border: 2px solid #bbcad9;
}

.captioned-figure img, .captioned-figure video {
    width: 100%;
    display: block;
}

.captioned-figure>div {
    height: 2px;
    background-color: #bbcad9;
}

.captioned-figure>figcaption { 
    padding: 2px; 
}

/* MORE UP-TO-DATE CSS STARTS HERE */
.pagination {
    display: grid;
    grid-template-columns: repeat(5, 48px);
    grid-template-rows: min-content;
    grid-template-areas: "first previous current next last";
    gap: 8px;
    justify-content: center;
    place-items: center;
}

.current {
    grid-area: current;
}

.blog-selection {
    display: grid;
    grid-template-areas: "return empty edit delete";
    grid-template-columns: max-content 1fr max-content max-content;
    grid-template-rows: max-content;
}

.add-new-post {
    background-color: hsla(209, 20%, 29%);
    border: outset;
    box-sizing: border-box;
    color: #e8fffc;
    display: block;
    font-family: inherit;
    font-size: 25px;
    padding: 4px 16px;
    margin: auto;
    width: max-content;
    text-decoration: none;
}

.add-new-post:active {
    border: inset;
}

.edit-post {
    grid-area: edit;

    background-color: hsla(209, 20%, 29%);
    border: outset;
    box-sizing: border-box;
    color: #e8fffc;
    display: block;
    font-family: inherit;
    font-size: 25px;
    padding: 4px 16px;
    margin-right: 8px;
    width: max-content;
    text-decoration: none;
}

.edit-post:active {
    border: inset;
}

.delete-post {
    grid-area: delete;

    background-color: hsla(209, 20%, 29%);
    border: outset;
    box-sizing: border-box;
    color: #ffcea7;
    display: block;
    font-family: inherit;
    font-size: 25px;
    padding: 4px 16px;
    width: max-content;
    text-decoration: none;
}

.delete-post:active {
    border: inset;
}

.return {
    grid-area: return;

    background-color: hsla(209, 20%, 29%);
    border: outset;
    box-sizing: border-box;
    color: #e8fffc;
    display: block;
    font-family: inherit;
    font-size: 25px;
    padding: 4px 16px;
    margin: auto;
    width: max-content;
    text-decoration: none;
}

.return:active {
    border: inset;
}

form input[type="text"],
form input[type="password"],
form textarea,
form select {
    background-color: hsla(209, 20%, 29%);
    color: #e8fffc;
}

form input[type="submit"] {
    background-color: hsla(209, 20%, 29%);
    border: outset;
    box-sizing: border-box;
    color: #ffcea7;
    font-family: inherit;
    font-size: 25px;
    padding: 4px 16px;
}

form input[type="submit"]:active {
    border: inset;
}

form a {
    background-color: hsla(209, 20%, 29%);
    border: outset;
    box-sizing: border-box;
    color: #e8fffc;
    font-family: inherit;
    font-size: 25px;
    padding: 4px 16px;
    text-decoration: none;
}

form a:active {
    border: inset;
}

/* Not so up-to-date CSS starts here */

/* CSS used in dashboard.html to structure and style the Study Overview */

.study-progress-bars {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.study-progress-bars * {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.progress-title {
    background-color: purple;
    font-family: 'Fredoka', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 35px;
    text-align: center;
    margin-bottom: 0;
    padding: 10px;
    border: 4px solid white;
}

.nbsa-counter {
    background-color: black;
    width: fit-content;
    margin: 0;
    padding: 0 10px;
    position: relative;
    top: -30%;
    left: 5%;
    font-size: 50px;
    font-family: 'Fredoka', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    border: 2px solid white;
}

.pbsa-counter {
    background-color: black;
    width: fit-content;
    margin: 0;
    padding: 20px 8px;
    position: relative;
    top: -28%;
    left: 45%;
    font-size: 40px;
    font-family: 'Fredoka', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    border: 2px solid white;
}

.placed-upwards {
    position: relative;
    top: -7rem;
    font-size: 16px;
    margin-bottom: -80px;
}

.placed-upwards2 {
    position: relative;
    top: -2rem;
    font-size: 16px;
}

/* CSS for the Dashboard legend. */

.legend-section {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    place-items: center;
}

.legend-section p {
    margin-bottom: auto;
    margin-top: auto;
}

.legend {
    display: flex;
    grid-column: 2 / 4;
}

.legend-color {
    height: 20px;
    width: 20px;
    margin-left: 20px;
}

.upcoming {background-color: #6a5acd; color:#FFFFFA}
.passed {background-color: ivory; color: #4353A2;}
.failed {background-color: #dc143c; color: #FFFFFA}

/* CSS for the Dashboard overview. */

.overview {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;

    background-color: #dda0dd;
    color: #003D03;
}

.overview > .quarter {
    grid-column: 1 / -1;

    display: grid;
    grid-template-columns: repeat(7, 1fr);

    background-color: #afeeee;
    color: #3D561A;
}

.overview > .quarter > .course {
    grid-column: 2 / -1;

    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.overview > .quarter > .course > .test {
    grid-column: 3 / -1;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.overview > * {
    border: 1px solid black;
    margin: 0;
}

/* CSS used in blog.html to display blog posts */

.blog-list > * {
    border: 2px solid ivory;
    border-radius: 5px;
    padding: 5px;
}

.blog-list > * + * {
    margin-top: 5px;
}

.blog-post > * {
    margin: 5px;
}

.blog-excerpt > a {
    color: #e8fffc;
}

.post-date {
    color: pink;
    opacity: 0.75;
    font-style: italic;
}

/* CSS for the Test class inputs */
.test input {
    background-color: black;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    max-width: 125px;
}

/* CSS for the Dashboard Error messages */
.error-bar {
    background-color: plum;
    background-color: firebrick;
    background-color: #e13535;
    border-radius: 16px;
    color: aliceblue;
    font-family: 'Fredoka', 'Intervariable', 'sans-serif';
    font-size: 1.5rem;
    padding: 1rem;
    margin: 0 0.5rem 2rem;
}

.error-bar-tight {
    background-color: firebrick;
    background-color: #e13535;
    border-radius: 8px;
    color: aliceblue;
    font-family: 'Fredoka', 'Intervariable', 'sans-serif';
    font-size: 1.25rem;
    padding: 0.5rem;
    margin: 0.5rem 0;
}

.error-bar > p::before {
    list-style: circle;
}

/* Profile CSS */
.profile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, min-content);
    grid-template-areas:
            "personal-info profile-pic"
            "summary profile-pic"
            "relationship-status relationship-status"
            "social-links social-links";
    column-gap: 16px;
    margin: 0 0 16px;
}

.personal-info {
    grid-area: personal-info;
}

.summary {
    grid-area: summary;
}

.profile-pic {
    grid-area: profile-pic;
}

.profile-pic img {
    display: block;
    height: auto;
    max-width: 100%;
}

.relationship-status {
    grid-area: relationship-status;
}

.social-links {
    grid-area: social-links;
}

/* More global stuff */
textarea {
    box-sizing: border-box;
    width: 100%;
    height: 200px;
}

/* NAV Classes */

.nav-wrapper {
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    grid-template-rows: 50px;
    grid-template-areas: "filler main login-register";
    align-items: center;
}

.nav-filler {
    grid-area: filler;
}

.nav-main {
    grid-area: main;
}

.nav-login-register {
    grid-area: login-register;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav-login-register > * {
    margin: 0 0 8px;
}

.login-status {
    font-family: 'InterVariable', 'Trebuchet MS', 'sans-serif';
    font-size: 20px;
    width: 240px;
}

.underlined {
    font-weight: bold;
    text-decoration: underline;
}

/* Profile extra classes */

.profile input,
.profile select,
.profile textarea {
    font-size: 20px;
}

.profile textarea {
    resize: vertical;
}

.relationship-selection {
    display: flex;
    align-items: center;
}

.relationship-selection > p {
    margin: 0;
}

.relationship-selection > select {
    margin: 0 0 0 16px;
    height: 40px;
}

.profile-text-input {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.personal-info > .error-bar-tight + .profile-text-input,
.personal-info > .profile-text-input + .profile-text-input {
    margin: 16px 0 0;
}

/* Blog extra classes */
.blog-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.blog-field {
    display: flex;
    flex-direction: column;
}

.blog-field label {
    font-size: 28px;
}

.blog-form input,
.blog-form textarea {
    font-size: 20px;
    max-width: 100%;
}

.blog-form textarea {
    resize: vertical;
}

.blog-form > div > label + input,
.blog-form > div > label + textarea {
    margin: 8px 0 0;
}

.paddened {
    padding: 0 32px;
}

.login-register-separator > div + div {
    margin: 16px 0 0;
}

/* Comments */
.comments {
    font-family: 'InterVariable', 'Trebuchet MS', 'sans-serif';
    padding: 0 32px;
}

.comments-title-add {
    display: flex;
    align-items: center;
}

.comments-title-add > button {
    font-size: 20px;
    margin: 0 0 16px 16px;
}

.comments > .comment + .comment {
    margin: 16px 0 0;
}

.comments h3 {
    margin: 0 0 16px;
    font-weight: bold;
}

.comment {
    background-color: hsla(209, 20%, 29%);
    border: 2px solid #e8fffc;
    border-radius: 8px;
    padding: 16px;
}

.comment-content {

}

.comment-publish-date {
    font-style: italic;
}

.comment > * {
    margin: 0;
}

.comment > * + * {
    margin: 8px 0 0;
}