/* font-family: 'Sora', sans-serif; */


#bgVideo {
   position: fixed;
   right: 0;
   bottom: 0;
   min-width: 50%;
   min-height: 50%;
   z-index: -5;
}

/**************** Website Frame ******************/

.websiteFrame {
   position: fixed;
   z-index: 990;

   animation-name: backgroundColorPalette;
   animation-duration: 7s;
   animation-iteration-count: infinite;
   animation-direction: alternate;
   animation-timing-function: linear;
}

@keyframes backgroundColorPalette {
   0% {
      background: #e85709;
   }

   25% {
      background: #c1f429;
   }

   50% {
      background: #29ade6;
   }

   75% {
      background: #d419e1;
   }

   100% {
      background: #f30619;
   }
}

#websiteFrameTop {
   top: 0;
   left: 0;
   width: 100%;
   height: 10px;
   border-radius: 20px;
}

#websiteFrameRight {
   top: 0;
   bottom: 0;
   right: 0;
   width: 10px;
   border-radius: 20px;
}

#websiteFrameBottom {
   bottom: 0;
   left: 0;
   width: 100%;
   height: 10px;
   border-radius: 20px;
}

#websiteFrameLeft {
   top: 0;
   bottom: 0;
   left: 0;
   width: 10px;
   border-radius: 20px;
}

* {
   box-sizing: border-box;
}

/**************** Title ******************/

.container {
   cursor: default;
   border-width: 90%;

   display: flex;
   justify-content: center;
}

:root {
   --color-primary: #ffffff;
   --color-secondary: #e12a11;
   --color-tertiary: #c1f429;
   --color-quaternary: #29ade6;
   --color-quinary: #d419e1;
   /*
   --color-primary: #5192ED;
   --color-secondary: #69A1F0;
   --color-tertiary: #7EAEF2;
   --color-quaternary: #90BAF5;
   --color-quinary: #A2C4F5;
   */
}

a {
   text-decoration: none;
   color: white;
}

.title {
   color: white;
   border: solid 1px rgb(136, 44, 44)08, 55, 55;
   font-family: 'Bangers', cursive;
   font-size: calc(2rem + 5vw);
   padding-top: 12px;

   text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
   font-weight: 400;
   font-size: calc(2rem + 5vw);
   text-align: center;
   margin: 0;
   color: var(--color-primary);
   animation: shadows 1.2s ease-in infinite, move 1.2s ease-in infinite;
}

@keyframes shadows {
   0% {
      text-shadow: none;
   }

   10% {
      text-shadow: 3px 3px 0 var(--color-secondary);
   }

   20% {
      text-shadow: 3px 3px 0 var(--color-secondary),
         6px 6px 0 var(--color-tertiary);
   }

   30% {
      text-shadow: 3px 3px 0 var(--color-secondary),
         6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
   }

   40% {
      text-shadow: 3px 3px 0 var(--color-secondary),
         6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),
         12px 12px 0 var(--color-quinary);
   }

   50% {
      text-shadow: 3px 3px 0 var(--color-secondary),
         6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),
         12px 12px 0 var(--color-quinary);
   }

   60% {
      text-shadow: 3px 3px 0 var(--color-secondary),
         6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),
         12px 12px 0 var(--color-quinary);
   }

   70% {
      text-shadow: 3px 3px 0 var(--color-secondary),
         6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
   }

   80% {
      text-shadow: 3px 3px 0 var(--color-secondary),
         6px 6px 0 var(--color-tertiary);
   }

   90% {
      text-shadow: 3px 3px 0 var(--color-secondary);
   }

   100% {
      text-shadow: none;
   }
}

@keyframes move {
   0% {
      transform: translate(0px, 0px);
   }

   40% {
      transform: translate(-12px, -12px);
   }

   50% {
      transform: translate(-12px, -12px);
   }

   60% {
      transform: translate(-12px, -12px);
   }

   100% {
      transform: translate(0px, 0px);
   }
}

/****************** Filters Section **********************/
.filterButton {
   background-color: var(--color-tertiary);
   border: none;

   font-family: 'Sora', sans-serif;
   font-weight: 400;

   cursor: pointer;
}

.navBar {
   cursor: default;
   background-color: black;
   border-top: dashed 1px var(--color-tertiary);
   border-bottom: dashed 1px var(--color-tertiary);
   padding: 10px;

   display: flex;
   justify-content: space-between;

   position: sticky;
   top: 1.2%;
   width: 100%;
   z-index: 900;

   color: var(--color-tertiary);
   font-family: 'Sora', sans-serif;
   font-weight: 400;
   font-size: 4vw;
}

