/*
BASICS
*/
@font-face {
    font-family: 'monogram'; /*a name to be used later*/
    src: url('https://lennypepow.neocities.org/files/monogram-extended.ttf'); /*aaa*/
}
@font-face {
  font-family: 'geistmono-regular';
  src: url('https://lennypepow.neocities.org/files/fonts/GeistMono-Regular.woff2')
}
@font-face {
  font-family: 'geistmono-italic';
  src: url('https://lennypepow.neocities.org/files/fonts/GeistMono-Italic.woff2')
}
@font-face {
  font-family: 'geistmono-medium';
  src: url('https://lennypepow.neocities.org/files/fonts/GeistMono-Medium.woff2')
}
@font-face {
  font-family: 'geistmono-bold';
  src: url('https://lennypepow.neocities.org/files/fonts/GeistMono-Bold.woff2')
}
@font-face {
  font-family: 'monaspace-medium';
  src: url('https://lennypepow.neocities.org/files/fonts/MonaspaceArgon-Medium.otf')
}

body {
  background-color: #000000;
  color: white;
  font-size: 18px;
  margin: 0;
  image-rendering: optimizeSpeed;
  text-rendering: optimizeSpeed;
  cursor: url(files/etc/cursor_main.png), default;

}

p, em, pre, h1, h2, h3, h4, h5, h6 {
  cursor: url(files/etc/cursor_text.png), text;
  padding: 8px;
}

p{text-align: justify;}

h1 {
  border-style: dashed;
  border-width: 4px 0px 0px 0px;
  border-color: #311934;
  padding: 8px 8px 0px 16px;
}

main {
  background-color: black;
  padding: 20px;
  width: 100%;
  text-align: center;
  position: relative;
  perspective: 1000px;
}

li {
  margin: 0px;
  padding-left: 10px;
  list-style-type: none;
}

il {
  margin: 0px;
  padding-left: 10px;
  list-style-type: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 4px solid #000;
  padding: 8px;
  background-color: oklch(0.2118 0.0664 322.94);
}

th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: oklch(0.8324 0.0888 309.18);
  color: black;
  min-width: 140px;
}

a {color: oklch(0.5294 0.1135 1); cursor: url(files/etc/cursor_link.png), alias;}
a:visited {color: oklch(0.2324 0.0518 1);}
a:hover {color: oklch(1 1 1);}

/*
IDS
*/

#navbar {
  font-family: 'geistmono-medium';
  font-size: 12px;
  position: fixed;
  left: 0;
  width: 140px;
  height: 100%;
  padding-top: 16px;
  background-color: oklch(0.8798 0.017 97.74);
  color: oklch(0.0933 0.0148 293.29);
}

#content {
  max-width: calc(100vw - 220px);
  margin: 0 auto;
  font-family: 'geistmono-medium';
  left: 155px;
  position: absolute;
  width: 100%;
  background-color: oklch(0.2059 0.0247 284.82);
  padding: 8px 24px 8px 24px;
}

#article {
  max-width: calc(80vw - 200px);
  margin: 0 auto;
  font-family: 'geistmono-regular';
  left: 300px;
  position: absolute;
  background-color: oklch(0.2059 0.0247 284.82);
}

#computer {
  color: #90e060;
  background-color: #204040;
  padding: 16px 32px 16px 32px;
}

#em {
  font-family: 'geistmono-italic';
  text-align: center;
}

#intro-image {
  animation-name: intro-image;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

#LeftSide, #RightSide {
  width:50%;
  border:10px;
  box-sizing: border-box;
}

#g2025, #g2024, #g2023 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 16px;
}

#g2025 div {
  background-color: black;
}

#gdesc {
  padding: 0px;
  text-align: center;
}

/*
CLASSES
*/

.bbg {
  background-color: #000;
}

.wbg {
  background-color: #fff;
}

.rbg {
  background-color: #972121;
}

.rfg {
  color: #f23e3e;
}

.imgleft {
  float: left;
  padding: 8px 8px 8px 0px;
}

.box {
  background-color: #111;
  padding: 10px;
}

.sublist {
  padding-left: 20px;
}

