:root {
  color-scheme: light dark;
  --light-bg: snow;
  --light-color: black;
  --dark-bg: black;
  --dark-color: snow;
  --dark-green: #98971a;
  --light-green: #b8bb26;
  --dark-purple: #b16286;
  --light-purple: #d3869b;
  --dark-aqua: #689d6a;
}

@font-face {
  font-family: FiraCode; 
  src: url('./FiraCodeNerdFontMono-Regular.ttf'); 
}

header {
    background-color: light-dark(var(--light-bg), var(--dark-bg));
    position: sticky;
    top: 0;
}
footer {
    position: sticky;
    bottom: 0;
}

.header-pad {padding: 0em 2em;}

* {
  /* background-color: light-dark(var(--light-bg), var(--dark-bg));  */
  color: light-dark(var(--light-color), var(--dark-color));
  font-family: FiraCode;
  font-size: 14px;
}

.halftrans {
    background-color: light-dark(rgba(255,250,250,0.8),rgba(0,0,0,0.6));
}
.notrans {
    background-color: light-dark(var(--light-bg), var(--dark-bg));
}

body.bg1 {
    background-image: light-dark(url('./kraav_bg_L.png'),url('./kraav_bg.png'));
    background-repeat: repeat;
} 

/* body.bg2 {
    background: url('./birchL.png') left top repeat-y,
    url('./birchR.png') right top repeat-y,
    light-dark(var(--light-bg), var(--dark-bg));
}   */


body.bgC {
    background-color: light-dark(var(--light-bg), var(--dark-bg));
}

.outer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.listy {
    height: 100%;
    width: 100%;
    position: relative;
    align-items: baseline;
    gap: 1em;
    margin: auto;
}

.inner {
    display: flex;
    justify-content: center;
    margin: 2em;
    max-width: 900px;
}

.centered {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
}

.innersq {
    text-wrap: wrap;
    align-self: center;
    margin-top: 1em;
    padding-right: 1.2em;
    padding-left: 1.2em;
    border: 5px double light-dark(#333, #ddd);
}

.gallerygrid {
    width: min(80%, 800px);
    /* height: min(80%, 800px); */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem; 
}

 .gridsubele img {
  width: 100%;
  height: auto;
  object-fit: cover;
} 

.gridele {
    display: grid;
    grid-column: 2 / 2;
    grid-row: 1 / 1;
    grid-template-rows: 1fr 1fr;
    gap: 2rem;
}
.gridsubele {
    align-self: center;
}

fieldset {
    justify-self: center;
}

p {text-align: center;}

a:link {color: var(--dark-green);}
a:hover {color: var(--light-green);}
a:visited {color: var(--dark-purple);}
a:visited:hover {color: var(--light-purple);}
a:active {color: var(--dark-aqua);}

img {
    width: stretch;
    /* max-width: 500px; */
    padding: 3px;
    border: 2px solid light-dark(#333, #ddd);
}

img.exwide {max-width: 600px;}
img.wide {max-width: 500px;}
img.tall {max-width: 400px;}
img.thumb.tall {max-width: 340px; border: none; padding: 0px;}
img.thumb.wide {max-width: 340px; border: none; padding: 0px;} 

.middle {
    height: 100%;
    width: 100%;
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.centerbox {
    position: relative;
    height: 500px;
    width: 500px;
}

.NW { 
    background: transparent;
    display: flex;
    position: absolute;
    top: 30%;
    left: 20%;
    z-index: 1;
}

.SE { 
    background: transparent;
    display: flex;
    position: absolute;
    top: 45%;
    left: 60%;
    z-index: 2;
}


.left {text-align: left;}
.right {float: right;}

.sideborder {
    background-color: light-dark(var(--light-bg), var(--dark-bg)); 
    border-left: 5px double var(--dark-green);
    border-right: 5px double var(--dark-green);
    border-top: 2px solid var(--dark-green);
    border-bottom: 2px solid var(--dark-green);
    padding: 0em 2em 0em 2em;
}

.upborder {
    width: 300px;
    border: none;
    border-top: 5px double var(--dark-green);
}

.galleryborder {
    border: 2px solid var(--dark-green);
}

.galleryborder:hover {
    border: 2px solid var(--light-green);
}
.galleryborder > legend:hover {color: var(--light-green);}

legend {background-color: light-dark(var(--light-bg), var(--dark-bg));}

@media (width <= 481px), screen and (orientation: portrait) {
  .outer {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .inner {
        flex-direction: column;
        justify-content: center;
        width: 91%;
    }

    .upborder {
        margin: auto;
    }

    .sideborder {
    padding: 0.5em 2.5em 0.5em 2.5em;
}
}

@media (width >= 800px), screen and (orientation: portrait) {
    img {
        margin: auto 1em;
    }
}

@media (width < 800px), screen and (orientation: portrait) {
    .inner {
        margin: 1em auto;
    }
    img {
        margin: auto;
    }
}