/* styles.css */

/* unlock-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Unlock';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/unlock-v28-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* teko-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Teko';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/teko-v23-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

body {
      background-color: #768fab;
      margin: 0 auto;
}

article {
      text-align: center;
      max-width: 1000px;
      margin: 0 auto;
      padding: 10px;
      background-color: #c3c3c3;
      width: 96%;
      height: 100%;
      color: #586b81;
}

header {
      background-color: #586b81;
      border-bottom: 1px solid #ffffff;
      font-family: 'Unlock', sans-serif;
      color: #ffffff;
      position: fixed;
      width: 100%;
      z-index: 10;
      word-spacing: 40px;
}

header ul {
      list-style: none;
      display: flex;
      justify-content: left;
      flex-direction: row;
      gap: 40px;
}

header ul li {
      font-size: 40px;
      text-shadow: 1px 1px 2px #000000;
}

header .gcse-searchbox-only {
      width: 25%;
      justify-content: right;
}

header a {
      text-decoration: none;
      color: #ffffff;
}

h1, h2, h3 {
  font-family: 'Unlock';
}

h1 {
      padding-top: 50px;
      font-size: 80px;
      text-shadow: 2px 2px 2px #ffffff;
}

h2 {
  font-size: 50px;
  text-shadow: 2px 2px 2px #ffffff;
}

h3 {
      font-size: 32px;
}

h5 {
      font-size: 43.75px;
      line-height: 0.5;
      text-shadow: 1px 1px 2px #000000;
}

p {
  font-family: 'Teko';
  font-size: 35px;
}

.grid {
      margin: 0 auto !important;
      align-items: center !important;
      justify-items: center !important;
      width: 85%;
      display: grid;
      grid-template-columns: 30% 30% 2fr 1fr;
      grid-template-rows: 310px 310px;
      gap: 10px 15px;
}

.box-audio, .box-video, .box-misc {
      margin: 0 auto;
      border-radius: 5px;
      border: 2px #586b81 solid;
}

/*
.box-video {
      margin: 0 auto !important;
      align-items: center !important;
      justify-items: center !important;
}
*/

.box-audio a, .box-video a, .box-misc a {
  text-decoration: none;
  color: #586b81;
}

.box-audio a:hover {
        border: 1px solid #c3c3c3;
        color: #ffffff;
        transform: scale(2);
}

.box-video a:hover {
        border: 1px solid #c3c3c3;
        color: #ffffff;
        transform: scale(2);
}

.box-misc a:hover {
        border: 1px solid #c3c3c3;
        color: #ffffff;
        transform: scale(2);
}

footer {
      align: center;
      font-family: 'Teko', sans-serif;
      background-color: #586b81;
}

.buttons {
      border-top: 1px solid white;
      padding: 40px 0px;
      position: relative;
      text-align: center;
      width: 100%;
      color: #ffffff;
}

.buttons a {
        background: #c3c3c3;
        border: 1px solid white;
        border-radius: 3px;
        color: #586b81;
        display: inline-block;
        margin: 10px;
        padding: 14px;
        text-decoration: none;
      font-size: 35px;
}

.buttons a:hover {
        background: white;
        border: 1px solid #586b81;
        color: #586b81;
      transform: scale(1.5);
}

.imagecarousel {
    position: relative;
    height: 233px;
    margin-bottom: 30px;
    display: flex;
    width: 100%;
}

.imagecarousel img {
  margin: 0px 25px;
  box-shadow: 2px 2px 8px #8a8a8a;
}

.imagecarousel {
  animation: bannermove 50s linear infinite;
}

@keyframes bannermove {
   0% {
    left: 0;
  }
  50% {
    left: -100%;
  }
  100% {
    left: 0;
  }
}