*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial,Helvetica,sans-serif;
    background:#f9c600;
}

.wrapper{

    width:100%;
    min-height:100vh;

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

}

.circle{

    width:420px;
    height:300px;

    border-radius:50%;

    background:linear-gradient(180deg,#c90000 0%,#00b506 100%);

    display:flex;
    flex-direction:column;

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

    box-shadow:0 18px 45px rgba(0,0,0,.18);

}

.circle h2{

    color:#fff;

    font-size:20px;

    font-weight:700;

    margin-bottom:28px;

}

.question{

    color:#fff;

    font-size:46px;

    font-weight:bold;

    margin-bottom:40px;

}

#yesButton{

    width:220px;

    height:56px;

    border:none;

    border-radius:999px;

    background:#fff;

    color:#000;

    font-size:20px;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;

}

#yesButton:hover{

    transform:scale(1.05);

}

#yesButton:active{

    transform:scale(.98);

}

@media(max-width:480px){

.circle{

    width:300px;
    height:300px;

}

.question{

    font-size:38px;

}

.circle h2{

    font-size:18px;

}

#yesButton{

    width:180px;
    height:50px;

    font-size:18px;

}

}