body {
    display: grid;
    background-color: #536d75;
    background-image:
      radial-gradient(
         circle at 33% 20%,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.1) 20%,
        rgba(0, 0, 0, 0.2) 40%,
        rgba(0, 0, 0, 0.3) 60%,
        rgba(0, 0, 0, 0.4) 80%,
        rgba(0, 0, 0, 0.5) 100%
      ),
      repeating-linear-gradient(
        210deg,
        rgba(77, 102, 112, 0.8),
        rgba(77, 102, 112, 0.8) 1px,
        rgba(57, 82, 92, 0.8) 1px,
        rgba(57, 82, 92, 0.8) 2px
      ),
      repeating-linear-gradient(
        90deg,
        rgba(77, 102, 112, 0.8),
        rgba(77, 102, 112, 0.8) 1px,
        rgba(57, 82, 92, 0.8) 1px,
        rgba(57, 82, 92, 0.8) 2px
      );
    color: #ffa47c;
    margin: 0px;
}
* {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bold;
    font-size: medium;
}
.container {
    background-image: linear-gradient(165deg, #3c565d, #081616);
    border: 2px solid black;
    border-top: 2px solid #92aeb5;
    border-left: 2px solid #0f2124;
    box-shadow: 15px 30px 30px rgba(0, 0, 0, 0.75);
    padding: 5px;
}
.container-float {
    margin-left: auto; margin-right: auto;
    max-width: fit-content;
    margin-top: 20vh;
}
.container-header {
    display:grid;
    grid-template: max-content / max-content 1fr max-content;
    align-items: center;
    border-left: none;
    border-right: none;
    border-top: none;
    box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.75);
    view-transition-name: header-transition;
}
.button {
    display: block;
    color: black;
    border: 2px solid black;
    background-color: #627e87;
    border-radius: 4px;
    margin: 2px;
    text-align: center;
    padding: 3px;
    text-decoration: none;
    cursor: pointer;
}
.button:hover {
    transform: translateY(1px);
    border: 2px solid #91ffff;
    background-color: #2fcbef;
}
.button:active {
    transform: translateY(2px);
    border: 2px solid #2fcbef;
    background-color: #aee8f5;
}
form {
    display: contents;
}
input[type="text"] {
    background-color: #081616;
    color: #2fcbef;
    border: 2px solid black;
}
.input-large {
    font-size: large;
}
.plain-link {
    color: #ffa47c;
    text-decoration: none;
}

@keyframes fade-in {
    from { opacity: 0; }
}

@keyframes fade-out {
    to { opacity: 0; }
}

@keyframes slide-from-right {
    from { transform: translateX(90px); }
}

@keyframes slide-to-left {
    to { transform: translateX(-90px); }
}

::view-transition-old(slide-it) {
    animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(slide-it) {
    animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

@keyframes sidebar-to-left {
    from { width: 400px; height: 100%; }
    to { width: 0; height: 100%; }
}

@keyframes sidebar-from-left {
    from { width: 0; height: 100%; }
    to { width: 400px; height: 100%; }
}

::view-transition-old(sidebar-transition) {
    animation: linear both sidebar-to-left;
}
::view-transition-new(sidebar-transition) {
    animation: linear both sidebar-from-left;
}