/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* FONTS */

@font-face {
  font-family: "blackletterhplhs";
  src: url("../fonts/blach___-webfont.woff2") format("woff2"),
    url("../fonts/blach___-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "vhs_gothicregular";
  src: url("../fonts/vhs-gothic-webfont.woff2") format("woff2"),
    url("../fonts/vhs-gothic-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

h1 {
  font-family: "blackletterhplhs";
  text-align: center;
  text-shadow: rgba(197, 197, 197, 0.447) 2px 3px;
  font-size: 4rem;
  margin-top: 50px;
  margin-bottom: 0;
}

p {
  text-align: center;
}

body {
  height: 100%;
  margin: 0 auto;
  padding: 0;
  width: 50%;
  background: #872626;
  background: linear-gradient(
    180deg,
    rgba(135, 38, 38, 0.97) 0%,
    rgba(66, 5, 5, 1) 50%,
    rgba(0, 0, 0, 1) 100%
  );
}

div#intro {
  margin: 0% auto 10%;
  border: 5px solid rgb(92, 6, 6);
  background-color: black;
  overflow: hidden;
}

div#intro ul li {
  color: rgb(179, 0, 0);
  padding-inline-start: 1ch;
  font-family: "vhs_gothicregular";
  font-size: 1rem;
  padding: 10px;
  margin: 0 auto;
  list-style-position: inside;
}

h2 {
  color: white;
  font-family: "blackletterhplhs";
  font-size: 2rem;
  margin-top: 1%;
  text-align: center;
}

@keyframes scaleUp {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}

@keyframes fall {
  from {
    transform: translate(0px, 0px);
  }
  to {
    transform: translate(30px, 10px);
  }
}
@keyframes shake {
  50% {
    transform: translate3d(0, 5px, 0);
  }
}
.cross {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 50px 0;
  overflow: hidden;
}

.cross::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/cross.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.4;
  z-index: 0;
}

.gelatin {
  position: relative;
  z-index: 2;
  animation: scaleUp 1s ease-in-out infinite alternate;
}

.intro-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/overlay.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: opacity(50%);
  z-index: 0;
  animation: fall 10s linear infinite alternate;
}

.border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 112%;
  background-image: url("/images/border.png");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
}

img.gelatin:hover {
  filter: opacity(100%);
}

img#lev {
  float: right;
  filter: invert();
  animation: shake 3s ease-in-out infinite alternate;
}

/* GENERIC SCALING / CONTAINER FOR BETTER MOBILE */

.contContainer {
  all: unset; /* Remove any default styles */
  display: contents; /* Makes it disappear in layout flow */
}

@media (max-width: 768px) {
  body {
    transform: scale(0.95);
    transform-origin: top center;
  }

  /* Optional tweaks */
  .border {
    display: none;
  }

  #navigation,
  .center {
    transform: none;
  }

  #navigation {
    position: absolute;
    left: 0px;
    width: 130px;
  }

  main,
  section,
  article {
    padding: 1rem;
  }

  img,
  video {
    max-width: 100%;
    height: auto;
  }
}

.contContainer {
  max-width: 100%;
  width: 100%;
  padding: 0 1rem;
  box-sizing: border-box;
}