/*...........................................................

	variables

..........................*/

:root{
   --sidebar-size: 22svw;
}

/*...........................................................

	basic styling

..........................*/

body{
   text-align: center;
}

p{
   max-width: 50ch;
}

a{
   text-decoration: none;
}

img{
   max-width: 100%;
}

/*...........................

	   shadows!!!!

..........................*/

#sidebar, main{
   text-shadow: var(--literal-text-shadow);
   filter: var(--drop-shadow-medium);
}

main{
   box-shadow: var(--shadow-elevation-medium);
}

#vector, main, footer{
   filter: var(--drop-shadow-low);
} 

#sidebar > div > img, main img{
   filter: var(--drop-text-shadow);
}

/*..........................

		borders

..........................*/

#sidebar >*, main{
   border: var(--border-level-1);
      border-style: outset;
      border-radius: var(--border-radius-level-1);
}

#sidebar > div:first-child{
   border-bottom: 0;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
}

#sidebar > div:nth-child(2){
   border-top: 0;
   border-bottom: 0;
   border-radius: 0;
}

#sidebar > div:last-child{
   border-top: 0;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
}

/*...........................................................

	   sidebar!!!!!!!

..........................*/

#sidebar{
   --bg-size: 6rem;
   --sidebar-top: calc(var(--bg-size));
   --sidebar-bottom: calc(var(--bg-size) / 2 + 0.5em);
   font-size: 0.9em;
   box-sizing: border-box;
   width: var(--sidebar-size);
   min-height: calc(var(--sidebar-size) / 2);
   position: fixed;
      top: calc(var(--sidebar-size) * 0.25);
      left: calc(var(--sidebar-size) * 0.15);
   display: grid;
      grid-template-rows: var(--sidebar-top) 1fr var(--sidebar-bottom);
}

#sidebar > div:first-child, #sidebar > div:last-child{
   background-repeat: repeat-x;
   background-size: auto 100%;
}

#sidebar > div:nth-child(2){
   background: var(--white-texture);
   padding-bottom: 1em;
}

#sidebar p{
   max-width: 20ch;
}

#icon{
   width: 75%;
   margin: auto;
   margin-top: 1em;
   display: grid;
      grid-template-columns: 1em 1fr 1em;
      gap: 1em;
      align-items: center;
}

#icon img{
   max-width: 100%;
   border: var(--border-level-2);
      border-style: outset;
      border-radius: var(--border-radius-level-1);
   box-shadow: var(--shadow-elevation-medium-text);
}

/*..........................

	angel wings on side of icon

..........................*/

#icon::before, #icon::after{
   --size: 1em;
   content: "";
   display: inline-block;
   width: var(--size);
   height: var(--size);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   filter: var(--drop-text-shadow) var(--drop-text-shadow);
}

#icon::before{
	background-image: url("/assets/pixel/misc/wwl.png");
}

#icon::after{
	background-image: url("/assets/pixel/misc/wwr.gif");
}

/*..........................

	animates static gif

..........................*/

@keyframes bounce{
   to{transform: translateY(-2px);}
}

.bounce{
   animation: bounce .25s linear alternate infinite;
}

/*...........................................................

	 cute corner image

..........................*/

#vector{
   position: fixed;
      right: var(--gap);
      bottom: var(--half-gap);
   max-width: 9.9svw;
   z-index: 99;
}

/*...........................................................

	   main content

..........................*/

main, footer{
   width: calc(75svw - var(--sidebar-size));
   margin-left: calc(var(--sidebar-size) + 8svw);
}

main{
   margin-top: calc(var(--sidebar-size) * 0.1);
   margin-left: calc(var(--sidebar-size) + 8svw);
   margin-bottom: calc(var(--sidebar-size) * 0.1);
   background: var(--white-texture);
}

/*..........................

	cute stripe thing

..........................*/

.stripe{
   width: 100%;
   height: 3em;
   display: block;
      background-size: contain;
      background-repeat: round no-repeat;
      background-position: center top;
   filter: var(--drop-text-shadow) var(--drop-text-shadow);
}

/*..........................

	   headings

..........................*/

h1, h2, h3{
   font-family: var(--font);
   margin: auto;
}

h1{
   font-size: 1.5em;
}

h2{
   font-size: 1.1em;
}

h1 + p{
   margin: 0.5em auto;
   margin-top: -1em;
   font-size: 0.9em;
   font-style: italic;
}

/*..........................

	   likeness meter

..........................*/

#likeness img{
   height: 0.9em;
}

#likeness h2{
   margin-bottom: 0;
}

#likeness > div{
   display: inline-block;
   margin: 0.5em auto;
}

#likeness p{
   margin: 0 auto;
}

/*..........................

	   archetypes list

..........................*/

#archetypes ul{
   list-style: none;
   padding: 0;
   margin: 0;
   width: 60%;
   margin: 1em auto;
   display: flex;
      flex-flow: row wrap;
      gap: 0.5em;
      justify-content: space-evenly;
      align-items: center;
}

#archetypes li{
   display: block;
   text-align: center;
   width: 30%;
}