@layer base, tokens, animations,  components, utilities;

@layer tokens {
	@font-face {
		font-family: Troubleside;
		src: url("https://cdn.jsdelivr.net/gh/chytanka/chytanka.github.io/src/assets/fonts/Troubleside.ttf");
		font-display: swap;
	}
	@font-face  {
  font-family: Sweetie;
  src: url("/fonts/Sweet Cucumber Mocktail.ttf");
}

	:root {
		--ratio: 257 / 364;
		--t: 0.133333334s;
		--min-card-width: 192px;
		--accent: oklch(from #ffd60a l c h);
		--surface: oklch(from #166496 0.12 min(c, 0.0512) h);

		--avarage-l: 0.48;
		--avarage-l-2: 0.36;
		--avarage-base: oklch(from #ffd60a var(--avarage-l) 0.0192 h);
		--text: white;

		--radius: 0.5rem;
		--border-size: 0.25rem;

		background: #fa8282;
		color: var(--text);
		font-size: 16;
		line-height: 1.3;
		font-family: Arial, sans-serif;
	}

	@media (prefers-color-scheme: light) {
		:root {
			--avarage-l: 0.72;
			--avarage-l-2: 0.6;
			--accent: oklch(from #166496 l c h);
			--surface: oklch(from #ffd60a 1 min(c, 0.0256) h);
			--avarage-base: oklch(from #ffd60a 0.48 0.0192 h);
			--text: black;
		}
	}

@layer base {
	body,
	figure {
		margin: 0;
	}

body {
  cursor: url("/img/Fish-Blue.png"), default;
}

a{
color:#000;
text-decoration:underline
}
a:hover{
  cursor: url("/img/Fish-Blue.png"), pointer;
color:#ccc
}

	img {
	 display: block;
  margin-left: auto;
  margin-right: auto;
		width: 160px;
		height: auto;
	}

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

@layer components {
	h1 {
		color: #000;
		font-family: "Sweetie", Garamond;
		margin: 1rem 0 0;
	}

	main {
		padding: 2rem;
	}

	section {
		margin-bottom: 2rem;
		position: relative;
		perspective: 4000px;
		display: grid;
		gap: 1.5rem;
		grid-template-columns: repeat(auto-fill, minmax(var(--min-card-width), 1fr));

		& header {
			grid-column: 1 / -1;
		}
	}

	article {
		--deg: 0.8deg;
		--y: 0;
		--avarage: oklch(from var(--avarage-color) var(--avarage-l) 0.0192 h);
		--shadow-color: oklch(
			from var(--avarage, var(--avarage-base)) var(--avarage-l-2) c h
		);
		--shadow-distance: var(--border-size);
		border: var(--border-size) solid var(--avarage, var(--avarage-base));
		border-radius: var(--radius);
		background-color: var(--avarage, var(--avarage-base));
		background-image: radial-gradient(
			oklch(from var(--shadow-color) l c h) 1px,
			transparent 0px
		);
		background-repeat: repeat;
		background-size: 7px 7px;
		background-position: center;

		box-shadow: 1px 1px var(--surface), var(--shadow-distance) var(--shadow-distance) var(--shadow-color);
		opacity: min(var(--item-scale), 0.8);
		transform: rotate(var(--deg)) translateY(var(--y)) scale(var(--item-scale))
			rotateX(var(--item-angle));
		transition: all var(--t) ease-in-out;
		will-change: transform;
		transform-style: preserve-3d;

		&:hover {
			--deg: 0 !important;
			--y: -1.25ch;
			--shadow-distance: calc(var(--border-size) * 2);
			opacity: 1;
		}
	}

	figure img {
		aspect-ratio: var(--ratio);
		object-fit: cover;
		border-radius: calc(var(--radius) - var(--border-size));
		align-items: center;
	}

	figure figcaption {
		font-family: "Sweetie", Garamond;
		font-size:1em;
		margin: 1ch;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		line-height: 1;
		display: flex;
  justify-content: center; /* Horizontally centers the image */
  align-items: center;
  text-align: center;
	}
}

.popup {
      margin: 70px auto;
      width: 500px;
      position: relative;
      z-index: 999;
      background: transparent;    
    }
.overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        visibility: hidden;
        opacity: 0;
        background:transparent;
    
    }
.overlay:target {
        visibility: visible;
        opacity: 1;
    }

.windows {
  background: #fff;
  position: relative;
  padding:10px;
  height: 500px;
  width: 700px;
  top: 10px;
  margin: 0 auto;
  border-right:1px solid black;
  border-left: 1px solid black; 
  border-bottom: 1px solid black;
  border-radius: 0px 0px 15px 15px;
  font-family: "Sweetie", Garamond;
  text-align: center;
  color:#000;
}

.top {
  background: orange;
  position: absolute;
  margin:0 auto;
  border: 1px solid black;
  height:25px;
  width:700px;
  margin-left:-100px;
  border-radius: 15px 15px 0px 0px;
}
  
button {
  width:25px;
  height:25px;
  border-radius: 5px;
  border:1px solid black;
  background:white; 
  color:black;
 }

#pagetop{
background-color:rgba(0,0,0,.8);
border:3px solid #fff;
box-shadow:0 1px 5px #000;
border-radius:30px;
height:40px;width:40px;
text-align:center;
position:fixed;
bottom:20px;right:20px;
z-index:1000;
}
.arrow{
border-left:3px solid #e1d7b8;
border-top:3px solid #e1d7b8;
position:absolute;
top:40%;left:30%;
height:14px;width:14px;
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg)
}
.menubg01{background:#c78e75}
.menubg02{background:#fa8282}
.menubg03{background:#ffa973}
.menubg04{background:#e6be67}
.menubg05{background:#b9cc5c}
.menubg06{background:#408080}
.menubg07{background:#6ab5ff}