@font-face {
    font-family: 'Minnie Regular';
    src: url('./assets/MINNIE.TTF');
}

* {
    box-sizing: content-box;
}

body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: 'Minnie Regular';
    background: radial-gradient(40% 40rem,#aa7816, #553411);
    background-repeat: no-repeat;
}

body.alt-theme {
    background: radial-gradient(40% 40rem, #75695a, #2d302f);
}

.black-bar {
    height: 3rem;
    background-color: black;
}

.black-bar.bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3rem;
    background-color: black;
}

.logo,
.content .container {
    display: flex;
}

.logo {
    justify-content: center;
    margin-top: 1rem;
}

.content .container {
    justify-content: space-between;
    align-items: center;
}

.you {
    margin-left: 1rem;
}

.comp {
    margin-right: 1rem;
}

.hand {
    width: 20rem;
}

.hand.left {
    margin-left: 5rem;
}

.hand.right {
    margin-right: 5rem;
}

.versus {
    margin: 0 3rem 0;
}

.winner {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: calc(50% + 8rem);
    left: 50%;
    right: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 9999;
    opacity: 0;
    animation: bounce 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.you-win,
.comp-wins {
    position: relative; /* Adjust the position of the messages relative to the winner container */
}

.pick {
    display: flex;
    justify-content: center;
    gap: 5rem;
    margin-top: 5rem;
    z-index: 1;
}

.rock-text,
.paper-text,
.scissors-text {
    transition: all ease 0.18s;
}

.rock-text:hover,
.paper-text:hover,
.scissors-text:hover {
    cursor: pointer;
    transform: scale(1.1);
}

.play-again {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5rem;
    position: absolute;
    top: calc(50% + 8rem);
    bottom: 6rem;
    left: 50%;
    right: 50%;
    cursor: pointer;
    opacity: 0; /* Set initial opacity to 0 */
}

.play-again:hover {
    transform: scale(1.07);
    transition: all ease 0.15s;
}

/* Hide class to show and hide corresponding elements */
.hide {
    display: none;
}

/* Fading in and out transition */
.fade-in {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

@keyframes bounce {
    0% {
        transform: translate(-50%, -50%) scale(0.8); /* Start slightly smaller and less opacity */
        opacity: 0;
    }
    30% {
        transform: translate(-50%, -50%) scale(1.2); /* Bounce to a larger size */
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(0.9); /* Slightly shrink before settling */
        opacity: 1;
    }
    70% {
        transform: translate(-50%, -50%) scale(1.1); /* Bounce back a bit */
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1); /* End at the original size */
        opacity: 1;
    }
}

@keyframes fallAndBounce {
    0% {
        transform: translateY(-200%); /* Start above the screen */
    }
    25% {
        transform: translateY(0); /* Fall to the ground */
    }
    50% {
        transform: translateY(-20px); /* First bounce */
    }
    60% {
        transform: translateY(0); /* Rebound from the ground */
    }
    80% {
        transform: translateY(-5px); /* Second bounce */
    }
    100% {
        transform: translateY(0); /* Final position on the ground */
    }
}

/* Keyframes for fading in from left */
@keyframes fade-in-left {
    0% {
        opacity: 0;
        transform: translateX(-80%);
    }
    10% {
        opacity: 0;
        transform: translateX(-80%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Keyframes for fading in from right */
@keyframes fade-in-right {
    0% {
        opacity: 0;
        transform: translateX(80%);
    }
    10% {
        opacity: 0;
        transform: translateX(80%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Keyframes for fading in from top */
@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    10% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Keyframes for fading in from bottom */
@keyframes fade-in-down {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    10% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Keyframes for general fade-in effect */
@keyframes fade-in-general {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Keyframes for top black bar */
@keyframes move-in-top {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

/* Keyframes for bottom black bar */
@keyframes move-in-bottom {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}

/* 3s duration animation */
.score.left,
.score.right,
.you,
.comp,
.versus,
.pick {
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
}

/* 2s duration animation */
.content .container,
.theme,
.hand.left,
.hand.right,
.copyright {
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
}

/* Logo falling animation */
.logo {
    animation: fallAndBounce 1s cubic-bezier(0.25, 0.1, 0.25, 1) 4s both;
}

/* Animation for elements fading in from the top */
.theme {
    animation-name: fade-in-up;
}

/* Animation for elements fading in from the bottom */
.pick,
.copyright {
    animation-name: fade-in-down;
}

/* Animation for elements fading in from left */
.hand.left,
.score.left {
    animation-name: fade-in-left;
}

/* Animation for elements fading in from right */
.hand.right,
.score.right {
    animation-name: fade-in-right;
}

/* Animation for elements fading in without a specific direction */
.versus,
.you,
.comp {
    animation-name: fade-in-general;
}

/* Animation for top black bar */
.black-bar.top {
    animation: move-in-top 1.5s cubic-bezier(0.25, 0.1, 0.25, 1) 2.5s both;
}

/* Animation for bottom black bar */
.black-bar.bottom {
    animation: move-in-bottom 1.5s cubic-bezier(0.25, 0.1, 0.25, 1) 2.5s both;
}

/* Copyright section */
.copyright {
    position: absolute;
    bottom: 3rem;
    right: 1rem;
    color: #000000;
    font-size: 0.8rem;
}

.copyright a {
    text-decoration: none;
    color: #000000;
    transition: all ease 0.3s;
}

.copyright a:hover {
    color: #ffffff;
}

.copyright span {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
}

/* Theme section */
.theme {
    margin: 1rem 0 0 1rem;
    position: absolute;
    transition: all ease 0.12s;
    z-index: 1;
}

.theme:hover {
    cursor: pointer;
    transform: scale(1.05);
}