@font-face {
    font-family: "Morris Roman";
    src: url('../font/ArgosGeorge.ttf') format('truetype');
  }

body {
    margin: 0;
    padding: 0;
    font-family: Morris Roman;
    font-size: 1.3em;
    overflow: hidden;
    background-image: url('../art/bg.png');
    background-size: auto 100%;
}

input {
    background: none;
    border: none;
    border-bottom: 1px solid;
    font-family: Morris Roman;
    font-size: 1.2em;
    outline: none;
}

input:focus {
    border: none;
    border-bottom: 2px solid;
}

canvas {
    background-image: url('../art/bg.png');
    background-size: auto 100%;
}

canvas.clicking { cursor: crosshair; }
canvas.dragging { cursor: grabbing; }

main {
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}

.imgButton {
    height: 30px;
    filter: contrast(0%) brightness(140%);
    opacity: 0.6;
}

.imgButton::after {
    position: absolute;
    content: 'test';
    left: -20px;
}

.imgButton:hover {
    cursor: pointer;
    opacity: 1;
}

.card{
    position: absolute;
    width: 600px;
    background-color: rgba(213, 203, 95, 0.9);
    transition: 0.5s;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 1em 1.5em 2em;
    clip-path: polygon(3% 0, 7% 1%, 11% 0%, 16% 2%, 20% 0, 23% 2%, 28% 2%, 32% 1%, 35% 1%, 39% 3%, 41% 1%, 45% 0%, 47% 2%, 50% 2%, 53% 0, 58% 2%, 60% 2%, 63% 1%, 65% 0%, 67% 2%, 69% 2%, 73% 1%, 76% 1%, 79% 0, 82% 1%, 85% 0, 87% 1%, 89% 0, 92% 1%, 96% 0, 98% 3%, 99% 3%, 99% 6%, 100% 11%, 98% 15%, 100% 21%, 99% 28%, 100% 32%, 99% 35%, 99% 40%, 100% 43%, 99% 48%, 100% 53%, 100% 57%, 99% 60%, 100% 64%, 100% 68%, 99% 72%, 100% 75%, 100% 79%, 99% 83%, 100% 86%, 100% 90%, 99% 94%, 99% 98%, 95% 99%, 92% 99%, 89% 100%, 86% 99%, 83% 100%, 77% 99%, 72% 100%, 66% 98%, 62% 100%, 59% 99%, 54% 99%, 49% 100%, 46% 98%, 43% 100%, 40% 98%, 38% 100%, 35% 99%, 31% 100%, 28% 99%, 25% 99%, 22% 100%, 19% 99%, 16% 100%, 13% 99%, 10% 99%, 7% 100%, 4% 99%, 2% 97%, 1% 97%, 0% 94%, 1% 89%, 0% 84%, 1% 81%, 0 76%, 0 71%, 1% 66%, 0% 64%, 0% 61%, 0% 59%, 1% 54%, 0% 49%, 1% 45%, 0% 40%, 1% 37%, 0% 34%, 1% 29%, 0% 23%, 2% 20%, 1% 17%, 1% 13%, 0 10%, 1% 6%, 1% 3%); 
}

.card.hidden{
    left:  400vw;
}

.card.done{
    left:  -400vw;
}

.card p {
    margin: 0;
}

.button {
    text-align: right;
}

.button.disabled {
    opacity: 0.5;
}

.button:not(.disabled):hover {
    cursor: pointer;
    font-weight: bold;

}

.arrowButton.disabled {
    opacity: 0.3;
}

.arrowButton:not(.disabled):hover {
    cursor: pointer;
    opacity: 0.8;

}