/* These styles affect all pages on the site. */
*  { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  height: 100%;
}
body { 
  font-family: serif; 
  font-size: 14px; 
  line-height: 1;
  margin: 0; 
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  position: relative;
}


/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}
h1 {
  font-size: 5rem;
}
h2 {
  font-size: 2.5rem;
}
h3 {
  font-size: 2rem;
}


/* Paragraph Styles */
p, li { 
    font-size: 1.25rem;
    line-height: 1.75;
    margin-bottom: 1em;
    margin-top: 0;
}
a { 
    color: #5E085E; 
    font-weight: 700; 
    text-decoration: none; 
    transition: all 0.25s ease-in-out; 
}
a:hover, 
a:active, 
a:focus { 
    background-color: #ffdab9; 
    color: #3c042f; 
}
a:focus { 
    text-decoration: underline; 
}
    /* links with additional info for accessibility */
a.info, button.info {
    position: relative;   
}
a.info span.linkInfo, button.info span.linkInfo, label.linkInfo {
    background-color: #f4ccd1;
    color: #3c042f;
    font-size: 80%;
    font-style: italic;
    font-weight: normal;
    left: 20%;
    min-width: 14em;
    opacity: 0;
    padding: 0.25rem;
    position: absolute;
    text-align: center;
    text-transform: none;
    top: 90%;    
    transition: all 0.5s ease-in-out;
    visibility: hidden;
    width: auto;
}
a.info:hover span.linkInfo,
a.info:active span.linkInfo,
a.info:focus span.linkInfo {
    visibility: visible;
    opacity: 1;
}


/* Floating Navigation */
#floatingNav {
  position: fixed; 
  bottom: 1em;
  right: 1em;
  text-align: right;
}

/* Header Navigation */
#pageNav ul {
  list-style-type: none;
  padding-top: 1em;
  padding-bottom: 1em;
  padding-inline-start: 0;
  text-align: center;
  margin-bottom: 0;
}
#pageNav li {
  display: inline-block;
  margin-left: 1em;
  margin-right: 1em;
}
#pageNav li a {
  padding: 0.5em;
}




/* Font effects */
strong { 
    font-weight: 600; 
}
em { 
    font-style: italic; 
}
small { 
    font-size: 85%; 
}
.text-center {
    text-align: center;
}



/* Images, Videos and Figures */
img {
  display: block;
  width: 100%;
  margin: auto;
}
figure {
  display: inline-block;
  margin: 0;
  padding: 1em;
  border: 1px solid #666;
  background-color: #fff;
}
figure img {
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  border: 1px inset #eee;
}
figcaption {
  color: #222;
  font-size: 0.9rem;
  line-height: 1.25;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  text-align: center;
  letter-spacing: 1px;
}
video {
    max-width: 300px;
    width: 100%;
}


/* Lists */
ol {
    list-style-type: decimal;
    padding-inline-start: 1em;
}
ol > li {
    padding-left: 1em;
}
ul {
    list-style-type: disc;
    padding-inline-start: 2em;
}
li {
    display: list-item;
    list-style-position: outside;
    margin-bottom: 1em;
}
ul ul { margin-top: 0.75em; }



/* sections, asides and containers */
aside {
  width: 30%;
}
aside li {
  line-height: 1;
  font-size: 1rem;
}
aside h3 {
  margin-top: 0;
}
aside figcaption {
  margin-bottom: 0;
}

footer {
  padding: 2em 1em 4em;
  text-align: center;
}
footer p {
  font-size: 0.9rem;
  margin-bottom: 0.5em;
}

hr {
  margin: 1em auto 2em;
  width: 4em;
  border: 0;
  border-top: 2px solid #aaa;
}

section {
  padding: 3rem 2.5rem;
}

.flex-side {
  padding: 2em;
  background-color: rgba(255, 218, 185, 0.6);
  border: 1px solid #c2a68c;
}


/* inputs and buttons */
input[type="text"] {
  background-color: rgba(255,255,255,0.65);
  border: 1px solid #c2a68c;
  height: 2rem;
  max-width: 100%;
}
input[type="submit"], button, a#topLink {
  appearance: none;
  background-color: #ffb52e;
  border: 1px solid #b15200;
  color: #5E085E;
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  height: 2rem;
  line-height: 2rem;
  padding: 0 0.5rem;
  text-decoration: none;
  transition: all 0.25s ease-in-out; 
  vertical-align: middle;
}
input[type="submit"]:hover, input[type="submit"]:active, input[type="submit"]:focus, 
button:hover, button:active, button:focus, 
a#topLink:hover, a#topLink:active, a#topLink:focus {
    border-color: #80b3d9;
    background-color: #0064af;
    color: #fff;
}




/* gallery */
.gallery {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
/*.gallery > figure {
  width: calc(33.3333% - 1.5em);
  margin-left: 1em;
  margin-right: 1em;
}*/
.pod {
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 2em;
  width: calc(50% - 1em);
  padding: 1em;
  border: 1px solid;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  background-color: rgba(255, 226, 226, 0.6);
}
.gallery > figure:first-child, .pod:nth-child(2n+1) {
  margin-left: 0;
}
.gallery > figure:last-child, .pod:nth-child(2n) {
  margin-right: 0;
}
.pod p {
  font-size: 1rem;
}
.gallery figure {
  flex-basis: 33.3333%;
  flex-shrink: 0;
}
.pod figure {
  flex-basis: 50%;
  flex-shrink: 0;
}
.pod .pod-content {
  padding: 0 2em;
  width: 50%;
}
#gallery1 .gallery, #gallery2.gallery {
  flex-flow: row nowrap;
  gap: 1em;
  justify-content: space-between;
  width: calc(100% - 2em);
}


