@font-face {
  font-family: "Anselm Sans Light";
  src: url("fonts/AnselmSans-Light.ttf");
}

@font-face {
  font-family: "Epoque";
  src: url(fonts/EpoqueSeria-Light.ttf);
}

body {
  background-color: white;
  margin: 0px;
  cursor: progress;
}

::selection {
  background: greenyellow;
}

.cloudsdiv {
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0px;
  right: 0px;
}

.highlight {
  position: fixed;
  mix-blend-mode: normal;
  pointer-events: none;
  z-index: 3;
  height: 100vh;
  width: 100vw;
  margin: -10px;
  transform: scale(107%);
  object-fit: cover;
}

@keyframes cloudmove {
  0% {
    object-position: 0px;
  }
  100% {
    object-position: 0px -200vh;
  }
}

.clouds {
  position: fixed;
  opacity: 10%;
  height: 300vh;
  min-width: 100vw;
  mix-blend-mode: multiply;
  padding: 0px;
  animation-name: cloudmove;
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  pointer-events: none;
  object-fit: cover;
  z-index: -5;
}

div.logo {
  height: max-content;
  padding: 24px;
  color: blue;
}

.logo img {
  position: relative;
  width: 100px;
  height: auto;
  /*filter: invert(1); */
  mix-blend-mode: multiply;
  z-index: 2;
  transition: transform 0.3s ease-in-out;
}

.logo img:hover {
  transform: rotate(1turn) scale(120%);
}

div.main {
  width: 100vw;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  column-gap: 48px;
}

div.heading {
  width: max-content;
  margin-top: -8px;
}

p {
  margin: 0px;
}

h1 {
  margin: 0px;
}

.heading p {
  position: relative;
  margin-right: 32px;
  font-family: "Arial Narrow";
  font-size: 24px;
  font-style: normal;
}

.heading h1 {
  font-family: "Anselm Sans Light";
  letter-spacing: -3px;
  font-weight: normal;
  font-style: normal;
  font-size: 48px;
  text-decoration: underline;
  /*-webkit-text-stroke: .5px blue;
    text-shadow: 0px 0px 5px rgba(0, 0, 255, 0.3);*/
}

div.event {
  width: min-content;
}

.event img {
  position: relative;
  width: 60vw;
  height: max-content;
  margin-left: 32px;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.7);
  border: 1px solid black;
}

.socials {
  position: fixed;
  justify-content: flex-end;
  width: max-content;
  min-width: max-content;
  height: min-content;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex-flow: row nowrap;
  column-gap: 16px;
  right: 29.2px;
  bottom: 29.2px;
  color: black;
  text-decoration: underline;
  z-index: 2;
  font-family: "Anselm Sans Light";
  font-size: 48px;
  letter-spacing: -3px;
}

.socials a {
  text-decoration: none;
  color: black;
}

.socials p {
  text-align: left;
  transition: transform 0.3s ease-in-out, text-shadow 0.3s ease-in-out,
    -webkit-text-stroke 0.3s ease-in-out;
}

.socials p:hover {
  cursor: pointer;
  -webkit-text-stroke: 0.5px blue;
  text-shadow: 0px 0px 5px rgba(0, 0, 255, 0.3);
  transform-origin: bottom right;
}