:root{
 --palette-lightest: #dff9ff;
 --palette-light: #aaf0ff;
 --palette-accent: #50e0ff;
 --palette-dark: #287080;
 --palette-glass: #50e0ff40;
}

body{
 background-image: url(../images/background_light.png), linear-gradient(#314f6c, #4b718c, #7da4bf, #5b968d, #25760d);
 background-color: var(--palette-light);
 background-attachment: fixed;
 background-size: cover;
 background-position: center;
 padding: 0;
 margin: 0;
 font-size: 1rem;
}

main{
 padding: 64px;
}

headder{
 display: flex;
 justify-content: space-evenly;
 align-items: center;
 background-color: var(--palette-glass);
 box-shadow: 0 0 4px black;
 backdrop-filter: blur(4px);
 height: 64px;
}

button{
 margin: 4px;
 color: var(--palette-lightest);
 background-color: var(--palette-glass);
 padding: 6px 12px 6px 12px;
 border-radius: 24px;
 backdrop-filter: blur(4px);
 transition: box-shadow .125s;
 box-shadow: 2px 4px 4px #00000040;
 border-top: 2px solid #ffffff80;
 border-left: 2px solid #ffffff80;
 border-bottom: 2px solid #00000080;
 border-right: 2px solid #00000080;
}

button:active{
 color: white;
 box-shadow: 0 0 0 #00000040;
}

button:hover{
 color: white;
}

.window_header{
 margin: 64px;
 background-color: var(--palette-glass);
 padding: 6px;
 border-top: 2px solid #ffffff80;
 border-left: 2px solid #ffffff80;
 border-bottom: 2px solid #00000080;
 border-right: 2px solid #00000080;
 border-radius: 12px 12px 8px 8px;
 backdrop-filter: blur(4px);
 width: fit-content;
 margin-left: auto;
 margin-right: auto;
}

.window_body{
 color: var(--palette-dark);
 background-color: var(--palette-light);
 padding: 6px;
 font-family: sans-serif;
 max-width: 75ch;
}

.title{
 margin: 0 0 6px 8px;
 color: white;
 font-weight: bold;
 text-shadow: 2px 4px 2px #00000040;
}

@media (orientation: portrait) {
 body {
  font-size: 2rem;
 }
 Button{
  font-size: 1.5rem;
 }
}

@media (prefers-color-scheme: dark) {
 body{
  background-image: url(../images/background_dark.png), linear-gradient(#070a14, #182f3c, #3c5868, #2b4349, #000b00);
  background-color: var(--palette-dark);
 }
 .window_body{
  color: var(--palette-light);
  background-color: var(--palette-dark);
 }
}