@font-face {
  font-family: "kulbaskervilleregular";
  src: url("font/kulbaskerville-webfont.eot");
  src:
    url("font/kulbaskerville-webfont.eot?#iefix") format("embedded-opentype"),
    url("font/kulbaskerville-webfont.woff2") format("woff2"),
    url("font/kulbaskerville-webfont.woff") format("woff"),
    url("font/kulbaskerville-webfont.ttf") format("truetype"),
    url("font/kulbaskerville-webfont.svg#kulbaskervilleregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

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

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

/* Base styles */
body {
  letter-spacing: 3px;
  color: black;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: white;
  position: relative;
}

/* Remove lightning-related styles */
.lightning {
  display: none;
}

body::after {
  display: none;
}

/* Grid background */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
    linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
    linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
  background-size: 20px 20px;
  background-position:
    0 0,
    0 10px,
    10px -10px,
    -10px 0px;
  animation: backgroundMove 60s linear infinite;
  opacity: 0.2;
  z-index: -1;
}

@keyframes backgroundMove {
  0% {
    background-position:
      0 0,
      0 10px,
      10px -10px,
      -10px 0px;
  }
  100% {
    background-position:
      20px 0,
      20px 10px,
      30px -10px,
      10px 0px;
  }
}

/* Container for responsive layout */
.container {
  width: 70vw;
  max-width: 1200px;
  margin: 0 auto;
  margin-left: 10vw;
  margin-top: 4vw;

  margin-bottom: 4vw;
  position: relative;
  z-index: 2;
  background-color: transparent;
  color: #fff;
}

ul {
  font-family: "kulbaskervilleregular", Arial;
  font-size: clamp(0.6em, 2vw, 1em);
  letter-spacing: 2px;
  margin-left: 10%;
  color: black;
  padding: 0;
  list-style-type: none;
}

li {
  font-family: "kulbaskervilleregular", Arial;
  margin-bottom: 1em;
}

/* Links */

.linkEffect {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: white;
  /* transition: color 0.3s ease; */
}

a:link {
  color: black;
  text-decoration: none;

  /* transition: all 0.1s ease; */
}
a:visited {
  color: black;
}
a:hover {
  color: black;
  /* transition: all 0.1s ease; */
}
a:active {
  color: black;
}

.glitch {
  display: inline-block;
}

.glitch:hover {
  animation: glitchShake 0.9s infinite;
}

.glitch2 {
  display: inline-block;
}

.glitch2:hover {
  animation: glitchShake 0.3s infinite;
}

.glitch3 {
  display: inline-block;
}

.glitch3:hover {
  animation: glitchShake 0.09s infinite;
}

.glitch4 {
  display: inline-block;
}

.glitch4:hover {
  animation: glitchShake 0.03s infinite;
}

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

  20% {
    transform: translate(-0.1px, 0.16px);
  }

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

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

  80% {
    transform: translate(0.1px, 0.1px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}
/* Footer */
.copyright {
  overflow: hidden;
  padding: 2em 0em;
  text-align: center;
}

.copyright p {
  letter-spacing: 1px;
  font-size: clamp(0.8em, 2vw, 0.9em);
}

/* Main title styles */
.main-title {
  font-family: "kulbaskervilleregular";
  font-size: 4.1vw;
  margin-bottom: 0.5vw;
  transition: all 0.1s ease;
}

.main-title .dot {
  font-size: 2vw;
}

.main-title .u {
  font-family: "kulblackletter";
  font-size: 7vw;
}

.main-title .l {
  font-size: 3vw;
}

.main-title .e {
  font-size: 1vw;
}

.main-title .s {
  font-family: "kulblackletter";
  font-size: 7vw;
}

/* Construction text */
.construction-text {
  font-family: "kulbaskervilleregular";
  font-size: 0.8vw;
  line-height: 0.2vw;
  margin-top: 0.5vw;
  transition: all 0.1s ease;
}

/* List styles */
.lista-jeden {
  line-height: 0.3vw;
  padding: 1px;
  margin-left: 10vw;
  margin-top: -0.5%;
  font-size: 0.2em;
}

.lista-jeden li {
  padding: 0.5vw;
  line-height: 0.3vw;
  margin-bottom: 0.1em;
  margin-top: 0.4vw;
}

/* Kommands link */
.kommands-link {
  font-family: "kulbaskervilleregular";
  font-size: 1.7vw;
}

.kommands-link .m {
  font-family: "kulblackletter";
  font-size: 5vw;
}

/* Code link */
.code-link {
  font-family: "kulbaskervilleregular";
  font-size: 2vw;
  margin-top: 2vw;
}
.code-link .c {
  font-family: "kulbaskervilleregular";
  font-size: 2vw;
}

/* Tutorial link */
.tutorial-link {
  font-family: "kulbaskervilleregular";
  font-size: 2vw;
}

.tutorial-link .plus {
  font-family: "kulklasikregular";
  font-size: 4vw;
}

/* Market styles */
.market {
  font-family: "kulbaskervilleregular";
  font-size: 1.5vw;
}

.market-link {
  font-size: 1.5vw;
}

.market-link .business {
  font-size: 2.3vw;
}

.market-link .dollar {
  font-family: "kulbaskervilleregular";
  font-size: 4vw;
}

.market-link .amp {
  font-family: "kulblackletter";
  font-size: 2vw;
}

.markets {
  font-family: "kulklasikregular";
  font-size: 3vw;
}

.market-link .laundring {
  font-family: "kulblackletter";
  font-size: 4vw;
}

/* Trip advisor link */
.trip-link {
  font-family: "kulblackletter";
  text-transform: uppercase;
  font-size: 2.5vw;
  letter-spacing: 5px;
}

.play-button {
  font-family: "kulblackletter";
  font-size: 1.2vw;
  background: none;
  border: none;
  cursor: pointer;
}

.about-button {
  font-family: "kulklasikregular";
  font-size: 1.7vw;
  background: none;
  border: none;
  cursor: pointer;
}

/* Game button */
.game-button {
  font-family: "kulblackletter";
  font-size: 1.2vw;
  background: none;
  border: none;
  cursor: pointer;
}

/* Games title */
.games-title {
  margin-left: 10vw;
  font-family: "kulbaskervilleregular";
  font-size: 2vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1vw;
  transition: all 0.1s ease;
}

.games-text {
  font-family: "kulbaskervilleregular";
  font-size: 2vw;
}

.games-title .arrow {
  font-family: "kulklasikregular";
  font-size: 3vw;
  letter-spacing: 1vw;
  transition: transform 0.3s ease;
}

/* Rotated sections */
.rotated-115 {
  margin-top: 20vw;
  margin-bottom: 3vw;
  transform: rotate(115deg);
  -webkit-transform: rotate(115deg);
  -moz-transform: rotate(115deg);
  -o-transform: rotate(115deg);
}

.rotated-25 {
  margin-left: 15vw;
  transform: rotate(25deg);
  -webkit-transform: rotate(25deg);
  -moz-transform: rotate(25deg);
  -o-transform: rotate(25deg);
  width: 70%;
  height: 700px;
  line-height: 2.5em;
}

/* List styles */
.rotated-25 ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  line-height: 2.5em;
}

.rotated-25 li {
  margin-bottom: 1em;
  line-height: 2.5em;
}

/* Footer styles */
footer {
  text-align: center;
  padding: 2em 0;
}

.copyright p {
  font-family: "kulbaskervilleregular";
  font-size: 0.9em;
  letter-spacing: 1px;
}

/* Animation styles */
.f {
  transition: transform 0.1s ease;
}

.fullpapper2 {
  transition: transform 0.1s ease;
}

/* Media Queries */
@media screen and (min-width: 2880px) {
  .container {
    transform: scale(0.8);
    transform-origin: top left;
  }

  .main-title {
    font-size: 3.6vw;
  }

  .lista-jeden {
    line-height: 1.1vw;
    transform: scale(0.93);
    transform-origin: top left;
  }
}

@media screen and (min-width: 1680px) and (max-width: 1919px) {
  .container {
    transform: scale(0.9);
    transform-origin: top left;
  }

  .main-title {
    font-size: 3.9vw;
  }

  .lista-jeden {
    line-height: 1.2vw;
    transform: scale(0.93);
    transform-origin: top left;
  }
}

@media screen and (min-width: 1920px) and (max-width: 2879px) {
  .container {
    transform: scale(0.85);
    transform-origin: top left;
  }

  .main-title {
    font-size: 3.7vw;
  }

  .lista-jeden {
    line-height: 1.15vw;
    transform: scale(0.93);
    transform-origin: top left;
  }
}

@media screen and (max-width: 768px) {
  body {
    font-size: 12px;
    letter-spacing: 2px;
  }

  h1,
  h2,
  h3,
  #logo2 {
    position: static;
    float: none;
    max-width: 100%;
    margin: 1em auto;
    text-align: center;
  }

  ul {
    margin-left: 5%;
    font-size: 0.8em;
  }

  .fullpapper2 {
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -o-transform: none !important;
    margin-top: -10vw;
  }

  .fullpapper2 div {
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -o-transform: none !important;
    height: auto !important;
  }

  .rotated-115 {
    margin-bottom: 10vw;
  }

  .games-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1vw;
    margin-bottom: 5vw;
  }

  .games-title .arrow {
    transform: rotate(90deg);
    display: inline-block;
  }
}

