@font-face {
	font-family: spirit;
	src: url(https://file.garden/aekRj9vojSCYQ73S/font/spirit.ttf);
}

@font-face {
	font-family: pc-9800;
	src: url(https://file.garden/aekRj9vojSCYQ73S/font/pc-9800.woff2);
}

:root {
      --viewport-height: 100vh;
    margin: auto;
    box-sizing: border-box;
}


html {
  overflow: hidden;
}

body {
  background: var(--bodybg);
  height: fit-content;
  font-size: 8px;
	font-family: pc-9800;
  color: var(--color);
  text-shadow: var(--colorsh);
}


* {
    margin: auto;
    box-sizing: border-box;
}

a {
  color: white;
  text-decoration: none;
}


a:hover {
  font-style: italic;
}

::selection {
color: white;
background: transparent;
}

left:selection {
color: white;
background: transparent;
  
}

  .fadeInDown {
  animation-name: fadeInDown;
  animation-duration: 1s;
  animation-fill-mode: both;
  }
  @-webkit-keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 

[data-theme="light"] {
  --color: white;
  --colorsh: 1px 1px 0 black;
	--bodybg: #DEDEDE;
	--text-color: #FFFFFF;
	--titlecolor: white;
	--titlesh: 5px 1px 2px black;
	--containerbg: url(https://file.garden/aekRj9vojSCYQ73S/gif/ayaka.gif);
	--containerb-img: url(https://file.garden/aekRj9vojSCYQ73S/borders/pink.png) 30 repeat;
	--enterb: 1px solid #feb1dc;
	--enterbg: #ffe5f1;
	--box-shadow: inset 10px 0 6px -10px #feb1dc, inset -10px 0 6px -10px rgba(254 177 220), inset 0 10px 6px -10px #ffffff, inset 0 -10px 6px -10px rgb(255 255 255 / 76%);
	 --bgclip: border-box;

}

[data-theme="dark"] {
  --color: black;
  --colorsh: 1px 1px 0 white;
  --bodybg: #1d2029;
	--titlecolor: #7c838f;
	--titlesh: 5px 1px 2px black;
	--containerbg: url(https://file.garden/aekRj9vojSCYQ73S/img/columbina.jpeg);
	--containerb-img: url(https://file.garden/aekRj9vojSCYQ73S/borders/dalace1.png) 21 repeat;
	--enterb: 1px solid #161421;
	--enterbg: #2B1B35;
  --box-shadow: inset 10px 0 9px 6px #140E15, inset -10px 0 9px 6px #140E15, inset 0 10px 10px 6px #513364;
  --bgclip: padding-box;
}


.enter {
  color: white;
    width: 11em;
    height: 5em;
    background: var(--enterbg);
    border-radius: 2em;
    border: var(--enterb);
    box-shadow: var(--box-shadow);
    position: relative;
}

.enter:hover {
  font-style: italic;
  box-shadow: var(--box-shadow);
  font-family: 'spirit';
}

.enter:active {
  zoom: 0.99;
}

.page {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  min-height: var(--viewport-height);
}

.container {
  padding: 2em;
  width: 95%;
  height: fit-content;
  display: grid;
  justify-content: center;
  grid-auto-flow: column;
  grid-template-areas:         "left right"        "bottom bottom";
  background: var(--containerbg);
  border-width: 20px;
  border-style: solid;
  border-image: var(--containerb-img);
  background-position: center;
  background-clip: var(--bgclip);
}


.left {
    font-family: spirit;
    font-size: 3em;
    color: var(--titlecolor);
    text-shadow: var(--titlesh);
    font-weight: bold;
    grid-area: left;
}


.right {
height: 200px;
    width: 200px;
    align-content: center;
    text-align: center;
    background: url(https://file.garden/aekRj9vojSCYQ73S/png/lacey.png);
    background-size: cover;
        background-repeat: no-repeat;
        grid-area: right;
}

.bottom {
grid-area: bottom;
width: stretch;
text-align: center;
font-size: small;
}

/* cr koiwaprimevera */
   
#text {
 animation: pop 1.2s ease-in-out infinite alternate;
}

@keyframes slide {
0% {
background-position-x: 0%;
}
100% {
background-position-x: 300vw;
}
}


@keyframes pop {
from {
transform:scale(0.95)
}

50% {
transform:scale(1)
}

to {
transform:scale(0.95)
}
}

@-webkit-keyframes pop {
from {
-webkit-transform:scale(0.95)

}

50% {
-webkit-transform:scale(1)

}

to {
-webkit-transform:scale(0.95)

}
}

.png {
  position: absolute;
  background-image: url('https://file.garden/aekRj9vojSCYQ73S/png/lamb.png');
}

.mode {
    position: absolute;
    bottom: 7em;
    width: fit-content;
    height: fit-content;
    background: var(--enterbg);
    color: white;
    box-shadow: var(--box-shadow);
    border: var(--enterb);
    border-radius: 1em;
}

@media screen and (min-width: 769px) {

body {
  font-size: 14px;
  background-size: cover;
  background-position-x: center;
}

.container {
  width: max-content;
  height: fit-content;
  padding: 5em;
  display: grid;
  justify-content: center;
  grid-auto-flow: column;
  grid-template-areas:"left right" "bottom bottom";

}

.bottom {
  font-size: 16px;
}

}