:root {
  --one: black;
  --two: rgb(255, 255, 255);
  --three: var(--skugga1);
  --skugga1: rgb(255, 120, 221);
  --skugga2: rgb(255, 89, 0);

}

body {
    margin: 0;
    padding: 0;
    background-color: var(--black);
    }

html {

}

::-webkit-scrollbar {
width: 10px;
}

::-webkit-scrollbar-track {
background: var(--one);
}

::-webkit-scrollbar-thumb {
background: var(--skugga2);
}

::-webkit-scrollbar-thumb:hover {
background: var(--skugga1);
}


a {
  color: var(--skugga2);
  text-decoration: none;
  -webkit-text-stroke: 1.5px var(--one);
}

li a {
  color: var(--one);
  text-decoration: none;
  -webkit-text-stroke: 1.5px var(--skugga2);
}

li a:hover {
  color: var(--skugga2);
  text-decoration: none;
  -webkit-text-stroke: 1.5px var(--skugga1);
}





@font-face {
font-family: "pixel";
src: url("assets/188Sans-Pixel100.woff2") format("woff2");
}


@font-face {
font-family: "korv";
src: url("assets/korv.woff2") format("woff2");
}


/* toggle */


.togglaren {
  position: fixed;
  top: 1vw;
  left: 1vw;
  z-index: 1000;
}

.toggle-container {
  display: flex;
  align-items: center;
}

.toggle-checkbox {
  display: none;
}

.toggle-label {
  display: inline-block;
  width: 52px;
  height: 26px;
  background-color: var(--skugga2);
  border-radius: 13px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s;
}

.toggle-label::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-color: var(--one);
  border-radius: 50%;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: left 0.1s;
}

.toggle-checkbox:checked + .toggle-label {
  background-color: var(--skugga1); /* Toggle switch color when checked */
}

.toggle-checkbox:checked + .toggle-label::after {
  left: 30px; /* Move the switch to the right when checked */
}

.toggle-container span {
  font-size: 14px;
  margin-left: 10px;
}

/* webcam overlay */
.webcam-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 999;
  pointer-events: none;
  opacity: 1;
  mix-blend-mode: difference;
}

/* header */

#header {
  position: fixed;
  height: auto;
  width: 100vw;
}



#wrapper {
  background-image: url("assets/2026-4-1.jpg");
  padding: 0;
  display: flex;
  min-height: 100vh;
  background-attachment: fixed;
  background-size: 700px;
  justify-content: center;
  flex-flow: column;
  mix-blend-mode: difference;
  image-rendering: pixelated;

  }

h1 {
  padding: 3vw 0 5vw 0;
  font-family: "korv";
  margin: 0;
  font-size: 7vw;
  text-align: center;
  height: 7vw;
  color: var(--two);
   -webkit-text-stroke: 0.1vw var(--one);
    text-stroke: 0.1vw var(--one);
  text-shadow:
   -0.25vw 0.25vw 0px var(--skugga1),
   0.25vw -0.25vw 0 var(--skugga2);
  letter-spacing: -0.1vw;
  font-weight: bolder;

  }

ul {
  background-image: url("assets/2026-13.gif");
  padding: 0;
  margin: 0;
  /* backdrop-filter: blur(9px); */
  padding-top: 15vw; /* new! */
  background-size: 300px;
  background-attachment: fixed;

}

li {
  font-size: 3vw;
  font-family: pixel;
  font-weight: normal;
  list-style: none;
  text-align: center;
  padding: 0;
  margin: 0.75em 0;

}

#content {
 /*  background-image: url("assets/Stars-1.gif"); */
}


p{
   font-size: 3vw;
   line-height: 1em;
   font-family: korv;
   font-weight: normal;
   color: var(--two);
   -webkit-text-stroke: 1.5px var(--one);
  text-stroke: 1.5px var(--one);
  text-shadow:
   -2px 2px 0px var(--skugga1),
   2px -2px 0 var(--skugga2);
   letter-spacing: -0.1vw;
   padding: 0;
   margin: 0;
 }

 i {
   font-weight: normal;
   font-style: normal;
   letter-spacing: 0.1em;
 }

 .by {
  color: var(--two);
 }

 .name {
  color: var(--three);
 }

 #footer {
   padding: 1vw 3vw;
 }

 .tiktok {
   padding: 0.5em;
s     }

a.tiktok  {
  text-decoration: none;
  border: 0;
}

a:hover.tiktok  {
  text-decoration: none;
  border: 0;
  background-color: var(--two);
  border-radius: 50%;
}

.tablebutton {
  bsackground-color: red;
  width: 100px;
}

hr {
  height: 1vw;
}

.snurr {
  width: 23vw;
  border-radius: 50%;
  border: 10px groove var(--skugga1);
}

.snurran {
  text-align: center;
}

.bottom {
   background-image: url("assets/2026-12.gif"); 
   display: flex;
   align-items: center;
   justify-content: center;
   background-size: 400px;
}


.donut {
  height: 50vw;
  width: 100vw;
  justify-content:  center;

}

.donut img {
  margin-top: 20vw;
  z-index: 10000;
  width: 30vw;
  animation-name: example;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(15, end);
  transform-origin: center;

}


@keyframes example {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

.donut img:hover {
  animation-name: example2;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(15, end);
  transform-origin: center;
    image-rendering: pixelated;

}

@keyframes example2 {
  from {transform: rotate(0deg);}
  to {transform: rotate(0deg);}
}


@keyframes example {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}


 @media screen and (max-width: 800px) {
   body {
   }

  li {
  font-size: 5vw;
  }

  .togglaren {
    display: none;
  }

  h1 {
    font-size: 7vw;
    -webkit-text-stroke: 1px var(--one);
    text-stroke: 1px var(--one);
    text-shadow:
     -1px 1px 0px var(--skugga1),
     1px -1px 0 var(--skugga2);
  }


  p{
  font-size: 5.5vw;
  letter-spacing: -0.4px;
  -webkit-text-stroke: 1px var(--one);
  text-stroke: 1px var(--one);
  text-shadow:
   -1px 1px 0px var(--skugga1),
   1px -1px 0 var(--skugga2);
  }


  .donut img {
   width: 40vw;
  }


  #wrapper {
    }
    mix-blend-mode: normal;
 }