@media screen and (min-width: 500px) {

   .navBar {
      color: var(--color-tertiary);
      font-family: 'Sora', sans-serif;
      font-weight: 400;
      font-size: calc(1% + 3vh);
   }
}

.filterWrapper {
   display: none;
   border: solid 1px transparent;
   /* background-image: linear-gradient(var(--color-quaternary),var(--color-quinary),var(--color-secondary),var(--color-tertiary)); */
   background-color: var(--color-tertiary);
   border-bottom: dashed 1px var(--color-tertiary);
   padding: 10px;

   grid-template-columns: repeat(4, 1fr);
   gap: 10px;
   justify-items: center;
   text-align: center;

   position: sticky;
   top: 6%;
   width: 100%;
   z-index: 900;
}

@media screen and (min-width: 500px) {
   .filterWrapper {
      border: solid 1px transparent;
      /* background-image: linear-gradient(var(--color-quaternary),var(--color-quinary),var(--color-secondary),var(--color-tertiary)); */
      background-color: var(--color-tertiary);
      border-bottom: dashed 1px var(--color-tertiary);
      padding: 10px;

      display: none;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      justify-items: center;
      text-align: center;

      position: sticky;
      top: 7.5%;
      width: 100%;
      z-index: 900;
   }
}

li {
   list-style: none;
   border: solid 1px black;
   border-radius: 5px;
   padding-right: 10px;
   padding-left: 10px;

   color: black;
   width: 90%;

   font-family: 'Sora', sans-serif;
   font-weight: 400;
   font-size: 3vw;
}

li:hover {
   list-style: none;
   background-color: black;
   transition: 300ms;
   border-radius: 5px;
   padding-right: 13px;
   padding-left: 13px;

   cursor: pointer;
   color: var(--color-tertiary);
   width: 100%;

   font-family: 'Sora', sans-serif;
   font-weight: 400;
   font-size: 3vw;
}

@media screen and (min-width: 500px) {
   li {
      list-style: none;
      border: solid 1px black;
      border-radius: 5px;
      padding-right: 10px;
      padding-left: 10px;

      color: black;
      width: 90%;

      font-family: 'Sora', sans-serif;
      font-weight: 400;
      font-size: calc(0rem + 2vw);
   }

   li:hover {
      list-style: none;
      background-color: black;
      transition: 300ms;
      border-radius: 5px;
      padding-right: 13px;
      padding-left: 13px;

      cursor: pointer;
      color: var(--color-tertiary);
      width: 100%;

      font-family: 'Sora', sans-serif;
      font-weight: 400;
      font-size: calc(0rem + 2vw);
   }
}

@media screen and (min-width: 1000px) {
   li {
      list-style: none;
      border: solid 1px black;
      border-radius: 5px;
      padding-right: 10px;
      padding-left: 10px;

      color: black;
      width: 90%;

      font-family: 'Sora', sans-serif;
      font-weight: 400;
      font-size: calc(0rem + 1.2vw);
   }

   li:hover {
      list-style: none;
      background-color: black;
      transition: 300ms;
      border-radius: 5px;
      padding-right: 13px;
      padding-left: 13px;

      cursor: pointer;
      color: var(--color-tertiary);
      width: 100%;

      font-family: 'Sora', sans-serif;
      font-weight: 400;
      font-size: calc(0rem + 1.2vw);
   }
}

.about {
   color: black;
}

.navBarBottom {
   cursor: default;
   background-color: black;
   border-top: dashed 1px var(--color-tertiary);
   border-bottom: dashed 1px var(--color-tertiary);
   padding: 10px;

   display: flex;
   justify-content: space-between;

   position: fixed;
   bottom: 1.2%;
   width: 100%;
   z-index: 900;

   color: var(--color-tertiary);
   font-family: 'Sora', sans-serif;
   font-weight: 400;
   font-size: 4vw;
}

@media screen and (min-width: 500px) {

   .navBarBottom {
      color: var(--color-tertiary);
      font-family: 'Sora', sans-serif;
      font-weight: 400;
      font-size: calc(1% + 3vh);
   }
}

/****************** Loop Reel **********************/

.wrapper {
   max-width: 100%;
   overflow: hidden;
}

.repeat {
   color: white;
   font-size: 2vh;
   white-space: nowrap;
   overflow: hidden;
   display: inline-block;
   animation: repeat 10s linear infinite;
}

.repeat p {
   display: inline-block
}

@media screen and (min-width: 500px) {
   .repeat {
      font-size: 2vh;
      white-space: nowrap;
      overflow: hidden;
      display: inline-block;
      animation: repeat 20s linear infinite;
   }
}

@keyframes repeat {
   0% {
      transform: translate3d(0, 0, 0);
   }

   100% {
      transform: translate3d(-50%, 0, 0);
   }
}