* {
    margin: 0;
    padding: 0;
    font-family: 'Courier New', Courier, monospace;
}

body {
    box-sizing: border-box;
    width: 100dvw;
    height: 100dvh;
    background-image: url("assets/backgrounds/purple_cloud_background.jpg");
    background-size: cover;
    overflow: hidden;
}

#characterSelectionPage,
#backgroundSelectionPage {
    width: 100%;
    height: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    box-sizing: border-box;
}

#characterSelectionPage {
    animation: fadeIn 1s ease-out forwards;
}

#backgroundSelectionPage {
    animation: slideInFromRight 1s ease-out forwards;
}

button {
    border: none;
    background-color: transparent;
    transition: all 0.3s ease;
}

button:enabled:hover {
    cursor: pointer;
    transform: scale(1.2);
}

button:disabled {
    opacity: 0.5;
}

button:disabled:hover {
    cursor: default;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: whitesmoke;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: plum;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(194, 120, 194);
}

.audioContainer,
.infoContainer {
    position: fixed;
    display: flex;
    width: fit-content;
    height: fit-content;
    z-index: 20;
}

.audioContainer {
    top: 10px;
    left: 10px;
}

.infoContainer {
    top: 10px;
    right: 10px;
    gap: 10px;
}

#musicButton,
.infoContainer button {
    background-color: transparent;
    border: none;
    width: 50px;
    height: 50px;
}

#musicIcon,
.infoContainer img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.scoreboardContainer {
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 5px;
}

.scoreboard {
    width: max-content;
    height: fit-content;
    display: none;
    background-color: pink;
    animation: fadeIn 0.3s ease-out forwards;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 5px;
    column-gap: 15px;
    padding: 10px;
    text-align: center;
}

@keyframes fadeIn {
    0% { opacity : 0; }
    100% {opacity : 0.9; }
}

.span2 {
    grid-column: span 2;
    text-align: center;
}

#scoreboardButton:hover + .scoreboard {
    display: grid;
}

.name {
    text-decoration: black underline;
}

ol li{
    list-style-type: decimal;
    list-style-position: inside;
    text-align: left;
}

#overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: pink;
    opacity: 0.5;
    z-index: 9;
}

#closeButtonOne,
#closeButtonTwo {
    position: fixed;
    width: 35px;
    height: 35px;
    background-color: transparent;
    top: 5px;
    right: 5px;
    z-index: 20;
}

#closeButtonOne img,
#closeButtonTwo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#instructions,
#credits {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    padding: 1em;
    z-index: 10;
    text-align: center;
    align-items: center;
    background-color: beige;
    box-shadow: 2px 2px 2px 1px plum;
    border-radius: 5px;
}

#instructions h2,
#credits h2 {
    margin-bottom: 20px;
    text-decoration: black wavy underline;
}

#instructions h2::before,
#instructions h2::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background:url("assets/obstacles/lollipop.png") no-repeat;
    background-size: contain;
    margin-left: 10px;
    margin-right: 10px;
}

#instructions p {
    margin-bottom: 10px;
}

#instructions p::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background:url("assets/obstacles/lollipop.png") no-repeat;
    background-size: contain;
    float: left;
    margin-right: 10px;
}

#credits {
    height: 50%;
    overflow-y: auto;
}

#credits h2::before,
#credits h2::after,
#credits h3::before,
#credits h3::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background:url("assets/obstacles/pretzel.png") no-repeat;
    background-size: contain;
    margin-left: 10px;
    margin-right: 10px;
}

#credits h3 {
    margin-top: 10px;
    margin-bottom: 10px;
    text-decoration: black dashed underline;
}

#credits li {
    list-style: none;
}

a {
    color: rgb(194, 120, 194);
}

.titleContainer {
    position: fixed;
    width: 100%;
    height: fit-content;
    top: 65px;
    left: 0;
    background-color: aliceblue;
    opacity: 0.8;
    z-index: 5;
}

#message {
    text-align: center;
    animation: slideAcrossLTR 15s linear infinite;
}

@keyframes slideAcrossLTR {
    0% {
        transform: translateX(-80%);
    }
    100% {
        transform: translateX(80%);
    }
}

.playerOneContainer{
    position: fixed;
    width: 30%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}

.playerTwoContainer {
    position: fixed;
    width: 30%;
    height: 100%;
    top: 0;
    right: 0;
    z-index: 1;
}

#playerOnePicture {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: slideInFromLeft 0.3s ease-out forwards;
}

#playerTwoPicture {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: slideInFromRight 0.3s ease-out forwards;
}

#doneFirst,
#doneSecond {
    position: absolute;
    width: 100px;
    height: 100px;
    bottom: 10px;
    right: 0;
    background-color: transparent;
    border: none;
    display: none;
}

#doneFirst img,
#doneSecond img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-80%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(80%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.characterContainer {
    position: relative;
    display: flex;
    width: 50%;
    height: 100%;
    align-items: center;
    justify-content: center;
    z-index: 0;
}

.characterSelection {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: fit-content;
    gap: 10px;
    justify-content: center;
}

.characterSelection input[type="image"] {
    width: 100px;
    height: 100px;
    padding: 10px;
    object-fit: contain;
    background-color: lightblue;
    border-radius: 10px;
    border: none;
    transition: all 0.3s ease;
}

.characterSelection input[type="image"]:focus {
    opacity: 0.5;
}

#continueContainer {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: 10;
    display: flex;
    gap: 20px;
    animation: fadeIn 0.3s ease-out forwards;
}

#continueButton,
#reselectButton {
    padding: 1em;
    font-size: 20px;
    background-color: beige;
    box-shadow: 2px 2px 2px 1px plum;
    border-radius: 5px;
}

.bgContainer {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    align-items: center;
    column-gap: 20px;
}

.bgSelection {
    width: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.bgSlider {
    width: 750px;
    height: 250px;
    overflow: hidden;
    box-shadow: 2px 2px 2px 1px plum;
}

.bgList {
    display: flex;
    width: max-content;
    height: 100%;
}

.bgOneOption,
.bgTwoOption {
    display: flex;
    width: 750px;
    height: 250px;
}

.bgOnePicture,
.bgTwoPicture {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#leftArrowOne,
#rightArrowOne,
#leftArrowTwo,
#rightArrowTwo {
    width: 50px;
    height: 50px;
    background-color: transparent;
}

#leftArrowOne img,
#rightArrowOne img,
#leftArrowTwo img,
#rightArrowTwo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#continueButtonTwo {
    position: fixed;
    z-index: 10;
    padding: 1em;
    font-size: 20px;
    background-color: beige;
    box-shadow: 2px 2px 2px 1px plum;
    border-radius: 5px;
    bottom: 20px;
    right: 20px;
}

#obstaclePage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    animation: slideInFromRight 1s ease-out forwards;
}

#winnerMessage {
    position: fixed;
    top: 30px;
    animation: fadeIn 0.3s ease-out forwards;
}

#canvasContainer {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    gap: 20px;
}

#boardOne {
    background-color: beige;
    box-shadow: 2px 2px 2px 1px plum;
}

#boardTwo {
    background-color: beige;
    box-shadow: 2px 2px 2px 1px plum;
}

#restartContainer {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10;
    display: flex;
    gap: 20px;
    animation: fadeIn 0.3s ease-out forwards;
}

#playAgainButton,
#mainMenuButton {
    padding: 1em;
    font-size: 20px;
    background-color: beige;
    box-shadow: 2px 2px 2px 1px plum;
    border-radius: 5px;
}