.company-details {
  overflow: hidden;
  padding: 3em 0em;

  text-align: center;
  margin-top: 5em;
}

#footer #col1,
#footer #col2,
#footer #col3 {
  float: left;
  width: 320px;
  padding: 0px 30px 0px 30px;
}

#footer #icon {
  display: block;
  margin-bottom: 1em;
}

/*** Adding Styles to Copyright Div ***/
.copyright {
  overflow: hidden;
  padding: 2em 0em;

  text-align: center;
}

.copyright p {
  letter-spacing: 1px;
  font-size: 0.9em;
}

.copyright a {
  text-decoration: none;
}

/* List item styles */
.rotated-25 ul {
  line-height: 1em;
  margin-bottom: 0.5em;
}

.rotated-25 li {
  margin-bottom: 0.5em;
  line-height: 1em;
}

.slash {
  font-family: "kulbaskervilleregular";
  font-size: 3vw;
  line-height: 1em;
}

.supermarket {
  font-family: "kulbaskervilleregular";
  font-size: 2.1vw;
  line-height: 1em;
}

.super-alone {
  font-family: "kulblackletter";
  font-size: 2vw;
  line-height: 1em;
}

.stars {
  font-family: "kulblackletter";
  font-size: 2vw;
  line-height: 1em;
}

