:root {
    --base-grid: 8px;
    --colour-white: #fff;
    --colour-black: #1a1a1a;
  }
  
  *, :after, :before {
      box-sizing: border-box;
  }
  
  html {
    margin: 0;
    padding: 0;
    background-image: linear-gradient(-170deg,#064997 20%,#105ba7);
    background-position: 100%;
  }
  
  body {
    background-color: rgb(11, 81, 158, 0);
    background-image: linear-gradient(270deg,#2b67ac 3px,transparent 0),linear-gradient(#2b67ac 3px,transparent 0),linear-gradient(270deg,rgba(43,103,172,.4) 1px,transparent 0),linear-gradient(#2b67ac 1px,transparent 0),linear-gradient(270deg,rgba(43,103,172,.4) 1px,transparent 0),linear-gradient(#2b67ac 1px,transparent 0);
    background-size: 112px 112px,112px 112px,56px 56px,56px 56px,28px 28px,28px 28px;
    font-family: Josefin Sans, sans-serif;
      margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100vh;
  }
  
  .links {
    --link-size: 14vh;
    color: var(--colour-black);
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    min-height: 100vh;
    margin-left: 50%;
    margin-right: 50%;
  }
  
  .links__list {
    position: relative;
    list-style: none;
  }
  
  .links__item {
    width: var(--link-size);
    height: var(--link-size);
    position: absolute;
    top: 0;
    left: 0;
    margin-top: calc(var(--link-size)/-2);
    margin-left: calc(var(--link-size)/-2);
    --angle: calc(360deg/var(--item-total));
    --rotation: calc(126.5deg + var(--angle)*var(--item-count));
    transform: rotate(var(--rotation)) translate(calc(var(--link-size) + var(--base-grid)*2)) rotate(calc(var(--rotation)*-1));
  }
  
  .links__link {
    opacity: 0;
    animation: on-load .3s ease-in-out forwards;
    animation-delay: calc(var(--item-count)*150ms);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    background-color: var(--colour-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: inherit;
  }
  .subtitle {
    font-size: 1.5em;
  }
  .links__icon {
    width: 7vh;
    height: 7vh;
    transition: all .3s ease-in-out;
    fill: var(--colour-black);
  }
  
  .links__text {
    position: absolute;
    z-index: 2;
    width: 100%;
    left: 0;
    text-align: center;
    font-size: 1em;
    display: none;
    bottom: calc(var(--base-grid));
    animation: text .3s ease-in-out forwards;
    background-color: black;
    color: white;
    line-height: 2em;
    border-radius: 0em 0em 2em 2em;
  }
  
  .links__link:after {
    content: "";
    background-color: transparent;
    width: var(--link-size);
    height: var(--link-size);
    border: 2px dashed var(--colour-white);
    display: block;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .3s cubic-bezier(.53,-.67,.73,.74);
    transform: none;
    opacity: 0;
  }
  
  .links__link:hover .links__icon {
    transition: all .3s ease-in-out;
    transform: translateY(calc(var(--base-grid)*-1));
  }
  
  .links__link:hover .links__text {
    display: block;
  }
  
  .links__link:hover:after {
    transition: all .3s cubic-bezier(.37,.74,.15,1.65);
    transform: scale(1.1);
    opacity: 1;
  }
  .in-text-img{
    max-width:350px;
    max-height:80px;
  }
  @keyframes on-load {
    0% {
      opacity: 0;
      transform: scale(.3);
    }
    70% {
      opacity: .7;
      transform: scale(1.1);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  @keyframes text {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  #construction-sign {
    width: 200px;
    max-width:80%;
    position: fixed;
    left: 50%;
    transform: translateX(-50%) rotate(15deg);
    top: 12vh;
  }
  #page-content-wrapper{
    padding-bottom: 75px;
  }
  #slider{
    height: auto;
  }
  .swipe {
    overflow: hidden;
    position: relative;
  }
  .swipe-wrap {
    overflow: hidden;
    position: relative;
    height: 100%;
  }
  .swipe-wrap > div {
    float: left;
    width: 100%;
    position: relative;
  }
  .swipe-option{
    width: 100%;
    height: 100%;
    padding-bottom: 10%;
    text-align: center;
    overflow-y: scroll;
  }
  .swipe-option img {
    height:20vh;
    max-height:200px;
    transition: transform .1s ease-in-out;
  }
  .swipe-option img:hover {
    transform: scale(1.1);
  }
  .white-card {
    padding: 15px;
    background-color: white;
    border-radius: 15px;
  }
  h1 {
    font-size: 7vh;
  }
  .shorts {
    width: 200px !important;
    height: 358px !important;
    margin-left: 0% !important;
    display: inline-block;
  }
  .short-container {
    display: inline-block;
    background-color: #000000c4;
    padding: 15px;
    border-radius: 15px;
    margin: 0px 8px 30px 8px;
  }
  @font-face {
    font-family: gunplay;
    src: url(fonts/gunplay3D.ttf);
  }
  @font-face {
    font-family: stencil;
    src: url(fonts/Stencil\ Army\ WW\ I.otf);
  }
  @font-face {
    font-family:megrim;
    src:url(fonts/Megrim/Megrim-Regular.ttf)
  }
  @font-face {
    font-family:teko;
    src:url(fonts/Teko/Teko-Regular.ttf)
  }
  @font-face {
    font-family:silkscreen;
    src:url(fonts/Silkscreen/Silkscreen-Regular.ttf)
  }
  @font-face {
    font-family:michroma;
    src:url(fonts/Michroma/Michroma-Regular.ttf)
  }
  @font-face {
    font-family:puzzle;
    src:url(fonts/bomb-jigsaw/Jigsaw\ Trouserdrop.otf)
  }
  @font-face {
    font-family: kanit;
    src: url(fonts/Kanit/Kanit-Light.ttf);
  }
  @font-face {
    font-family: purple-purse;
    src:url(fonts/Purple_Purse/PurplePurse-Regular.ttf)
  }
  #galleri {
    font-family: purple-purse;
    -webkit-text-stroke-width: 1px;
  }
  .outlined {
    font-family: "Rampart One", serif;;
    color:white;
  }
  .pixelated {
    font-family: silkscreen;
    color:white;
  }
  .puzzle {
    font-family: puzzle;
    -webkit-text-stroke-width: 0px;
  }
  h2 {
    font-family: kanit;
    text-align: center;
    -webkit-text-stroke: 0px black;
  }
  
  .three-d {
    font-family: gunplay;
  }
  .swipe-link:hover {
    color: #f06565;
    text-decoration: none;
  }
  .game {
    font-family: michroma;
    font-size: 6vh;
  }
  .code {
    font-family: teko;
    -webkit-text-stroke-width: 0px;
  }
  .laser {
    font-family: megrim;
    -webkit-text-stroke-width: 0px;
  }
  .stencil {
    font-family: stencil;
    font-weight: 400;
    -webkit-text-fill-color: white;
    -webkit-text-stroke-width: 0px;
    -webkit-text-stroke-color: black;
  }
  h4 {
    margin-top: 15px;
  }
  h5 {
    line-height: 2.2rem;
  }
#header {
    position: fixed;
    width:100vw;
    text-align: center;
}
#header img{
    max-width: 90%;
}
#pro-con-legend{
  text-align: center;
}
#pro-con-legend h5{
  display:inline;
}
.pro{
  color:#00fb00;
  line-height: 1.3rem;
}
.con{
  color:red;
  line-height: 1.3rem;
}
hr {
  border-top: 2px solid black;
  max-width:400px;
}
#hus-logo{
    cursor: pointer;
    position: fixed;
    bottom: 0;
    left: -6px;
    transition: transform .2s ease-out; 
    width: fit-content;
}
#hus-logo:hover {
    transform: translateX(5%);
}
#hus-logo img {
    width:400px;
    max-width: 80%;
}

