*{
    box-sizing: border-box;
}

body{
   background-color: white;
   overflow: hidden;
}

.menu{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0;
    height: 95vh;
}

.logo{
    display: flex;
    flex-direction: row;
    height: auto;
    gap: 20px;
}

.rock, .paper, .scissors{
    height: auto;
    width: 100px;
    transition: transform 1s;
}

.rock:hover, .paper:hover, .scissors:hover{
    transform: translateY(-10px);
    transition: 1s;
}

.title{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Franklin Gothic Heavy', 'Arial Narrow', Arial, sans-serif;
    color: black;
    margin: 5px;
}

.playbutton{
    background: grey;
    outline: solid;
    outline-color: black;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    color: white;
    padding: 10px 20px;
    margin-top: 10px;
    border-radius: 5px;
    transition: transform 1s;
    margin-bottom: 10px;
}

.playbutton:hover{
    transform: translateY(-5px);
    transition: 1s;
}

.watermark, .credits{
    display: flex;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: black;
    text-decoration: none;
}

.watermark a, .credits a{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: black;
}

.credits a{
    text-decoration: none;
    opacity: 0.5;
}

.credits{
    display: flex;
    flex-direction: row;
    height: 80vh;
    align-content: center;
    justify-content: center;
}