*{
    box-sizing:border-box;
    font-family:'Segoe UI',Arial,sans-serif;
}


body{

    margin:0;
    width:100%;
    height:100vh;

    background:
    radial-gradient(circle at top,#34495e,#050505);

    display:flex;
    align-items:center;
    justify-content:center;

    color:white;
    overflow:hidden;

}



.event-container{

    width:100%;
    text-align:center;

}



.header h1{

    font-size:48px;
    margin:10px;

    text-shadow:
    0 0 20px gold;

}



.header p{

    font-size:22px;
    opacity:.8;

}



.wheel-wrapper{

    position:relative;

    margin:30px auto;

    width:600px;
    height:600px;

}



canvas{

    border-radius:50%;

    background:white;

    box-shadow:

    0 0 50px
    rgba(255,215,0,.8);

    transition:

    transform 6s
    cubic-bezier(.15,.8,.15,1);

}



.pointer{

    position:absolute;

    top:-30px;

    left:50%;

    transform:
    translateX(-50%);


    width:0;
    height:0;


    border-left:35px solid transparent;

    border-right:35px solid transparent;

    border-top:70px solid #ff1744;


    z-index:10;

}



#spinBtn{

    padding:

    20px 70px;


    border:none;


    border-radius:50px;


    font-size:24px;


    font-weight:bold;


    cursor:pointer;


    background:

    linear-gradient(
    45deg,
    #ffd700,
    #ff9800
    );


    color:#111;


    box-shadow:

    0 10px 40px
    rgba(255,215,0,.5);

}



#winnerBox{

    margin-top:30px;

    font-size:40px;

    font-weight:bold;

    color:#ffd700;

}


@media(max-width:700px){

.wheel-wrapper{

width:350px;
height:350px;

}

canvas{

width:350px;
height:350px;

}

}