/* Utility Classes */
  /* column counts */
.colCount { column-count: 3; }

  /* show/hide */
.hidden { 
    display: none!important;
    opacity: 0; 
}
.sr-only {
    position: absolute;
    margin: -1px 0 0 -1px;
    padding: 0;
    display: block;
    width: 1px;
    height: 1px;
    font-size: 1px;
    line-height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
    outline: 0;
}
.inline-block {
    display: inline-block;
}



/* section customizations */
#intro, #bye {
  display: flex;
  flex-flow: row-reverse nowrap;
  justify-content: space-between;
  gap: 3em;
  align-items: center;
}
#intro {
  padding-top: 0;
}
#intro hr {
  margin-top: 0;
}
#bye {
  flex-flow: row nowrap;
}
#facts {
  background-color: rgba(217, 128, 217, 0.85);
  display: flex;
  flex-flow: row nowrap;
}
#facts > .flex-cont {
  width: 70%;
  padding-right: 2em;
}
#facts > .flex-cont figure {
  float: left;
  max-width: 45%;
  margin-bottom: 1em;
  margin-right: 2em;
}

#friends, #bye {
  background-color: rgba(217, 128, 217, 0.65);
}

#why {
  background-color: rgba(128, 179, 217, 0.65);
}
.twitter-tweet { margin-left: auto; margin-right: auto; }


#names figure {
  float: left;
  max-width: 30%;
  margin-bottom: 2em;
}
#names .flex-cont figure {
  margin-right: 2em;
}
}
#names li {
  margin-bottom: 0.5em;
}
#names aside {
  clear: both;
  margin-top: 2em;
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
#names aside p + p {
  margin-bottom: 0;
}

#sneaks {
  background-color: rgba(19, 0, 19, 0.9);
  color: #fff;
  padding: 2em;
  margin-top: 2em;
  text-align: center;
  letter-spacing: 1.3px;
}


/* media queries */
@media (min-width: 768px) {
   body { 
    background: linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.75)), url('../images/burger-decent.jpg') no-repeat center;
    background-attachment: fixed;
    background-size: cover;
   }
}
@media (max-width: 991px) {
  #intro, #facts {
    display: block;
  }
  figure {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
  }
  #facts > .flex-cont {
    padding-right: 0;
  }
  #facts > .flex-cont, #facts > aside, #names > aside {
    width: 100%;
  }
  #facts > aside {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  #facts .flex-side figure {
    max-width: 50%;
  }

  #names figure {
    max-width: 50%;
  }
  .colCount {
    column-count: 2;
  }

  .pod {
    display: block;
  }
  .pod .pod-content {
    width: 100%;
  }
}
@media (max-width: 767px) {
  body {
    background: linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.75)), url('../images/burger-decent.jpg') repeat scroll center / cover;
  }
  figure { max-width: 500px; }
  #gallery1 .gallery, #gallery2.gallery, #bye { 
    display: block;
    width: 100%;
  }
  .gallery > figure, .gallery > figure:first-child, .gallery > figure:last-child, #names figure { 
    float: none;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em;
    max-width: 450px;
  }

  #facts > .flex-cont figure, #names > .flex-cont figure  {
    float: none;
    max-width: 500px;
    margin-left: auto; 
    margin-right: auto;
  }

  .pod { width: 100%; }
  .pod figure { max-width: 400px; margin-bottom: 2em; }
  .pod { margin-left: 0; margin-right: 0; }

  #names aside { max-width: 75%; }

  #spyNameForm * {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  #spyNameForm input[type="text"] {
    margin-bottom: 1em;
  }
}
@media (max-width: 539px) {
  h1 { font-size: 3rem; }
  section {
    padding: 3rem 1.5rem;
  }
  #facts .flex-side figure {
    max-width: 400px;
  }
  #names aside { max-width: none; }
  .colCount li {
      margin-bottom: 0;
      font-size: 1rem;
  }
}


.colCount li { font-size: 1rem; margin-bottom: 0.5em; }
.form-inline-block { display: inline-block; }







/* animations */
/*header {
  perspective: 500px;
}*/
#spinner {
  text-align: center;
  animation-name: spin, depth;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 3s;
}
@keyframes spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(-360deg); }
}
@keyframes depth {
  0% { text-shadow: 0 0 black; }
  25% { text-shadow: 1px 0 black, 2px 0 black, 3px 0 black, 4px 0 black, 5px 0 black; }
  50% { text-shadow: 0 0 black; }
  75% { text-shadow: -1px 0 black, -2px 0 black, -3px 0 black, -4px 0 black, -5px 0 black; }
  100% { text-shadow: 0 0 black; }
}
#spinner:hover {
  animation-play-state: paused;
}

.stopAnim * {
  /*CSS transitions*/
  -o-transition-property: none !important;
  -moz-transition-property: none !important;
  -ms-transition-property: none !important;
  -webkit-transition-property: none !important;
  transition-property: none !important;
  /*CSS transforms*/
  -o-transform: none !important;
  -moz-transform: none !important;
  -ms-transform: none !important;
  -webkit-transform: none !important;
  transform: none !important;
  /*CSS animations*/
  -webkit-animation: none !important;
  -moz-animation: none !important;
  -o-animation: none !important;
  -ms-animation: none !important;
  animation: none !important;

}