html {
    min-height: 100vh; 
}

:root {
    --unit: min(2vh, 2vw);
}

body {
    /* background-color: #0093E9
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);  */
    background-color: #FAACA8;
    background-image: linear-gradient(19deg, #FAACA8 0%, #DDD6F3 100%);
    background-attachment: fixed;
    /* background: url(img1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%; */
}

.hide {
    display: none !important;
}

/* my own stuff */
.min-width-75vw {
    min-width: 75vw;
}

.my-progress-bar {
    position: relative;
    height: 2rem;
}

.my-progress-bar div {
    position: absolute;
    left: 0;
    height: 2rem;
}


/* hangman stuff */
.hangmanBase {
    position: relative;
    background-color: black;
    width: calc(25 * var(--unit));
    height: calc(1 * var(--unit));

    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%)  translate(0px, calc(25/2 * var(--unit)));
}

.hangmanPole1 {
    position: absolute;
    background-color: black;
    width: calc(1 * var(--unit));
    height: calc(25 * var(--unit));
    margin-left: calc(6 * var(--unit));
    top: calc(-25 * var(--unit));
}

.hangmanPole2 {
    position: absolute;
    background-color: black;
    width: calc(12 * var(--unit));
    height: calc(1 * var(--unit));
    margin-left: calc(6 * var(--unit));
    top: calc(-25 * var(--unit));
}

.hangmanPole3 {
    position: absolute;
    background-color: black;
    width: calc(1 * var(--unit));
    height: calc(5 * var(--unit));
    margin-left: calc(18 * var(--unit));
    top: calc(-25 * var(--unit));
}

.hangmanHead {
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
    border: var(--unit) solid black;
    width: calc(5 * var(--unit));
    height: calc(5 * var(--unit));
    border-radius: 50%;
    margin-left: calc(16 * var(--unit));
    top: calc(-20 * var(--unit));
}

.hangmanBack {
    position: absolute;
    background-color: black;
    width: calc(1 * var(--unit));
    height: calc(9 * var(--unit));
    margin-left: calc(18 * var(--unit));
    top: calc(-15 * var(--unit));
}

.hangmanLeftArm {
    position: absolute;
    background-color: black;
    width: calc(5 * var(--unit));
    height: calc(1 * var(--unit));
    margin-left: calc(19 * var(--unit));
    top: calc(-12 * var(--unit));
    transform: rotate(-150deg);
    transform-origin: left bottom;
}

.hangmanRightArm {
    position: absolute;
    background-color: black;
    width: calc(5 * var(--unit));
    height: calc(1 * var(--unit));
    margin-left: calc(19 * var(--unit));
    top: calc(-12 * var(--unit));
    transform: rotate(-30deg);
    transform-origin: left bottom;
}

.hangmanLeftLeg {
    position: absolute;
    background-color: black;
    width: calc(5 * var(--unit));
    height: calc(1 * var(--unit));
    margin-left: calc(18 * var(--unit));
    top: calc(-7 * var(--unit));
    transform: rotate(45deg);
    transform-origin: left bottom;
}

.hangmanRightLeg {
    position: absolute;
    background-color: black;
    width: calc(6 * var(--unit));
    height: calc(1 * var(--unit));
    margin-left: calc(18 * var(--unit));
    top: calc(-8 * var(--unit));
    transform: rotate(135deg);
    transform-origin: left bottom;
}

/* Animations */
.hangmanDamageAnimation {
    animation: hangman-damage-animation 0.7s ease-in backwards 2;
}

.scoreIncreaseAnimation {
    animation: score-increase-animation 1s ease-in backwards;
}

@keyframes hangman-damage-animation {
    0% {
        background-color: black;
        border-color: black;
    }
    70% {
        color: red;
        background-color: red;
    }
    100% {
        color: red;
        background-color: red;
    }
}

@keyframes score-increase-animation {
    0% {
        color: black;
    }
    10% {
        color: green;
        font-weight: 500;
    }
    100% {
        color: greenyellow;
        font-weight: 300;
    }
}