/* .container {  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "logo menu menu ."
    "content-left1 content-left1 content-right1 content-right1"
    "content-left1 content-left1 content-right1 content-right1"
    "content-left1 content-left1 content-right1 content-right1";
}

.logo { grid-area: logo;
 justify-self: stretch; 
  align-self: start; 
  grid-area: 1 / 1 / 2 / 2; }

.menu { grid-area: menu; }

.content-left1 { grid-area: content-left1; }

.content-right1 { grid-area: content-right1; }
.blob {
  justify-self: center; 
  align-self: end; 
  grid-area: 1 / 1 / 2 / 2; 
  height: 50%; 
} */


/* For presentation only, no need to copy the code below */

/* .container * {
  border: 1px solid red;
  position: relative;
} */


/* 
.logo {
  justify-self: stretch;
  align-self: start;
  grid-area: 1 / 1 / 2 / 2;
}

.menu { grid-area: 1 / 2 / 2 / 5; }

.content-left1 { grid-area: 2 / 1 / 5 / 3; }

.content-right1 { grid-area: 2 / 3 / 5 / 5; }

.blob {
  justify-self: center;
  align-self: end;
  grid-area: 1 / 1 / 2 / 2;
  height: 50%;
}
 */
/* .container {  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "lök lök lök lök"
    "content-left1 content-left1 content-right1 content-right1"
    "content-left1 content-left1 content-right1 content-right1"
    "content-left1 content-left1 content-right1 content-right1";
}

.content-left1 {  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . l"
    ". . . ."
    ". . . ."
    ". . . .";
  grid-area: content-left1;
}

.l { grid-area: l; }

.content-right1 { grid-area: content-right1; }

.lök {  display: grid;
    max-height: 25vh;
  grid-template-columns: 0.8fr 1fr 1.2fr repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "logo logo hand hand . alt-bounce"
    "logo logo hand hand . ."
    ". . . . . ."
    "text text . nav nav nav";
  grid-area: lök;
} */

.big { 
  content: '♥';
animation: rotate 3s ease-in-out infinite both;

}
.text { grid-area: text;
place-self: center;}
.text span {
       font-family: 'GT Ultra Ultra', serif;
color: rgb(157, 255, 0);
}

.text h1 {
    color: white;
          font-family: 'Figtree', sans-serif;
    font-weight:400;
    
}
.text h1::after{
    content: '→'
}

*,
*::after,
*::before {
	box-sizing: border-box;
}

:root {
	font-size: 15px;
}

.h25 {
  height: 25vh;
}

.lerp-wrap {
  display: inline-block;
  vertical-align: middle;
  margin-left: 1.25rem;
  line-height: 1.1;
       filter: drop-shadow(0px 0px 0.55rem rgba(0, 0, 0, 0.55));

  
}

.lerp-wrap-stuff span {
  padding: 10px;
   margin: 5px;
    font-size: clamp(26px, 3vw, 8vw);
 position:relative;
  
  color: rgb(251, 251, 251);
  display: inline-flex;
  justify-content:center;
  align-items:center;
    font-family: 'Right Grotesk Spatial';
    font-weight: 900;
    font-style: normal;
    background-color: var(--main-bg);
  font-size: clamp(25px, 3vw, 8vw);
  background:rgb(0, 0, 0);
  border-radius: 5px;
}
.lerp-wrap-stuff {
   display: inline-block;
  vertical-align: middle;
  margin-left: 1.25rem;
  line-height: 1;
       filter: drop-shadow(0px 0px 0.55rem rgba(0, 0, 0, 0.55));

  
  width: fit-content;
/* margin: 10px;
  padding: 20px; */
}



.lerp-wrap span {
  position:relative;
  width:100px;
  height:100px;
  color: rgb(251, 251, 251);
  display: inline-flex;
  justify-content:center;
  align-items:center;
    font-family: 'Right Grotesk Spatial';
    font-weight: 900;
    font-style: normal;
    background-color: var(--main-bg);
  font-size: clamp(32px, 3vw, 8vw);
  background:rgb(0, 0, 0);
  border-radius: 5px;
}


nav .navigation li > svg {
  margin: 2vw;
  width: 60%;
}

.rotate {
  transform: rotate(90deg);
}
.like li {
  list-style: none;
  counter-increment: my-awesome-counter;
  position: relative;
    vertical-align: middle;
  margin-bottom: 1.25rem;
  line-height: 1.1;
       filter: drop-shadow(0px 0px 0.55rem rgba(0, 0, 0, 0.55));
  font-size: clamp(32px, 3vw, 8vw);
background: black;

}
.like li::before {
    position:relative;
  width:100px;
  height:100px;
  color: rgb(251, 251, 251);
  display: inline-flex;
  justify-content:center;
  align-items:center;
    font-family: 'Right Grotesk Spatial';
    font-weight: 900;
    font-style: normal;
    background-color: var(--main-bg);
  font-size: clamp(32px, 3vw, 8vw);
  background:rgb(0, 0, 0);
    content: counter(my-awesome-counter);

}

