:root{
   --shadow-color: 222deg 80% 30%;
   --text-shadow-color: 30deg 15% 25%;
   --black: #000E4E;
}

body{
   background-color: var(--blue-bg);
   background-image: url("./assets/ultimate.png");
      background-size: cover;
      background-position: bottom center;
   text-align: center;
   font-weight: bold;
   text-shadow: var(--text-shadow-white);
   overflow: hidden;
}

a{
   text-decoration: none;
}

main{
   background-color: rgba(255,255,255,0.5);
   backdrop-filter: blur(0.075svw);
   box-shadow: 0 0 1svw 1svw rgba(255,255,255,0.5);
   margin: 0 auto;
   width: fit-content;
}

main > *, footer{
   filter: var(--drop-shadow-low);
}

h1{
   filter: var(--drop-shadow-low) var(--drop-shadow-low);
}

h1::before, 
h1::after{
   --size: 1em;
   content: "";
   display: inline-block;
   width: var(--size);
   height: var(--size);
   background-image: url("/stickers/yummy/orange/D07_A.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center bottom;
}

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

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

main p{
   max-width: 55ch;
}

strong{
   font-size: 1.1em;
   text-transform: uppercase;
}

nav{
   margin: 1.5em auto 1em auto;
}

button{
   box-shadow: var(--shadow-elevation-medium);
   font-weight: bold;
   width: 30ch;
   margin: 0.5em;
   padding-top: 1.25ch!important;
   padding-bottom: 1ch!important;
   font-size: 0.8em;
   line-height: 1.5;
   font-family: var(--font);
   box-sizing: border-box;
}

button, button:hover{
   transition: filter 0.2s ease-in-out, transform 0.2s ease-in-out;
}

button:hover{
   filter: var(--drop-shadow-low);
   transform: scale(1.05) translate(-0.75svw, -0.5svh);
}

a:last-child button{
   --padding: 6ch;
   padding-left: var(--padding);
   padding-right: var(--padding);
   margin-left: 1.5em;
}