.community {
  font-family: "kulklasikregular";
  font-size: 5vw;
  line-height: 1em;
}

.global {
  font-family: "kulblackletter";
  font-size: 2vw;
  line-height: 1em;
}

.p {
  font-family: "kulbaskervilleregular";
  font-size: 3.5vw;
  line-height: 1em;
}

.positioning {
  font-family: "kulblackletter";
  font-size: 2vw;
  line-height: 1em;
}

.s {
  font-family: "kulbaskervilleregular";
  font-size: 3.5vw;
  line-height: 1em;
}

.system {
  font-family: "kulblackletter";
  font-size: 2vw;
  line-height: 1em;
}

.in-a {
  font-family: "kulblackletter";
  font-size: 2vw;
  line-height: 1em;
}

.city {
  font-family: "kulbaskervilleregular";
  font-size: 3vw;
  line-height: 1em;
}

.tutorial {
  font-family: "kulblackletter";
  font-size: 2vw;
  line-height: 1em;
}

.anomic {
  font-family: "kulblackletter";
  font-size: 4vw;
  line-height: 1em;
}

.white-cube {
  font-family: "kulblackletter";
  font-size: 2.5vw;
  line-height: 1em;
}

.sorry {
  font-family: "kulblackletter";
  font-size: 0.7vw;
  line-height: 1em;
}

