/* COLORS, IMAGES, AND FONTS */
:root {
    /* FONTS */
    --bodyfont: Tahoma, Arial, sans-serif;
    --headerfont: "Century Gothic", Futura, sans-serif;

    /* COLORS */
    --background-color:#F4EFFA; /*Background color*/
    --background: var(--background-color); /*You can add an image here using the usual CSS shorthand: url(PATH TO IMAGE)*/
    --color:#2F184B; /*Text color*/

    /* Header background image, using the usual CSS shorthand. Experiment with placements! */
    --headerbackground: #F4EFFA url(handspun-autumn.jpeg) no-repeat center; 
    
    /* Navigation buttons */
    --nav:#C8B1E4; /*Background color*/
    --navcolor:#2F184B; /*Text color*/
    --navhover:#F4EFFA; /*Hover background*/
    --navhovercolor:#2F184B;/*Text color on hover*/

    /* Body links */
    --link:#532B88;
    --linkhover:#9B72CF;
    
    /* Accent colors */
    --accent:#532B88;
    --borders:#532B88;
}

@media screen and (prefers-color-scheme: dark) {
    :root {
        --background-color:#2F184B;
        --background: var(--background-color);
        --color:#F4EFFA;
        
        --nav:#C8B1E4;
        --navcolor:#2F184B;
        --navhover:#F4EFFA;
        --navhovercolor:#2F184B;
        
        --link:#C8B1E4;
        --linkhover:#F4EFFA;
        
        --accent:#C8B1E4;
        --borders:#C8B1E4;
    }
}

* { margin:0; padding:0;  transition:color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease; }
img { max-width:100%; }

body {
    background:var(--background);
    color:var(--color);
    font:1.05rem var(--bodyfont);
    line-height:1.5;
    letter-spacing:0.2px;
}

header {
    background:var(--background);
    background-size:cover;
    height:150px;
    padding:30px;
    text-align: center;
    font: 3em var(--headerfont);
    font-weight:bold;
    margin-bottom:5px;
    border-bottom:2px dotted var(--borders);
}

#container {
    max-width:900px;
    width:calc(100% - 40px);
    margin:auto;
    display:flex;
    flex-wrap:wrap;

}

#sidebar {
    padding:5px;
    flex: 1 1 calc(20% - 30px);
    display:flex;
    flex-wrap:nowrap;
    justify-content: center;
}

.menu {
    position:sticky;
    top:20px;
  
}

.menu li {
    list-style:none;
    display:inline;
    font:1.4rem var(--headerfont);
  
}

.menu a {
    display:inline;
    text-decoration:none;
    padding:10px;
    background:var(--nav);
    color:var(--navcolor);
    margin-bottom:5px;
    border-radius:5px;
}

.menu a:hover {
    background:var(--navhover);
    color:var(--navhovercolor);
}

main {
    padding:15px;
    flex: 1 1 calc(80% - 30px);
  margin-left:30%;

}

main p {
    margin: .5em 0 .5em 0;
  width:60%;

}

main a, footer a {
    color:var(--link);
}

main a:hover, footer a:hover {
    color:var(--linkhover);
}

main li {
    margin-left:30px;
}

main h1 {
    font: 2em var(--headerfont);
    font-weight:bold;
    border-bottom: 3px dotted var(--borders);
    margin-bottom:5px;
}

main h1::first-letter {
    font-size:1.1em;
    color:var(--accent);
}

main h2 {
    font: 1.8em var(--headerfont);
    margin-bottom:5px;
}

main h3 {
    font:1.5em var(--headerfont);
    margin-bottom:5px;
}

main summary {
    cursor:pointer;
    margin: 5px 0px 5px 0px;
}

main details {
    padding:10px;
    background:rgb(0,0,0,0.06);
    margin:5px 0 5px 0;
    border-radius:5px;
}

main input, textarea, select, button { 
	background: var(--background-color);
	color: var(--color);
	font: 1rem var(--bodyfont);
	border: 1px solid var(--borders);
	padding: 8px;
	margin: 2px;
}

/* GALLERY STUFF */

/* GALLERY WRAPPER */
.gallery {
  /* GRID LAYOUT - 4 IMAGES PER ROW */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 20px;
  
  /* OPTIONAL WIDTH RESTRICT */
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
}

/* GALLERY IMAGES */
.gallery img {
  /* DIMENSION */
  width: 100%;
  padding: 10px;
 
  /* COLORS */
  background:var(--background-color);
 
  /* IMAGE RESIZE */
  /* cover | contain | fill | scale-down */
  object-fit: cover;
}


footer {
    text-align:center;
    font-size:.9em;
    flex: 1 1 calc(100% - 20px);
    padding:10px;
    border-top:2px dotted var(--borders);
}

.visually-hidden {  
    position: absolute;
    clip: rect(0 0 0 0);
    visibility: hidden;
    opacity: 0;
}

#skip a {
    position:absolute;
    display:inline-block;
    left:0px;
    top:-1000px;
    overflow:hidden;
    transition:top 0.5s ease;
    background:var(--background);
    color:var(--link);
    z-index:1000;
    padding:5px;
}
 
#skip a:focus {
    top: 0;
    transition:top 0.5s ease;
}

@media screen and (max-width:799px) {
	header {
        height:150px;
        font: 2.5em var(--headerfont);
    }
    
    #container {
        display:block;
    }
    
    #sidebar {
        text-align:center;
        margin:0;
        padding:5px;
    }
    
    main {
    padding:15px;
    flex: 1 1 calc(80% - 30px);
    margin-left:5%;

    }

    main p {
    margin: .5em 0 .5em 0;
    width:90%;

    }
    
    .menu {
        position:relative;
    }
    
    .menu li, .menu a {
        display:inline-block;
        padding:5px;
        margin:0;
    }
    
    .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width:500px) {
	header {
        height:150px;
        font: 2em var(--headerfont);
    }
    
    #container {
        display:block;
    }
    
    #sidebar {
        text-align:center;
        margin:0;
        padding:5px;
    }
    
    main {
    padding:15px;
    flex: 1 1 calc(80% - 30px);
    margin-left:1%;

    }

    main p {
    margin: .5em 0 .5em 0;
    width:100%;

    }
    
    .menu {
        position:relative;
    }
    
    .menu li, .menu a {
        display:inline-block;
        padding:5px;
        margin:0;
    }
    
    .gallery {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}