*{
    margin: 0;
    padding: 0;
}


body{
    background: linear-gradient(270deg,rgba(255,153,204),rgba(255,153,255),rgba(255,204,229),rgba(255,204,255));
    position: relative;
    height: 100vh;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}


.container{
    background:linear-gradient(270deg,rgba(255,204,229),rgba(255,153,204),rgba(255,204,229));
    margin-top: 20px;
    width: 1000px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}


.inner-container-1, .inner-container-2{
    width: 50%;
    float: left;
    height: 600px;
}


.inner-container-1{
    background-color: rgba(255, 204, 255);
}


.colour{
    background-color: rgba(255, 255, 204, 0.4);
}


.play{
    font-family: cursive;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    padding: 50px;
}


.score{
    font-family: cursive;
    font-size: 50px;
    text-align: center;
    padding: 4rem;
}


.win-score{
    background-color: rgba(255, 153, 204);
    width: 40%;
    padding: 30px;
    margin-left: 24%;
    margin-top: 70px;
    border-radius: 25px;
    text-align: center;
}


.current-score{
    font-family: cursive;
    font-weight: bold;
    font-size: 20px;
    top: 0;
}


.current-win-score{
    font-family: cursive;
    font-weight: bold;
    font-size: 20px;
    padding: 10px;
}


.wm-2{
    background-color: rgba(255, 204, 255);
}


button{
    position: absolute;
    width: 200px;
    left: 50%;
    transform: translateX(-50%);
    color: #555;
    background: none;
    border: none;
    font-family: cursive;
    font-size: 20px;
    text-transform: uppercase;
    cursor: pointer;
    font-weight: 300;
    transition: background-color 0.3s, color 0.3s;
}


.holding{
    top: 490px;
}


.new-game{
    top: 45px;
}


.roll-it{
    top: 400px;
}


.holding, .new-game, .roll-it, .btn{
    background-color: white;
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    padding: 10px;
    border-radius: 50rem;
    box-shadow: 0 1.75rem 3.5rem rgba(0, 0, 0, 0.1);
}


img{
    position: absolute;
    width: 130px;
    left: 50%;
    top: 30%;
    transform: translateX(-50%);
}


.current-win-score{
    font-size: 30px;
}


.hidden{
    display: none;
}


.result{
    position: absolute;
    top: 33%;
    left: 10%;
    background: linear-gradient(270deg,rgba(255,255,204),rgba(255,229,204),rgba(229,255,204));
    transform: translateX(50%);
    text-align: center;
    border-radius: 25px;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 100px;
    padding-bottom: 100px;
    box-shadow:  0px 10px 50px rgba(0, 0, 0, 0.3);
}


.overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* z-index: 9998; */
}


.rules{
    position: absolute;
    top: 18%;
    left: 20%;
    background: linear-gradient(270deg,rgba(204,204,255),rgba(229,204,255),rgba(204,229,255));
    border-radius: 25px;
    /* display: inline-block; */
    padding: 10px;
    padding-left: 50px;
    box-shadow:  0px 10px 50px rgba(0, 0, 0, 0.3);
}


ul{
    font-size: 30px;
}


.btn{
    position: absolute;
    top: 15px;
}


.close{
    position: relative;
    font-size: 50px;
    margin-left: 390px;
}


.upper{
    position: absolute;
    left: 11%;
    top: 20%;
}


.wins, .wins-inner{
    background-color: rgba(153, 255, 204);
}