.ministry {
  font-family: "kulblackletter";
  font-size: 2vw;
  line-height: 1em;
}

.website {
  font-family: "kulklasikregular";
  font-size: 5vw;
  line-height: 1em;
}

.slash2 {
  font-family: "kulblackletter";
  font-size: 3.5vw;
  line-height: 1em;
}

.bash {
  font-family: "kulblackletter";
  font-size: 4vw;
  line-height: 1em;
}

.god-bot {
  font-family: "kulblackletter";
  font-size: 2vw;
  line-height: 1em;
}

.institutional {
  font-family: "kulklasikregular";
  font-size: 3vw;
  line-height: 1em;
}

.animals {
  font-family: "kulbaskervilleregular";
  font-size: 2vw;
  line-height: 1em;
}

.maps {
  font-family: "kulblackletter";
  font-size: 2vw;
  line-height: 1em;
}

.utopia {
  font-family: "kulbaskervilleregular";
  font-size: 2.5vw;
  letter-spacing: 1px;
  line-height: 1em;
}

.versus {
  font-family: "kulblackletter";
  font-size: 2.5vw;
  letter-spacing: 7px;
  line-height: 1em;
}

.mafia {
  font-family: "kulblackletter";
  font-size: 3.5vw;
  line-height: 1em;
}

.human {
  font-family: "kulblackletter";
  font-size: 2vw;
  line-height: 1em;
}

.alarm {
  font-family: "kulbaskervilleregular";
  font-size: 3vw;
  line-height: 1em;
}

.pandemic {
  font-family: "kulblackletter";
  font-size: 2vw;
  line-height: 1em;
}

.mental {
  font-family: "kulklasikregular";
  font-size: 3vw;
  line-height: 1em;
}

.move {
  font-size: 1vw;
  line-height: 1.2;
  margin: 0;
  padding: 0;
  display: block;
  margin-top: -2vw;
  font-family: "kulbaskervilleregular";
  letter-spacing: 3px;
}

.move p {
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

/* List styles */
.game-list {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1.2;
}

.game-list li {
  margin-bottom: 0.5em;
  line-height: 1.2;
}

.game-list a {
  text-decoration: none;
  color: inherit;
  font-family: "kulbaskervilleregular";
  font-size: 1.2vw;
}

/* Binary hover effect */
/* a:hover,
.main-title:hover,
.construction-text:hover,
.lista-jeden li:hover,
.games-title:hover {
  cursor: pointer;
} */
.malpa {
  width: 50vw;
  margin: auto;
  margin-top: -30px;
  overflow: visible;
}

/* Binary hover effect styles */
.binary-text {
  font-family: monospace;
  font-size: 1.1vw;
  letter-spacing: 0.2em;
  display: inline-block;
  min-height: 1em;
  line-height: 1.2;
  vertical-align: middle;
  color: #000;
  text-transform: none;
  font-weight: normal;
}

/* Ensure consistent line height */
.main-title,
.construction-text {
  min-height: 1.1em;
  line-height: 1.1;
  display: inline-block;
  vertical-align: middle;
}

.lista-jeden li {
  min-height: 1.2em;
  line-height: 1.2;
  display: block;
  margin-bottom: 0.5em;
}

.t-link {
  font-family: "kulblackletter";
  text-transform: uppercase;
  font-size: 2.5vw;
  letter-spacing: 5px;
  margin-top: 3vw;
  line-height: 1.2;
}

.t-link a {
  display: inline-block;
  padding: 10px 0;
}

.t-link span {
  display: inline-block;
  margin-right: 5px;
}