:root{
   --main-height: 100svh;
   --main-width: calc(var(--main-height) * 0.66);
   --side-width: calc((100svw - var(--main-width)) / 2 - (2 * 1em));
   --section-size: calc(var(--side-width) - (2 * var(--outline-width)) - 2em);
   --outline-width:0.75svh;
   --white: #F1F0F3;
   --black: #7463B5;
   --blue: #CAD5F2;
   --pink: #F072B6;
   --lime: #CED896;
   --green: #80D2AB;
   --red: #D2353E;
   --orange: #E6B88A;
   --imagine: var(--lime);
   --draft: var(--orange);
   --polish: var(--green);
   --complete: var(--pink);
   --gap: 1em;
}

body{
   margin: 0 auto;
   font-size: 3.5svh;
   background-color: var(--blue);
      background-image: url("background/11.png");
      background-size: auto 12svh;
}

a{
   color: var(--red);
   text-decoration: none;
}

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

a, a:hover{
   transition: color 0.2s ease;
}

nav{
   margin-bottom: 1em;
}

main, section{
   border: 0.75svh solid var(--black);
   outline: var(--outline-width) solid var(--white);
}

main{
   background-image: url("background/note_01.png"), url("background/note_02.png");
      background-position: 0 0, 0 100%;
      background-repeat: no-repeat;
      background-size: 100% auto;
   height: var(--main-height);
   width: var(--main-width);
   background-color: var(--white);
   margin: 0 auto;
   border-top: 0;
   border-bottom: 0;
}

h1{
   margin: 0;
   text-align: center;
   padding-top: 0.5em;
   margin-bottom: calc(var(--main-width) * 0.2);
}

h1 + div{
   height: calc(var(--main-width) * 0.55);
   overflow-y: scroll;
   padding-right: 0.15em;
   box-sizing: border-box;
}

ul{
   list-style-position: outside;
   list-style-type: none;
   padding-left: 0.5em;
}

li::before{
   content: "\2022";
   display: block;
   float: left;
   font-size: 1.25em;
	text-shadow: 
	  0.033em 0.033em var(--black),
	  -0.033em 0.033em var(--black),
	  -0.033em -0.033em var(--black),
	  0.033em -0.033em var(--black)
	  ;
}

li.imagine::before{
   color: var(--imagine);
}

li.draft::before{
   color: var(--draft);
}

li.polish::before{
   color: var(--polish);
}

li.complete::before{
   color: var(--complete);
}

li::after{
   display: block;
   font-size: 0.88em;
   margin-left: 2em;
}

li.code::after{
   content: "I am: coding";
}

li.write::after{
   content: "I am: writing";
}

li.draw::after{
   content: "I am: drawing";
}

li.code.write::after{
   content: "I am: coding, writing";
}

li.code.write.draw::after{
   content: "I am: coding, writing, drawing";
}

li.imagine::after{
   content: "I haven't started yet...";
}

li.complete::after{
   content: "YAY! ALL DONE!";
}

li#diary::after{
   content: "Finished!! 2023.03.26";
}

li#task::after{
   content: "Finished!! 2023.03.25";
}

section{
   --outline-width:0.65svh;
   outline-width: var(--outline-width); 
   position: fixed;
      bottom: var(--gap);
      right: var(--gap);
   width: var(--section-size);
   height: calc(var(--section-size) / 1.25);
   box-sizing: border-box;
   display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: space-evenly;
   text-shadow: 
      0.033em 0.033em var(--white2),
      -0.033em 0.033em var(--white2),
      -0.033em -0.033em var(--white2),
      0.033em -0.033em var(--white2)
      ;
   background-color: var(--white);
   text-align: center;
}

section b{
   font-size: 1.15em;
   width: 100%;
   display: block;
   background-color: var(--blue);
   padding: 0.15em 0;
   border: 0.075em solid var(--black);
}

section span{
   background-color: var(--bg);
   min-width: 50%;
   padding: 0.1em 0;
   border: 0.1em solid var(--black);
   border-radius: 1em;
   font-weight: bold;
}

section span.imagine{
   --bg: var(--imagine);
}

section span.draft{
   --bg: var(--draft);
}

section span.polish{
   --bg: var(--polish);
}

section span.complete{
   --bg: var(--complete);
}