:root{
	--purple-texture: var(--purple) url("/background/texture/purple3.png");
   --purple: hsl(262, 64%, 73%);
   --purple-bg: hsl(262, 100%, 87%);
   --shadow-color: 266deg 29% 54%;
   --scrollbar-thumb: var(--purple-texture);
   --scrollbar-button: url("/assets/pixel/tech/03.gif");
}

body{
   text-align: center;
   background-color: var(--purple-bg);
   background-image: url("/background/21.png");
      background-size: 4%;
}

main{
   width: 50svw;
   margin: var(--gap) auto;
   box-shadow: var(--shadow-elevation-high);
}

footer{
   filter: var(--drop-shadow-medium);
   text-shadow: var(--text-shadow-white);
   font-weight: bold;
}

a{
   color: var(--purple);
}

a:hover{
   color: var(--blue);
}

ol{
   margin: 1em auto;
      display: flex;
         flex-flow: column wrap;
         align-items: flex-start;
         align-content: center;
   list-style-type: none;   
   width: 33ch; 
   padding: 0;
}

li{
   width: 100%;
   margin-bottom: 0.5em;
   text-align: center;
}

li a::before, li a::after{
   --size: 0.75em;
   content: "";
   display: inline-block;
   width: var(--size);
   height: var(--size);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
   margin: 0 0.5em;
}

li:nth-of-type(odd) a::before, li:nth-of-type(even) a::after{
	background-image: url("/stickers/cutie/4_winter/K11.png");
}

li:nth-of-type(even) a::before, li:nth-of-type(odd) a::after{
	background-image: url("/stickers/cutie/4_winter/K16.png");
}

.texture{
   padding: 3svw!important;
}

.texture > div{
   --back-position: 0.75em;
   background-color: var(--white2);
   background: var(--white-texture);
      background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
      background-position: 
      var(--back-position) var(--back-position),
      calc(100% - var(--back-position)) var(--back-position),
      var(--back-position) calc(100% - var(--back-position)),
      calc(100% - var(--back-position)) calc(100% - var(--back-position)),
      0 0
      ;
      background-size: 2em;
		background-image: 
			url("/stickers/cutie/4_winter/K12.png"),
			url("/stickers/cutie/4_winter/K15.png"),
			url("/stickers/cutie/4_winter/K05.png"),
			url("/stickers/cutie/4_winter/K05.png"),
			url("/background/texture/white.png");
}

.texture > div >*{
   filter: var(--drop-text-shadow);
}

h2{
}

h2::before, h2::after{
   --size: 1em;
   content: "";
   display: inline-block;
   width: calc(2 * var(--size));
   height: var(--size);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center bottom;
   margin: 0 0.5em;
}

h2:nth-of-type(odd)::before, h2:nth-of-type(even)::after{
	background-image: url("/stickers/cutie/4_winter/J06.png");
}

h2:nth-of-type(odd)::after, h2:nth-of-type(even)::before{
	background-image: url("/stickers/cutie/4_winter/J07.png");
}