#roadmap{
  cursor: pointer;
  position: fixed;
  z-index: 999;
  top: 0;
  right: -6px;
  transition: transform .2s ease-out; 
  width: fit-content;
}
#roadmap:hover{
  transform: scale(1.1) translate(-5%, 5%);
}

#roadmap img {
  width:60px;
  max-width: 80%;
}

#youtube {
    cursor: pointer;
    position: fixed;
    bottom: 0;
    right:15px;
    max-width:20%;
    transition: transform .2s ease-out;
}
#youtube:hover{
    transform: scale(1.1) translate(-5%, -5%);
}
#youtube img {
    width : 50px;
    max-width: 100%;
}
#qr {
  cursor:none;
  display:none;
  position:fixed;
  bottom:15px;
  width:110px;
  height:110px;
  border-radius: 10px;
  background-color: #ffffff;
  padding: 5px;
  left: 50%;
  transition: transform .2s ease-out;
  transform: translateX(-50%);
}
#qr:hover{
  transform: translate(-50%, -20%) scale(1.4) ;
}
#qr img {
  width:100px;
  height:100px;
}
#back-btn {
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
}
#back-btn img{
  width:50px;
  height:50px;
}
.middle {
  width: fit-content;
  margin-bottom:-1px;
  background-color: #0a509d;
  border: solid 1px white;
  padding: 5px 15px 5px 15px;
  border-radius: 15px 15px 0px 0px;
  margin-left: 50%;
  transform: translateX(-50%);
}
.prev {
  cursor: pointer;
  display: inline-block;
}
.next {
  cursor: pointer;
  display: inline-block;
}
@keyframes rainbow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 25%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.rainbow-txt {
  background-image: repeating-linear-gradient(45deg, violet, indigo, blue, green, yellow, orange, red, violet);
  background-size: 800% 800%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow 8s ease infinite;
}
.hoverinvert:hover {
  filter:invert();
}
.hovershadow{
  transition: filter .2s linear;
}
.hovershadow:hover{
  filter: drop-shadow(8px 8px 12px black);
}
.hoverzoom {
  transition: transform .1s ease-out;
}
.hoverzoom:hover{
  transform: scale(1.05);
}
.prev img {
  transform: rotate(180deg);
}
.tool {
  background-color: #00000080;
  padding: 30px 15px 30px 15px;
  border-radius: 15px;
  margin: 20px;
}
.artwork:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 0.4rem rgb(23, 23, 23));

}
#youtube {
  display:none;
}
#prusa {
  height:250px;
}
#footer{
  bottom: 0;
  position: fixed;
  width: 100%;
  z-index: 15;
}
a:hover {
  color: #ffe300;
  text-decoration: none;
}
lite-youtube {
  border-radius:15px;
}

