body {
    margin: auto 0;
    font-family: Arial;
}

.logo {
   text-align: center;
}

.logo a {
     color: black;
     font-size:2em;
 }

/* span {
    color: white;
}  */

.zone {
    cursor: pointer;
    color:#FFF;
    font-size:2em;
    border-radius:4px;
    border:1px solid #bbb;
    transition: all 0.3s linear;
}

.zone:hover {
    -webkit-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
    -moz-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
    -o-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
    box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}

.sticky {
    top: 0;
    width: 100%;
}

.main-nav {
    display: flex;
    list-style: none;
    font-size: 0.7em;
    margin: 0;
    background-color: #444;
}

@media only screen and (max-width: 600px) {
    .main-nav {
        /* font-size: 0.5em; */
        padding: 0;
    }
}

.right {
    margin-right: auto;
}

li {
    padding: 20px;
}

a {
    color: #f5f5f6;
    text-decoration: none;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    /* height: 100vh; */
}
.welcome {
    display: flex;
    flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}

.welcome .container {
    display:flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
}
/* 
.container > img {
    width: 30%;
} */

.container {
    background-color: rgb(77, 73, 73);
    padding: 20px;
    margin: 10px;
}

.winnerList {
    background-color: grey;
}

.winnerList > img {
    width: 20%;
}

.play {
    text-align: center;
}

button {
    background-color: rgb(83, 81, 81);
    color: white;
    padding: 16px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 50%;
    opacity: 0.9;
}



footer {
    text-align: center;
    background-color: #444;
    color: white;
}

.bottom {
    font-size: 0.9em;
}