@charset "utf-8";
/* CSS Document */

#mini-game {
    position: absolute;
    left:50%;
    margin-left:-50rem;
    top:50%;
    margin-top:-40rem;
    z-index: 10;
    width: 100rem;
    height: 80rem;
    background-image: url("https://media.istockphoto.com/vectors/seamless-pattern-from-vector-id589112628?k=20&m=589112628&s=612x612&w=0&h=oj3gb_5_wheyZrkDMug1A0MPLtS291YetpTEflPcCwk=");
    background-repeat: repeat;
    color:#000;
    box-shadow: 0 0 1rem rgba(0,0,0,0.25);
    border-radius: 1rem;
}
.close button {
    position: absolute;
    right:0;
    top:0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 100%;
    border:0 solid #fff;
    background: #FF5D7C;
    color:#fff;
    margin:1rem;
}
.close button:hover {
    cursor: pointer;
    background: #ff1744;
    transition: background 0.2s;
}

#mini-game-wrapper {
    position: relative;
        width: 80rem;
    margin: 10rem auto;
    border: 1px solid #000;
    padding: 20px;
    height: 50rem;
    background-color: rgba(255, 255, 255, 0.96);
}


h1 {
    color: #000;
}

.generate h2 {
    margin-top: 20px;
    line-height: 30px;
    
}

.generate #max-number {
    width: 100px;
    height: 30px;
    padding-left: 5px;
    font-size: 20px;
}

.generate h3 {
    margin-top: 5px;
    line-height: 28px;
}

.generate #guess-number {
    width: 80px;
    height: 28px;
    padding-left: 5px;
}

.generate button {
    height: 32px;
    width: 60px;
    background-color: #000;
    color: #fff;
    border: 0px;
    border-radius: 3px;
}

.generate button:hover {
    height: 32px;
    width: 60px;
    background-color: #333;
    transition: background-color ease-in-out 0.1s;
    color: #fff;
    border: 0px;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.generate button:active {
    height: 32px;
    width: 60px;
    background-color: #ff1744;
    color: #fff;
    border: 0px;
    border-radius: 3px;
}

.generate #chosen {
    margin-top: 50px;
    color: #666;
}

.generate #result {
    margin-top: 30px;
    font-size: 50px;
}

#finish {
    position: absolute;
    left:50%;
    bottom:20%;
    margin-left:-3rem;
    padding: 0.1rem 2rem;
    line-height: 3.6rem;
    border-radius: 2rem;
    background: #FF5D7C;
    color: #fff;
}
#finish:hover {
    cursor: pointer;
    background: #ff1744;
    transition: background 0.2s;
}