:root {
    /*--header-image: url('https://sadhost.neocities.org/images/layouts/wp.jpeg');*/
    --body-bg-image: url('https://squidmo.neocities.org/bolt-tile-bg-sparse.png');
    --bar-img: url('https://squidmo.neocities.org/sidebar-header.png');

    /* colors */
    --content: #0E4749;
    --pop: #c2ff00;
    --dark: #002626;
    --medium: #0e4749;
    --lightest: #b4c5e4;
    --lightish: #8da7be;
    --shadow: rgba(0, 38, 38, 0.50);
    /*--pink: #EA86A7;*/
    --pink: #FFBD07;
    --pale-pink: #FFD666;
    --white: #FFFFFF;
    
    
    /* base palette: https://coolors.co/002626-0e4749-c2ff00-b4c5e4-8da7be */
}

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-Regular.ttf');
}

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-Bold.ttf');
    font-weight: bold;
}

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-Italic.ttf');
    font-style: italic;
}

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf');
    font-style: italic;
    font-weight: bold;
}

body {
    font-family: 'Nunito', sans-serif;
    margin: auto;
    background-color: var(--medium);
    background-size: 65px;
    color: var(--white);
    background-image: var(--body-bg-image);
    width: 80%;
}

* {
    box-sizing: border-box;
}

#header {
    width: 100%;
    background-color: var(--medium);
    height: 20px;
    background-image: var(--bar-img);
    background-repeat: repeat-x;
    /*background-image: var(--header-image);*/
    /*background-image: linear-gradient(to top, rgba(255,0,0,0), rgba(194, 255, 0, 0.25));*/
    /*background-size: 100%;*/
}

header ul {
 display: flex;
 align-self: stretch;
 /*padding-left: 0px;*/
}

#navbar {
    height: auto;
    background-color: var(--medium);
    width: 100%;
}

#navbar ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-evenly;
}

#navbar li {
    padding-top: 2px;
    padding-bottom: 2px;
    flex: 1;
    text-align: center;
    font-family: "Source Code Pro", monospace;
    font-optical-sizing: auto;
    font-weight: 200;
}

/* nav links */
#navbar li a {
    color: var(--pink);
    /*font-size: 16px;*/
    font-size: clamp(10px, 2vw, 48px);
    text-decoration: none;
    position: relative;
    display: inline-block;
    overflow: hidden;
    z-index: 0;
    padding-left: 4px;
    padding-right: 4px;
}

#navbar li a::before {
    background-color: var(--pink);
    content: "";
    position: absolute;
    inset: 0;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s ease-in-out;
    z-index: -1;
}

#navbar li a:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

#navbar li a:hover {
    color: var(--dark);
    text-decoration: none;
    transition: color 0.4s ease-in-out;
}

#container {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 10px;
}

aside {
    background-color: var(--medium);
    flex-grow: 1;
    flex-basis: 20%;
    padding: 20px;
    font-size: x-small;
    background-image: var(--bar-img);
    background-repeat: repeat-x;
    padding-top: 25px;
    /*box-shadow: var(--shadow) 5px 5px;*/
}

main {
    background-color: var(--medium);
    flex: 1;
    flex-grow: 4;
    flex-basis: 40%;
    padding: 20px;
    font-size: small;
    order: 2;
    background-image: var(--bar-img);
    background-repeat: repeat-x;
    padding-top: 25px;
}

#leftSidebar {
    order: 1;
}

#who {
  align-items: flex-end;
}

#rightSidebar {
    order: 3;
}

footer {
    background-color: var(--medium);
    /* background color for footer */
    width: 100%;
    height: 40px;
    padding: 10px;
    text-align: center;
    /* this centers the footer text */
    background-image: var(--bar-img);
    background-repeat: repeat-x;
    padding-top: 25px;
    padding-bottom: 30px;
}

h1,
h2,
h3 {
    color: var(--lightish);
    font-family: "Source Code Pro", monospace;
    font-optical-sizing: auto;
    font-weight: 400;
}

h1 {
    font-size: 25px;
}

h1,
h2 {
    color: var(--pop);
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: var(--dark);
    text-underline-offset: 5px;
}

ul {
  padding-left: 15px;
}

strong {
    color: var(--lightest);
}

em {
  color: var(--dark);
}

/* non-nav links */
#container a {
    color: var(--pink);
    text-decoration: underline;
    text-decoration-style: wavy;
    text-underline-offset: 2px;
    text-decoration-color: var(--pop);
}

#container a:hover {
    color: var(--pop); 
}

.box {
    background-color: var(--medium);
    border: 3px double var(--pink);
    padding: 10px;
    padding-top: 1px;
    padding-bottom: 1px;
}

#topBar {
    width: 100%;
    height: 30px;
    padding: 10px;
    font-size: smaller;
    background-color: var(--medium);
}