/*
    main.css 2021/06/19 2020/09/09 2020/01/30 2019/11/19 gene at wedu dot biz
*/

*, *::before, *::after {box-sizing: border-box;}
body {
    background-color: #fff;
    color: #000;
    margin: 0;
}
#page {
    /* height: 100vh; */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 'header' 'main' 'footer';
    /* grid-template-rows: 1fr auto;
    grid-template-areas: 'main' 'footer'; */
}
#page > header {
    grid-area: header;
}/* #1E90FF; */
#page > main {
    /* grid-area: main;
       change from grid-area to grid in a grid  */
    display: grid;
    overflow: auto;
    /*  Causes <main> element to scroll,
     while keeping <header> and <footer> elements in place. */
    /* grid-template-columns: 1fr minmax(0, 600px) 1fr; */
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}
/* #page > main #dialog {
    grid-area: dialog; /* 1 / 1 / 4 / 1;
} */
#page > main article {
    /* row-start / col-start / row-end / col-end */
    /* grid-area: 1 / 2 / 1 / 3; */
}
#page > footer {
    grid-area: footer;
    /* if footer at end of main use: 2 / 1 / 2 / 4 */
}
/* 09/14/2020 NOT Needed
::-moz-selection { Code for Firefox
  color: red;
  background: yellow;
} */

::selection {
  color: red;
  background: yellow;
}
/* h2:after {  content: ' \00A7';} */