.checklist {
  text-align: left;
  margin-left:20%;
}

.gallery-arrow {
  position: fixed;
  bottom: 20%;
  margin-left: 15vw;
}
.flag {
  z-index: 10;
  position: relative;
  height: 0px;
  margin-top: -1em;
  margin-bottom: 1.5em; 
  width: 100%;
}
.lyt-activated + .flag {
  display:none;
}
 .modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0, 0, 0, 0.9); 
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}

.modal-content {
  margin:0;
  text-align: center;
  width: fit-content;
  max-width: 100vw;
}

.close {
  color: #aaa;
  font-size: 75px;
  font-weight: bold;
  width: 75px;
  height: 75px;
  margin: 0;
  margin-bottom:0.5em;
  right: 10px;
  top: 10px;
  float:right;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
} 

.swipe-guide{
  bottom: 130px;
  position: fixed;
  opacity: 0.6;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  text-align: center;
  user-select: none;
  pointer-events: none;
}
.key {
  font-family: 'Impact Label', sans-serif;
  background-color: black;
  border-bottom: 0.2em solid white;
  border-left: 0.2em solid white;
  font-size:1.25em;
  color: white;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.5em;
  padding-right: 0.5em;
  transition: .2s ease-in-out;
  filter: invert(1);
}
#helper {
  position: absolute;
  text-align: center;
  bottom: 60px;
  opacity: .9;
  transition: .2s;
  cursor: pointer;
  left: 0;
  right: 0;
  transform: scale(1);
}
#helper img {
  width:50px;
  height:50px;
}
#helper:hover {
  opacity: 1;
  transform: scale(2);
}
#helper-video iframe {
  max-width:90%;
}
#helper-video video {
  width:400px;
  max-width:70%;
}
.notifier {
  background-color: yellow;
  color: red;
  width: fit-content;
  font-weight: bold;
  padding: 0.25em 1em;
  transition: .2s ease-in-out;
}
.notifier:hover {
  transform: scale(1.05);
}
@font-face {
  font-family: 'Impact Label';
  src: url("/css/fonts/ImpactLabel.ttf");
}
.machine-label {
  font-family: 'Impact Label', sans-serif;
  background-color: black;
  color:white;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.5em;
  padding-right: 0.5em;
  transition: .2s ease-in-out;
}