.like li span {
  background: black;
  color: white;
    margin-left: 1.25rem;

}
h1.header {
  font-size: clamp(4.3125rem, 3.4531rem + 2.75vw, 5rem);
  font-size: clamp(8.3125rem, 3.925rem + 1.24vw, 6.25rem);
}
body {
	margin: 0;
  --color-green: #63ff00;
	--color-text: #fff;
  --color-cyan: rgb(41, 255, 255);
	--color-bg: #000;
	--color-link: #fff;
	--color-link-hover: #fff;
	--font-size-s: 13vw;
	--font-size-m: 16vw;
	--font-size-l: 24vw;
	--font-size-xl: 26vw;
	--font-family: widescreen-ex, sans-serif;
	--font-weight: 900;
	--content-offset: 20vh;
	--font-case: uppercase;
	--color-rep-text: var(--color-text);
	--color-rep-text-main: var(--color-text);
	--color-rep-outline: var(--color-text);
	--color-rep-bg: var(--color-bg);
	/* Adjust these depending on your font */
	--font-factor: 0.059; 
	--font-line: 0.745;
	color: var(--color-text);
	background-color: var(--color-bg);
	font-family: 'Right Grotesk', -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow: hidden;
	overflow-y: scroll;
}


a:hover {
	color: var(--color-link-hover);
	outline: none;
}

/* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
a:focus {
	/* Provide a fallback style for browsers
	 that don't support :focus-visible */
	outline: none;
	background: lightgrey;
}

a:focus:not(:focus-visible) {
	/* Remove the focus indicator on mouse-focus for browsers
	 that do support :focus-visible */
	background: transparent;
}

a:focus-visible {
	/* Draw a very noticeable focus style for
	 keyboard-focus on browsers that do support
	 :focus-visible */
	outline: 2px solid red;
	background: transparent;
}

a {
    text-decoration: underline;
    color: rgb(0, 242, 255);
    transition: ease all 0.4s;
text-decoration-thickness: 5px;
 text-underline-offset: 5px;
}
a:hover, a:active {
        transition: ease all 0.4s;
        cursor: pointer;
/* 
    text-decoration-line: underline;
    
    color: rgb(0, 102, 255);
    text-decoration-color: rgb(0, 102, 255); */
/* text-decoration-thickness: 10px;
 text-underline-offset: 5px; */

}
body {
   font-family: 'Right Grotesk Wide';
    font-weight: 500;
    font-style: normal;
    background-color: var(--main-bg);

}
main.main {
   -webkit-perspective: 3000px;
          perspective: 3000px;
          position: relative;
}
@font-face {
    font-family: 'Right Grotesk Wide';
    src: url('RightGrotesk-WideMedium.woff2') format('woff2'),
        url('RightGrotesk-WideMedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


:root {
    --main-bg: #323232;
    --boxes-grey: #656565;
}
















* {
    margin: 0; 
    padding: 0;
}


h1 {
    /* font-size: clamp(55px, 3em, 100%); */
    font-size: 80px;

    font-size: clamp(1rem, -4rem + 16vw, 5rem);
    line-height: 1;
    font-weight: 500;
}
body {
  width: 100%;
  height: 100%;} 
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height:calc(100vh - 10px);
  width:calc(100vw - 11px);
              margin: 10px;

  -webkit-perspective: 1000px;
          perspective: 1000px;
}
.loek{
  position: fixed;
  left: 25px;
  bottom: 50px;
}
.wheel {
  position: relative;
  width: 250px;
  height: 250px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border: 10px solid magenta;
  background: rgba(239, 239, 239, 0.921)
}



.sword {

    font-family: 'Right Grotesk Spatial';
    src: url('RightGrotesk-SpatialBlack.woff2') format('woff2'),
        url('RightGrotesk-SpatialBlack.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
color: black;
  font-size: 80px;

    font-size: clamp(1rem, -2rem + 16vw, 2rem);
}
.txt {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  margin: 0;
  font-size: 33px;
  text-transform: uppercase;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

  .panel {
  height: 100vh;
  /* background:rgb(30, 30, 30); */
}
.line {
  width: 100%;
  max-width: 100vw;
  height: 25vh;
  /* margin-top: 25vh; */
  /* margin: 0px 50px 20px 0px; */
    /* margin: 0px 50px 20px 0px; */
  color: var(--color-cyan);
  position: relative;
  display: inline-block;
  background-color:var(--color-cyan);
  background-color: var(--color-green);
   /* font-size: 80px;

    font-size: clamp(1rem, -4rem + 16vw, 5rem);
    line-height: 1;
    font-weight: 500; */
}

* {
  scrollbar-width: thin;
  scrollbar-color: transparent orange;

}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: cyan;
  
}


::-webkit-scrollbar {
  /* width: 5px;
  height: 8px; */
  background-color: #aaa; /* or add it to the track */
}

/* Add a thumb */
::-webkit-scrollbar-thumb {
  background: #000;
}