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

	basic styling

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

:root{
   --green-bg: #F0F6D2;
   --shadow-color: 74deg 28% 58%;
}

body{
   background-color: var(--green-bg);
   background-image: url("/background/splash/atelier.png"), url("/background/0430.jpg");
      background-size: 50svw auto, 15svw auto;
      background-position: 110svw bottom, center top;
}

h1::before, 
h1::after,
nav a::before{
   --size: 0.88em;
   content: "";
   display: inline-block;
   width: var(--size);
   height: var(--size);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
}

main{
   position: fixed;
   top: var(--gap);
   left: var(--gap);
   box-shadow: var(--shadow-elevation-medium);
}

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

	nav links~~

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

:is(nav, footer) a{
   text-decoration: none;
}

nav a{
   display: block;
   width: fit-content;
}

nav a:nth-of-type(odd),
footer a{
   color: var(--red-link);
}

nav a:nth-of-type(even){
   color: var(--green-link);
}

nav a:is(:hover, :focus){
   font-weight: bold;/
}

nav a::before{
   --size: 1.5em;
   margin-right: 1ch;
   background-position-y: bottom;
}

nav a[href*="photo"]::before{
   --size: 1.75em;
   background-image: url("/stickers/cutie/3_autumn/O06.png");
}

nav a[href*="journal"]::before{
   --size: 1.85em;
   margin-right: 0.8ch;
   background-image: url("/stickers/dotty/3_autumn/C07.png");
}

nav a[href*="original"]::before{
   --size: 1.75em;
   background-image: url("/stickers/cutie/2_summer/I05.png");
}

nav a[href*="wardrobe"]::before{
   margin-right: 1.5ch;
   background-image: url("/stickers/dotty/4_winter/A07.png");
}

nav a[href*="pixel"]::before{
   --size: 1.2em;
   margin-left: 0.5ch;
   margin-right: 1.5ch;
   background-image: url("/stickers/dotty/1_spring/E11.png");
}

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

	heading!!!!!!

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

h1{
   text-align: center;
   margin: 0 auto 0.5em auto;
}

h1::before, 
h1::after{
   background-image: url("/stickers/dotty/2_summer/F16.png");
}

h1::before{
   margin-right: 0.5ch;
}

h1::after{
   margin-left: 0.5ch;
}

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

	footer!!! yes...very good

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

footer{
   margin-top: 1em;
   margin-bottom: -0.35em;
   line-height: 1.5;
}

footer a:is(:hover, :focus){
   color: var(--black);
}