* {
        font-family: 'Lobster', Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;
        color: burlywood;
}

body{   display: flex;
        height: 100%;
        min-width: 98%;
        background-color: rgb(36, 34, 34);
        justify-self : center;

}

#start{
        width: 13vh;
        height: 13vh;
        font: 36px;
        background-color: darkred;
        color: rgb(36, 34, 34);
        animation: start 6s;
        border-radius: 50%;
        margin-bottom: 3vh;
        

}

#start:hover{
        border: solid 1px black;
}

@keyframes start {
        from{
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

#quit {
        width: 10%;
        height: 50%;
        font-size: 60%;
        background-color: indianred;
        color: rgb(36, 34, 34);
        animation: start 3s;
}
li {
        display: flex;
}
h1 {
        text-align: center;
        color: purple;
        -webkit-text-stroke: 1px indianred;
        -webkit-text-fill-color: black;
        font-size: 48px;
        margin: auto;
        margin-bottom: 10vh;
        letter-spacing: 3px; 
        border-bottom: solid 5px rgb(36, 34, 34);   
        width: min-content; 
 
        
}
.app{
        min-width: 100%;
        margin: auto;
        border-radius: 15px;
        border: solid 2px indianred;

}

.appHome{
        min-width:98%;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: end;

}

.container {
        width: 100%;
        height: auto;
        background-color: darkred;
        border-radius: 15px;
        margin: auto; 
        text-align: center;

    
}
.side{
        width: 50%;
        max-width: 200px;
        min-height: auto;
        border-radius: 15px;
        margin: auto;
}

.pit {
        height: 60px;
        width: 10%;
        margin: -2vh;

        rotate: 90deg;
        display: flex;
        justify-content: center;
        border-radius: 10px 10px;
        background-color: indianred;
        -webkit-text-stroke: 1px darkred;
        -webkit-text-fill-color: black;
        font-size: 36px;
        border: solid 5px black;
}

.marble{
        size: 1vh;
        border: solid 1px black;
        width: 10px;
        height: 10px;
        margin: 1px;
        border-radius: 50%;
        


}
.left{  align-items: center;
        rotate: 270deg;
        



}

.right{
        align-items: center;
        rotate: 270deg;

}
.store{ 
        width: 10%;
        margin: -2vh;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px 10px;
        background-color: lightcoral;

}
#gameBoard{
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        min-height: 40vh;
        min-width: 100%;

}
.left{
        display: flex;
        flex-flow: column-reverse nowrap;
        margin-bottom: 100vh;

}
.right{
        display: flex;
        flex-flow: column nowrap;
        margin-top: -100vh;

}
.homeLeft{
        display: flex;
        flex-flow: column nowrap;
}
.homeRight{
        display: block;
        flex-flow: column nowrap;
        transform: (-1,1);
}
button {
        border-radius: 5px;
}