:root {
    --backgroundImage: url(../images/cairovercoat_heart_aspect.png); /* Change the URL to change your background image! */
    --headerImage: url(../images/workdailylog.jpg); /* Change the URL to change the header image */
    
    --borderColor: white; /* Change this to change the border color*/

    --headerText: white; /* Change this to change the header text color*/

    --navLinkColor: white; /* Change this to change the link color in the navigation */
    --navBackgroundColor: #e7549a; /* Change this to change the navigation background color */
    --navHoverBackground: #9f1b67; /* Change this to change the navigation hover background color */
    --navHoverText: white; /* Change this to change the navigation hover text color */
    
    --mainTextColor: white;
    --mainBackgroundColor: #9f1b67; /* Change this color to change the color of the main section background color*/

    --footerTextColor: white;
    --footerBackgroundColor: #e7549a; /* Change this color to change the color of the footer background color */

    --otherLinks: white; /* Change this color to change the color of all other links */
    --blockquoteBackgroundColor: #e7549a; /* Change this color to change the color of the blocktext background */
}

body {
    cursor: url("../images/cursor_nrm-moved_toastyglow.png"), auto;
    background: var(--backgroundImage);
    font-family: 'Courier New', monospace;
}

.container {
    width: 800px;
    margin: auto;
}

header {
    font-family: 'Brush Script MT', cursive;
    background-image: var(--headerImage);
    background-position: center;
    background-size: cover;
    color: var(--headerText);
    font-size: 75px;
    text-align: center;
    max-width: 100%;
    border: var(--borderColor) solid 2px;
    border-radius: 15px 15px 0 0;
    padding: 50px;
}

nav {
    border: var(--borderColor) solid 2px;
    border-top: 0;
    background-color: var(--navBackgroundColor);
}

nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

nav li a{
    display: block;
    color: var(--navLinkColor);
    list-style-type: none;
    padding: 15px;
    max-width: fit-content;
}

nav li a:hover {
    background-color: var(--navHoverBackground);
    color: var(--navHoverText);
}

a {
    color: var(--otherLinks);
}

main {
    background-color: var(--mainBackgroundColor);
    border: var(--borderColor) solid 2px;
    border-top: 0;
    border-bottom: 0;
    max-width: 100%;
    color: var(--mainTextColor);
    height: 550px;
    display: flex;
}

.bio {
    order: 1; /* Swap the order for .bio and .content if you want the bio on the other side */
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    width: 200px;
    text-align: center;
}

.bio::-webkit-scrollbar { 
    display: none;  /* Older Safari and Chromium */
}

.bio th {
    padding: 10px 0;
}

.bio td {
    border-top: var(--borderColor) solid 2px;
    padding: 5px 0;
}

.icon {
    border: var(--borderColor) solid 2px;
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

.content {
    order: 2; /* Swap the order for .bio and .content if you want the bio on the other side */
    border-left: var(--borderColor) solid 2px; /* If you swap the side the .bio is on, swap the side the border is on to either the right or left */
    padding: 10px;
    width: 600px;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.content::-webkit-scrollbar { 
    display: none;  /* Older Safari and Chromium */
}

.content table {
    border: 0;
    border-collapse: collapse;
}
.content th, .content td {
    border: var(--borderColor) solid 2px;
    padding: 5px;
}

.gallery th, .gallery td {
    border: 0;
}

.table img {
    max-width: 150px;
}

img {
    max-width: 100%;
    display: block;
    margin: auto;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Brush Script MT', cursive;;
}

blockquote{
    background: var(--blockquoteBackgroundColor);
    border: var(--borderColor) solid 2px;
    border-radius: 15px;
    padding: 15px;
}

footer {
    color: var(--footerTextColor);
    text-align: center;
    border: var(--borderColor) solid 2px;
    border-radius: 0 0 15px 15px;
    background-color: var(--footerBackgroundColor);
    max-width: 100%;
}

.scarf {
    position: absolute;
    right: 4%; /* Change this to left or right depending on which side you want the scarf on */
    top: -30px;
}

.scarf:hover {
    position: absolute;
    top: 0;
}

/*Readmore code tweaked from here: https://nomnomnami.com/templates/periwinkle/ */
details > summary {
    cursor:pointer;
    text-align: center;
    padding: .6em 0;
    margin: .6em  auto;
}

.readmore summary {
    font-weight: bold;
    color: var(--mainTextColor);
    list-style: none;
}
.readmore summary::-webkit-details-marker {
    display: none;
}
.readmore[open] > summary {
    border-bottom: 5px dotted var(--borderColoro);
}

@media screen and (max-width: 850px) {
    body {
        margin: 0;
    }
    
    .container {
        width: 100%;
        margin: 0;
    }
    
    header  {
        font-size: 25px;
    }
    
    nav {
        text-align: center;
    }
    
    nav ul {
        max-width: 100%;
        margin: 0;
        padding: 0;
        display: block;
    }
    
    nav li a {
        padding: 10px;
        margin: auto;
        max-width: 100%;
    }
    
    main {
        display: flex;
        flex-flow: column;
        margin: 0;
        height: auto;
    }
    
    .bio {
        order: 2;
        margin: auto;
        max-width: 100%;
        display: flex;
        justify-content: center;
        border: var(--borderColor) solid 2px;
        border-top: 0;
        border-collapse: separate;
        border-spacing: 15px;
    }
    
    .content {
        order: 1;
        width: 96%;
        margin: auto;
        border-left: 0;
        border-bottom: var(--borderColor) solid 2px;
    }
    
    .scarf {
        margin: 0;
    }
    
}