html, body, div, span, object, nav
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size: 16px;
    vertical-align:baseline;
    width: 100%;
}

@font-face {
  font-family: newsPrint;
  src: url('../fonts/OldNewspaperTypes.ttf');
}

@font-face {
  font-family: autumnLeaves;
  src: url('../fonts/Autumn Leaves.ttf');
}
@font-face {
  font-family: bobcat;
  src: url('../fonts/bobcat.ttf');
}
@font-face {
  font-family: lazyDay;
  src: url('../fonts/LAZYDAY.TTF');
}

:root {
  --popBlue: #32C4D5;
  --popPink: #d472bf; /* Update later - This is a placeholder 9/11/2023 */

  --popBlueshade: #32C4D52f;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/*Floats */
.left {float: left;}
.right {float: right;}

/* Special */
.clear {clear: both;}
.clearleft {clear: left;}
.clearright {clear: right;}

body{background: #ddebee65; }

nav {
  position: fixed; top: 0; width: 100%; 
  line-height: 2rem; 
  background: peru; 
  display: flex;
  background-color: #333;}

header {
  width: 100%; margin: 1em auto; font-size: 1.5em; padding: 1em 5em; 
  text-align: center;
  background: var(--popBlue);
  color: white;
  border-bottom: solid .25em #33333366;
}

footer {
    width: 100%; margin: 1em auto; padding: 1em 5em; 
    font-size: 1.5em;
    text-align: center;
    background: var(--popBlue);
    color: white;
  }

section {
  position: relative;  
  max-width: 75%; 
  min-width: min-content;
    background: #ffffff99;
  margin: 0 auto; 
  font-size: initial; 
  padding: 2rem 3rem; 
  border-bottom-left-radius: 5rem; 
  border-top-right-radius: 5rem; 
}

article {list-style: none; margin:auto; align-content: space-between; line-height: 1.5em;}

.fakeimg {max-width: 300px;}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */

.flex-container {
  display: flex;
  height: fit-content;
  flex-wrap: wrap;
  flex-flow: row wrap;

}

.flex-container > article {  
  background:var(--popBlueshade);
  padding:1em;
  margin:1em;
  flex: 0 1 300px;
  align-self: stretch;
  border-bottom-left-radius: 5rem;
  border-top-right-radius: 5rem;
}

#app {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: 'header' 'section' 'footer';
}

#app > header {grid-area: header;}
#app > section {grid-area: section;}
#app > footer {grid-area: footer;}


.flil {
  background-color: #f1f1f1;
  padding: 10px;
  flex: 50%;
}

.flir{
  background-color: dodgerblue;
  padding: 10px;
  flex: 50%;
}



/*  */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
  border: solid 2px blueviolet;
}

/* Main column */
.primary {
  flex: 70%;
  background-color: #ffffff22;
  padding: 20px;
  border: solid 2px rgb(67, 98, 210);
}

/* Column container */
.row {
  display: flex;
  flex-wrap: wrap;
  border: solid 2px rgb(161, 140, 19);
  position: inherit;
  min-height: fit-content;
}

.icon-help{ width: 1%; }
.file-type-icon{ width: 1%; }

h1 {font: 4em autumnLeaves, Garamond, serif; }
h2 {font: 2.5em lazyDay, Garamond, serif;}
h3 {font: 1.75em bobcat, Garamond, serif; }
p {font: 1rem newsPrint, Tahoma, Verdana, sans-serif;}

/* Style the navigation bar links */
nav a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

/* Change color on hover */
nav a:hover {
  background-color: peru;
  color: whitesmoke;
  border: 1px solid #000; 

  border-bottom: none;
  text-decoration: none;
  padding-top: 1pt;
}

  nav ul {list-style-type: none; }
  nav ul li {
      float:left; 
      width:auto; 
      height: 2em; 
      border: 1px solid peru; 
      padding-top: 1pt;
      border-top: none;
      border-bottom: none;
      text-decoration: none;}

      /*
.blocky {display:inline-block; width: 350px; height: 300px; background:rgba(153, 120, 228, 5); margin-block-start: 1%;}

.blocky div {display: block; border-radius: 25%; resize: both; overflow: auto;} */



/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 900px) {

  .flir,
  .flil {
    flex: 100%;
  }
  .flex-container>article {
    flex: 1 1 auto;
    align-items: stretch;
  }
}

/* end @media 800 */

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {

  .row,
  nav {
    flex-direction: column;
  }

    .flex-container>article {
      flex: 1 1 auto;
    }
} /* end @media 700 */



article a img {
  --b: 8px;
  /* border thickness*/
  --s: 60px;
  /* size of the corner*/
  --g: 14px;
  /* the gap*/
  --c: #32C4D5;

  padding: calc(var(--b) + var(--g));
  background-image:
    conic-gradient(from 90deg at top var(--b) left var(--b), #0000 25%, var(--c) 0),
    conic-gradient(from -90deg at bottom var(--b) right var(--b), #0000 25%, var(--c) 0);
  background-position:
    var(--_p, 0%) var(--_p, 0%),
    calc(100% - var(--_p, 0%)) calc(100% - var(--_p, 0%));
  background-size: var(--s) var(--s);
  background-repeat: no-repeat;
  cursor: pointer;
  transition:
    background-position .3s var(--_i, .3s),
    background-size .3s calc(.3s - var(--_i, .3s));
}

article a img.alt {
  background-image:
    conic-gradient(from 180deg at top var(--b) right var(--b), #0000 25%, var(--c) 0),
    conic-gradient(from 0deg at bottom var(--b) left var(--b), #0000 25%, var(--c) 0);
  background-position:
    calc(100% - var(--_p, 0%)) var(--_p, 0%),
    var(--_p, 0%) calc(100% - var(--_p, 0%));
}

article a img:hover {
  background-size: calc(100% - var(--g)) calc(100% - var(--g));
  --_p: calc(var(--g)/2);
  --_i: 0s;
}



/* ANIMATIONS */

.marquee {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  height: 2em; 
  background: orange;
}

.marquee span {
  position: absolute;
  width: auto;
  height: fit-content;
  line-height: normal;
  display: inline-block;
  padding-left: 100%;

  animation: scroll-left 2s linear infinite;
  color: white;
}

.marquee2 span {
  animation-delay: 2s;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}