@charset "UTF-8";

:root {
    --x-pos-footer: -50%;
    --y-pos-footer: -50%;

    --left-p: 50%;
    --top-p: 50%;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion) {
    html {
        scroll-behavior: auto
    }
}

header {
    min-height: 5rem;
    width: 100%;
    display: flex;
    place-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0;
    outline: 2px solid white;
    text-align: center;
    background-color: rgb(50, 50, 50);
    color: white;
}

header h1,
p {
    font-family: 'Courier New', Courier, monospace;
}

h1 {
    margin: .5rem 1rem 0
}

p {
    margin: 0 1rem .5rem;
    text-wrap: balance
}

.main-canvas {
    display: flex;
    width: 100%;
    min-height: 15rem;
    height: calc(100vh - 10rem);
    background-color: black;
    border-bottom: 1px solid white;
}

.ycsi {
    position: relative;
    user-select: none;
    -webkit-user-drag: none;
}

.ycsi::after {
    content: "(You can save it as a image: right click; save image as.)";
    position: absolute;
    color: white;
    top: 10px;
    left: 10px;
    pointer-events: none;
    text-wrap: wrap;
}

.ca {
    position: relative;
    user-select: none;
    -webkit-user-drag: none;
}

.ca::after {
    content: "CLICK!!! (You can save it as a image: right click; save image as.)";
    position: absolute;
    color: white;
    top: 10px;
    left: 10px;
    pointer-events: none;
    text-wrap: wrap;
}

.ha {
    position: relative;
    user-select: none;
    -webkit-user-drag: none;
}

.ha::after {
    content: "HOVER!!! (You can save it as a image: right click; save image as.)";
    position: absolute;
    color: white;
    top: 10px;
    left: 10px;
    pointer-events: none;
    text-wrap: wrap;
}

.cmma {
    position: relative;
    user-select: none;
    -webkit-user-drag: none;
}

.cmma::after {
    content: "CLICK and MOVE THE MOUSE!!! (You can save it as a image: right click; save image as.)";
    position: absolute;
    color: white;
    top: 10px;
    left: 10px;
    pointer-events: none;
    text-wrap: wrap;
}

.cmta {
    position: relative;
    user-select: none;
    -webkit-user-drag: none;
}

.cmta::after {
    content: "CLICK MULTIPLE TIMES!!! (You can save it as a image: right click; save image as.)";
    position: absolute;
    color: white;
    top: 10px;
    left: 10px;
    pointer-events: none;
    text-wrap: wrap;
}

button {
    position: absolute;
    inset: 0;
    color: transparent;
    background-color: transparent;
    border: none;
    border-radius: 0;
    user-select: none;
    -webkit-user-drag: none;
}

footer {
    height: 3rem;
    width: 100%;
    background-color: black;
    color: white;
    position: relative;
    overflow: hidden;
}

footer p {
    position: absolute;
    top: var(--top-p);
    left: var(--left-p);
    cursor: default;
    transform: translate(var(--x-pos-footer), var(--y-pos-footer));
    transition: all 200ms linear;
}


#warning {
    font-family: arial;
    text-wrap: balance;
    font-weight: 800;
    text-align: center;
    padding: 5px;
    background-color: #d12828;
    color: black;

}