a {
    display:inline-block;
    font-size:1.25em;
    font-family: sans-serif;
    padding:0.875em 1.25em; /* 14px 18px; */
    text-decoration-color:#1E90FF;
}
a:link ,
a:visited ,
a:active {color:#000;} /* #003939 dark green; #00FFFF;*/
a:focus {outline: 3px dashed orange; outline-offset: 10px;}
a:hover {
    background-color: azure;
    color: #1E90FF;
    font-size:1.375em;
    padding: 0.727em 0.40625em; /* 10px 1px 13px 0; */
    opacity: 0.6;
}

header {
    background-color: #000;
    color: #fff;
    font-family: sans-serif;
    margin: 0 0 1rem 0;
    padding-bottom: clamp(1.2rem, -0.75rem + 4.333vw, 4rem);
    text-align: center;
    width: 100%;
}
/* #1E90FF; color: rgba(0, 0, 0,0.3); */
.title {
    /*color: #1E90FF;*/
    display: inline-block;
	/* font-size: clamp(1.2rem, -0.875rem + 9.333vw, 8rem); */
	font-size: clamp(1.7rem, 8vw, 12rem);
    font-weight: 700;
    line-height: 1em; /* CANNOT be rem */
    margin: 0;
}

.dropcase {vertical-align: text-bottom;}
.raisecase {vertical-align: text-top;}

.racer {
    display: grid;
    /*background-image: radial-gradient(hsl(204, 89%, 12%), transpaarent 65%);*/
    grid-template-areas: "title", "text", "image";
    gap: 1rem
    padding: clamp(1rem, 6vi, 3rem);
    position: relative;
    overflow: hidden;
}

.racer h1 {grid-area: title;}
.racer p {grid-area: text;}
.racer img {grid-area: image; filter: drop-shadow(0 0 1rem #000);}

@media (min-width: 540px){
    racer {
        grid-template-areas: revert;
        grid-template-rows:
            [title-start] auto
            [image-start] 50px
            [title-end text-start] auto
            [image-end text-end];
        grid-template-columns:
            [title-start text-start] 1fr 1fr;
    }
}

.centered {margin: 0 auto;}
.centerItem {text-align: center;}
.content {
    margin: 0.5em auto;
    padding: 0.5em;
    position: relative;
    max-width: 977px;
    /*display: grid;
    grid-template-columns: repeat(auto-fit,minmax(256px,1fr));
    grid-gap: 1em;*/
}

.content p {
    display: inline-block;
}
.content h2 {margin:auto;}

.content2 {
    margin: 0 auto;
    padding: 0.4em;
    max-width: 729px;
}

.indent {margin:0 auto;max-width:31em;}
.bold {font-weight:bold;}
.boldH2 {font-size:1.1em; font-weight:bold;}
.border1 {border:1px solid;}
.emicon {width:28px; vertical-align:middle;}
.noBotMar {margin-bottom:0;}
.noTopMar {margin-top:0;}
.menu {list-style-type:none; padding:0;}
.menu li {display:inline-block;}
.onRight {margin:0 auto;max-width:977px;text-align:right;}
/* {position:absolute; right:0.1em; top:-2.1em; z-index:37;}
.onRight a {padding:0.4em;} */

.figure-wrapper {margin: 0 1em;}
figure {
    margin: 0;
    text-align: center;
}

img {width: 100%; height: auto; max-width: 100%;}
.vid {
     margin:0 auto;
     height: auto;
     overflow-x: scroll;
     resize: both;
     max-width: 41vw;
     min-width: 320px;
}

/* border: #000 1px dashed; */
.img11 {max-width: 200px;}

#dialog {
    display: none;
    background: rgba(0, 0, 0, 0.27);/*  */
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: scroll;
    overscroll-behavior: contain;
} /* will-change: opacity;    z-index: 4747; */


/* Images in gridBox */

.img02, .img03, .img04 {
    margin:0 auto;
    min-width: 300px;
    height: 100%;
    object-fit:cover;
}
/* max-width: 550px; max-width: 305px; light blue border; width: 305px; height: 200px; min-width:280px;
figcaption {max-width: 305px;}

aspectRatio = originalHeight / originalWidth
newHeight = newWidth * aspectRatio

*/

/* .img02:hover {opacity: 0.3;}
.img03:hover {
    background-image: url('../images/IMG_20191119_101828.jpg');
} */
@media (min-width: 1081px) {
    .img01 {width: 70%;}
}
/*
.img04 ~ .popcapt,
.img03 ~ .popcapt,
.img02 ~ .popcapt {display:none;}

.img04:hover ~ .popcapt,
.img03:hover ~ .popcapt,
.img02:hover ~ .popcapt {display: block;}

.img04:hover ~ #dialog[data-page*="coverpage"],
.img03:hover ~ #dialog[data-page*="coverpage"],
.img02:hover ~ #dialog[data-page*="coverpage"] {display: block !important;}
*/
.wrapper {margin: 0 auto; position: relative;}

.gridBox {
    border: 2px solid #fff;
    margin: 1em;
    padding-top: 1em;
}/* place border around grid */

 /* reduces to keep 3 across */
.gridContent {
    display: grid;
    grid-template-columns: repeat(3, minmax(300px, 1fr));
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-template-columns: repeat(auto-fill, minmax(300px, 32%));
    grid-template-columns: minmax(1fr, repeat(auto-fill));
    grid-template-columns: repeat(auto-fit, minmax(256px,1fr));
      /* Responsive Layouts, NO Media Queries! */
    grid-template-rows: auto;
    /*grid-gap: 0.6em;*/
    grid-auto-flow: dense;
    /*justify-content: center;*/
    align-content: center;
}
.gridContent > img {
    margin: 0 auto;
    max-width: 268px;
    min-width: 92px;
}
.gitem {
    position: relative;
    display: block;
    transition: transform 500ms;
    flex: 1 1 0px;
}
 /* focus for keyboard */
.gridContent .gitem:focus,
.gridContent .gitem:hover,
.gitem img:hover {
    max-width: 100%;
    transform: scale(var(--scaleSize,2.0));
    z-index: 7777;
}
.gitem img {
    display: block;
    max-width: 100%;
}
/* move right, use half of scale value */
.gitem:focus ~ .gitem,
.gitem:hover ~ .gitem {
    transform: translateX(40%);
    overflow: hidden;
}
.gridContent .gitem1:hover {
    transform: scale(var(--scaleSize,1.5)) translateX(25%);
}
/* move left */
.gridContent:focus-within .gitem2,
.gridContent:hover .gitem2 {
    transform: scale(var(--scaleSize,1.5)) translateX(-40%);
}
.gridContent .gitem3:hover {
    transform: scale(var(--scaleSize,1.5)) translateX(-25%);
}
/* A grid with a .6em gap between each column (3) and row.
   Using the repeat creats a responsive layout with no media queries.

   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
       col minimum width 150px, each col equal width (1fr)
       and auto-fill as many columns that can fit.
*/

.container-ss {
    aspect-ratio: 4 / 3;
	background-color: oldlace;
	border: 2px solid #1E90FF;
	/*height: clamp(200px, 49vh, 416px);*/
	overflow-x: scroll;
	scroll-snap-type: x mandatory;
} /* color: #fff;
	margin: 2vh auto;
	width: 90vw; */


.container {
  display: grid;
  grid-gap: 0.2em;
  grid-template-columns: auto auto auto;
  margin: 1em auto;
  text-align: center;
}
.container > img {
    max-width: 100%;
    min-width: 88px;
} /* min keeps all images the same size. */

/* On hover scale up an item and push other item left or right.
    Scale of 150%, the translateX should be half of the added space (25%).
    focus & focus-within pseudo-classes support Keyboard navigation.
*/
body {
    overflow-x: hidden;
}

.item {
  position: relative;
  display: block;
  transition: transform 500ms;
} /* flex: 1 1 0; */
.item:hover {
    z-index: 23;
}

.container:focus-within .item,
.container:hover .item {
    transform: translateX(-16%);
}/* Move left */

.item:focus ~ .item,
.item:hover ~ .item {
    transform: translateX(16%);
}/* Move right */

.container .item:focus,
.container .item:hover {
  transform: scale(var(--scaleSize,1.5));
}
.container .item-first:hover {transform: scale(var(--scaleSize,1.5)) translateX(16%);}
.container .item-last:hover {transform: scale(var(--scaleSize,1.5)) translateX(-16%);}

.item img {
  display: block;
  max-width: 100%;
}
/* A later 'transform' cancels a previous.
<div class="flex-container>
    <a class="item" href="#whatever"><img src="..."></a>
    ...
</div>
*/

:root {
    --scaleSize: 2.0;
}
@media (min-width: 51em) {
    :root {--scaleSize: 1.5;}
}
@media (min-width: 84em) {
    :root {--scaleSize: 1.2;}
}

/* If you tap on something that has a :hover state but you do not
 leave the page then, on a mobile device, there is a chance that
  :hover state "sticks."
 The solution, or trick, is a new(ish) "CSS4" media query that
 allows you only to apply styles on devices with hover capability. */
@media (hover: hover) {
    .popcapt:hover {
    border: 3px solid green; /* solves sticky problem */
  }
}
/* main*.css

    Typography imported from Google Fonts

//@import url('https://fonts.googleapis.com/css?family=Playfair+Display|Source+Sans+Pro:200,400');

//h1, h2, h3, h4, h5, h6 {font-family: 'Playfair Display', serif;}

//p, a {font-family: 'Source Sans Pro', sans-serif;}

//<link rel="stylesheet"href="https://fonts.googleapis.com/css2?family=Sigmar">

** Removed 09/08/24 @import url('https://fonts.googleapis.com/css2?family=Sigmar');
*/