:root {
    --WindowX: 50vw;
    --WindowY: 50vh
}

body {
    background-color: #008080;
    background-image: url(/images/wip.png);
    background-repeat: no-repeat;
}

canvas {
    background-color: white;
    position: absolute;
    image-rendering: pixelated;
    width: 400px;
    height: 400px;
}
#Cat {
    width: 116px;
    transform: translate(142px, 25px);
}
#Trampoline {
    transform: translate(52.5px, 200px);
    width: 295px;
}
#TrampolineContainer {
    border: 4px inset black;
    background-color: white;
    position: absolute;
    width: 400px;
    height: 400px;
    transform: translate(-4px, 4px);
}

#Window {
    transform: translate(var(--WindowX), var(--WindowY));
    border: 4px outset white;
    position: absolute;
    background-color: lightgrey;
    width: fit-content;
    width: 400px;
    height: 500px;
    padding: 4px;
    user-select: none;
    overflow: hidden;
}

#Window #Header{
    height: 25px;
    background-color: darkblue;
    padding-left: 5px;
    margin: 0;
    display: grid;
    grid-template-columns: auto 25px;
}

#Header p {
    font-size: 21px;
    font-weight: 800;
    text-align: left;
    font-family: 'Courier New', Courier, monospace;
    margin: 0;
}

#Header a {
    font-family: 'Courier New', Courier, monospace;
    font-weight: 800;
    width: 14px;
    height: 14px;
    color: black;
    transform: translate(3px, 3px);
    font-size: 13px;
    background-color: lightgray;
    text-align: center;
    border: 2px outset white;
}pooo3oppy

#Header a:hover {
    cursor: pointer;            
}

#Header a:active {
    border-style: inset;
}

#Tracker {
    display: grid;
    padding: 0px 20px;
    grid-template-columns: 100px auto;
}

#Tracker h2, #Tracker h1 {
    transform: translateY(420px);
    padding: 0;
    margin: 0;
    color: black;
    font-size: 21px;
    font-weight: 800;
    text-align: left;
    font-family: 'Courier New', Courier, monospace;
}

#Tracker h1 {
    text-align: right;
}

.hidden {
    display: none;
}