.book {
  position: absolute;
  animation-name: book-perspective;
  animation-duration: 16s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.book-side {
  position: absolute;
  background-color: purple;
  width: 400px;
  height: 500px;
  align-content: center;
}

.book-cover-left {
  position: absolute;
  transform-origin: left;
  transform: rotateY(-95deg);
  transform-style: preserve-3d;
  animation-name: book-open-left;
  animation-fill-mode: forwards;
  animation-duration: 4s;
  animation-delay: 1s;
  animation-timing-function: cubic-bezier(0.32, 0.08, 0.48, 1);
}

.book-cover-right {
  position: absolute;
  transform-origin: left;
  transform: rotateY(-85deg);
  transform-style: preserve-3d;
  animation-name: book-open-right;
  animation-fill-mode: forwards;
  animation-duration: 4s;
  animation-delay: 1s;
  animation-timing-function: cubic-bezier(0.32, 0.08, 0.48, 1);
}

.book-page-left {
  position: absolute;
  transform-origin: left;
  transform: rotateY(-92deg);
  transform-style: preserve-3d;
  animation-name: book-open-page-left;
  animation-fill-mode: forwards;
  animation-duration: 6s;
  animation-delay: 1.1s;
  animation-timing-function: cubic-bezier(0.32, 0.08, 0.48, 1);
}

.book-page-right {
  position: absolute;
  transform-origin: left;
  transform: rotateY(-88deg);
  transform-style: preserve-3d;
  animation-name: book-open-page-right;
  animation-fill-mode: forwards;
  animation-duration: 6s;
  animation-delay: 1.1s;
  animation-timing-function: cubic-bezier(0.32, 0.08, 0.48, 1);
}

.funny-bounce {
  animation-name: funny-bounce;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.5, .2, 0.5, 1) ;
}

.funny-rotation {
  animation-name: funny-rotation;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.5, .2, 0.5, 1) ;
}

.arrows {
  animation-name: arrows-ani;
  animation-iteration-count: infinite;
  animation-duration: 8s;
  animation-timing-function: ease-in-out;
}

.front-image {
  filter: invert(100%);
  right: -8px;
  bottom: 40px;
  position: absolute;
}

.rainbow {
  color: red;
  animation-name: rainbow;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.float-icon {
  animation-name: floating-icon;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.float-default {
  animation-name: floating-default;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.card-container {
  padding: 10px;
  flex-grow: 1;
  flex-basis: 200px;
}

.card {
  padding: 10px;
  text-align: center;
  transition: all 0.5s cubic-bezier(0,1,1,1);
}

.card-image {
  width: 200px;
  height: 200px;
}

.card:hover {
  transform: translateY(-20px);
}

.checked { 
  text-decoration: line-through; 
  font-style: italic;
}

.chibi-container {
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 1;
}
 
.chibi {
  position: absolute;
  width: 160px;
  height: 160px;
  animation-name: chibi-move;
  animation-duration: 16s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

/*
ANIMATIONS
*/

@keyframes chibi-move {
  0%, 100% {
    translate: 0 -40px;
  }
  50% {
    translate: 0 -30px;
  }
}

@keyframes intro-image {
  0%, 100% {transform: translateY(0px);}
  50% {transform: translateY(40px);}
}

@keyframes funny-bounce {
  0%, 100% {transform: translateY(0px);}
  50% {transform: translateY(50px);}
}

@keyframes funny-rotation {
  0% {transform: rotateY(0deg);}
  100% {transform: rotateY(360deg);}
}

@keyframes book-perspective {
  0%, 100% {transform: rotateZ(-8deg) rotateY(-10deg)}
  50% {transform: rotateX(2deg) rotateZ(-10deg) rotateY(-20deg)}
}

@keyframes book-open-left {
  0% {transform: rotateY(-95deg);}
  100% {transform:rotateY(-180deg);}
}

@keyframes book-open-right {
  0% {transform: rotateY(-85deg);}
  100% {transform: rotateY(0deg);}
}

@keyframes book-open-page-left {
  0% {
    transform: rotateY(-92deg);
  }
  100% {
    transform: rotateY(-130deg);
  }
}
@keyframes book-open-page-right {
  0% {transform: rotateY(-88deg);}
  100% {transform: rotateY(-5deg);}
}

@keyframes arrows-ani {
  0%, 100% {transform: rotateY(-32deg); filter: brightness(0.9)}
  25% {transform: rotateX(32deg); filter: brightness(1)}
  50% {transform: rotateY(32deg); filter: brightness(0.8)}
  75% {transform: rotateX(-32deg); filter: brightness(0.6)}
}


@keyframes rainbow {
  0% {color: red;}
  25% {color: green}
  50% {color: cyan}
  75% {color: purple}
  100% {color: red;}
}

@keyframes floating-icon {
  0%, 100% {transform: translateY(8px) rotateX(8deg) rotateY(20deg) rotateZ(-8deg);}
  50% {transform: translateY(0px) rotateX(0deg) rotateY(20deg) rotateZ(-10deg);}
}

@keyframes floating-default {
  0%, 100% {transform: translateY(0px)}
  50% {transform: translateY(8px)}
}