*{
    margin: 0;
    padding: 0;
}

#background{
background-image: url("../img/winter\ wonderland\ copy.png");
  background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: auto;
    height: 100vh;
}
section{
    width: 100%;
    height: 100vh;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.extra{
    margin: 20px;
    padding: 12px 18px;
    border: 3px solid #83592a;
    border-radius: 12px;
    background-color: #a87c5c;
    transition: 0.3s;
}
.extra:hover{
    background-color: #a57439;
}

a:link, a:visited{
    color: rgb(255, 223, 246);
    text-decoration: none;
    font-size: 26px;
    font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
}
#logo{
    width: 100%;
    height: auto;
    display: block;
    margin: auto;
    padding-left: 32px;

}
#playButton{
    width: 40%;
    height: auto;
    transition: 0.3s;
    display: block;
    margin: auto;
    
}
#playButton:hover{
    filter: opacity(85%);
}
  .snowflake {
    color: #fff;
    font-size: 1em;
    font-family: Arial;
    text-shadow: 0 0 1px #526189;
  }
   @-webkit-keyframes snowflakes-fall{
    0%{top:-10%}
    100%{top:100%}
}

@-webkit-keyframes snowflakes-shake
{
    0%{-webkit-transform:translateX(0px);
    transform:translateX(0px)}
    50%{-webkit-transform:translateX(80px);
        transform:translateX(80px)}
        100%{-webkit-transform:translateX(0px);
        transform:translateX(0px)}
    }
    
    @keyframes snowflakes-fall{
        0%{top:-10%}100%{top:100%}
    }
    
    @keyframes snowflakes-shake{
        0%{transform:translateX(0px)}
        50%{transform:translateX(80px)}
        100%{transform:translateX(0px)}
    }
    .snowflake{
        position:fixed;top:-10%;z-index:9999;
        -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;user-select:none;
        cursor:default;
        -webkit-animation-name:snowflakes-fall,snowflakes-shake;
        -webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;
        -webkit-animation-iteration-count:infinite,infinite;
        -webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;
        animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;
        animation-iteration-count:infinite,infinite;animation-play-state:running,running
    }
        
        .snowflake:nth-of-type(0){
            left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s
        }
        
        .snowflake:nth-of-type(1){
            left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s
        }
            
        .snowflake:nth-of-type(2){
            left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s
        }
        .snowflake:nth-of-type(3){
            left:30%;
            -webkit-animation-delay:4s,2s;
            animation-delay:4s,2s
        }
        .snowflake:nth-of-type(4){
            left:40%;
            -webkit-animation-delay:2s,2s
            ;animation-delay:2s,2s
        }
        .snowflake:nth-of-type(5){
            left:50%;
            -webkit-animation-delay:8s,3s;
            animation-delay:8s,3s
        }
        .snowflake:nth-of-type(6){
            left:60%;
            -webkit-animation-delay:6s,2s;
            animation-delay:6s,2s
        }
        .snowflake:nth-of-type(7){
            left:70%;
            -webkit-animation-delay:2.5s,1s;
            animation-delay:2.5s,1s
        }
        .snowflake:nth-of-type(8){
            left:80%;
            -webkit-animation-delay:1s,0s;
            animation-delay:1s,0s
        }
        .snowflake:nth-of-type(9){
            left:90%;
            -webkit-animation-delay:3s,1.5s;
            animation-delay:3s,1.5s
        }