.machine-label:hover {
transform: scale(1.05) rotate(-3deg);
}

.active-arrow {
  color:black !important;
}

.meshmath {
  background-color: white;
  color: black;
  line-height: 2em;
  font-weight: bold;
}
@keyframes wiggle {
  0% {
    transform: translateX(0%);
  }
  44% {
    transform: translateX(0%);
  }
  49% {
    transform: translateX(5%);
  }
  54% {
    transform: translateX(-5%);
  }
  60% {
    transform: translateX(3%);
  }
  66% {
    transform: translateX(-2%);
  }
  69%{
    transform: translateX(0%);
  }
  100% {
    transform: translateX(0%);
  }
}

.wiggle-animation {
    animation: wiggle 4s ease-in-out infinite;
    animation-delay: 2s;
}

@media screen and (max-width: 700px) or (max-height:812px) {
    /*.links {
        --link-size: calc(var(--base-grid)*10);
    }
    .links__icon {
        width: calc(var(--base-grid)*4);
        height: calc(var(--base-grid)*4);
    }
    .links__text{
        bottom: calc(var(--base-grid)*6.5);
    }*/
}
@media screen and (max-width: 812px) {
  .links__text{
    display:block;
    font-size: 0.7em;
    bottom:50%;
    background-color: rgba(255, 255, 255, 0);
    color:black;
    transform: translateY(calc(var(--base-grid)*5));
  }
  .links__icon {
    transform: translateY(calc(var(--base-grid)*-1));
  }
  .swipe-option img {
    height:200px;
  }
  .swipe-option{
    padding-top: 0px;
    padding-bottom:0px;
  }
  #construction-sign {
    top:auto;
    bottom:75px;
  }
  .desktop-arrow {
    display: none;
  }
  #roadmap{
    cursor: pointer;
    position: fixed;
    bottom: 0;
    top:auto;
    right: 0;
    transition: transform .2s ease-out; 
    width: fit-content;
  }
  
  #roadmap:hover{
    transform: scale(1.1) translate(-5%, -5%);
  }
  .swipe-guide {
    display: block;
  }
  .click-guide {
    display: none;
  }
  #helper-video iframe {
    width:380px;
    height:220px;
  }
}

@media screen and (min-width: 812px) {
  #qr{
    display:block;
  }
  .swipe-guide {
    display: none;
  }
  .click-guide {
    display: block;
  }
  body {
    overflow-y: hidden;
  }
  .swipe-option{
    width: 33% !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-top: 5%;
  }
  #page-content-wrapper{
    -ms-overflow-style: none;
    scrollbar-width: none;
    width:100%;
  }
  #page-content-wrapper::-webkit-scrollbar{
    display: none;
  }

  .swipe-option::-webkit-scrollbar{
    display: none;
  }
  #youtube {
    display:block;
  }
  #hus-logo {
    left: -195px;
  }
  #hus-logo:hover {
    transform: translateX(188px);
  }
  .w-75 {
    max-width: 25vw;
    min-width: 400px;
  }
  .mobile-arrow {
    display: none;
  }
  .tool {
    min-width: 400px;
    max-width:30vw;
    transform: translateX(-50%);
    margin-left: 50%;
  }
  #helper {
    left:auto;
    margin-right: 30px;
    -webkit-text-stroke: 0px white;
  }
}


@media only screen and (min-width: 900px) {
  #mascot {
    right: 5%;
    position: fixed;
    bottom: 0;
  }
  #mascot img {
    max-height: 30vh;
  }
  #speechbubble {
    position: absolute;
    width: auto;
    left: 0;
    top: 0;
    max-height: 8vh !important;
    transform: translate(-60%,-70%);
  }
}