#guess_the_next {
    /* margin-top: -31px; */
}

#points {
    width: 140px;
    height: 49px;
    padding: 6px;
    background: linear-gradient(170.9deg, #5BE6FF 12.41%, #33ADFF 71.3%);
    border-radius: 18.2px;
    font-weight: 600;
    font-size: 24px;
    line-height: 36px;
    color: #FFFFFF;
    margin-bottom: 8px;
}

#question {
    font-weight: 600;
    font-size: 36px;
    line-height: 54px;
    color: #373737;
}

.color-box {
    width: 218px;
    height: 218px;
    margin: 15px;
    display: inline-block;
    background: #B63EEE;
    border: 14.824px solid #FFFFFF;
    box-sizing: border-box;
    box-shadow: 0px 14.0143px 22.4229px rgba(0, 0, 0, 0.1);
    border-radius: 11.4109px;
    position: relative;
}

.boxes.mini .color-box {
    width: 168.93px;
    height: 168.93px;
    background: #3F3344;
    margin: 15px;
    border: 10.9803px solid #FFFFFF;
    box-sizing: border-box;
    box-shadow: 0px 13.5746px 21.7193px rgba(0, 0, 0, 0.1);
    border-radius: 11.0528px;
    cursor: pointer;
}

.color-box.right {
    border-color: green;
}

.color-box.wrong {
    border-color: #e81222;
}

#box-3 {
    background: #ccc;
    overflow: hidden;
}

#box-3::before {
    content: "?";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 600;
    font-size: 120px;
    color: #ADADAD;
}

#answer-line {
    margin-top: 24px;
    margin-bottom: 24px;
    font-weight: 600;
    font-size: 36px;
    line-height: 54px;
}

.scrim-container {
    z-index: 99999;
    margin-top: -15.7%;
}

#scrim {
    width: 542px;
    height: 111px;
    background: #FFFFFF;
    box-shadow: 0px 24px 25px rgba(0, 0, 0, 0.15);
    border-radius: 22px;
    margin-left: 27%;
    display: none;
}

#scrim.correct,
#scrim.incorrect {
    display: block;
    opacity: 1;
    transition: opacity 1s ease-out;
}

#scrim>div {
    padding: 3vmin;
    border-radius: 3px;
    background: white;
    box-shadow: 0 0.5rem 1.5rem -0rem rgba(0, 0, 0, 0.25);
}

#scrim #correct {
    display: none;
    transition: opacity 1s ease-out;
    opacity: 0;
}

#scrim #correct img {
    float: left;
    margin-left: 27px;
    margin-right: 10px;
    margin-top: -13px;
    margin-bottom: 34px;
}

#scrim #correct h2 {
    margin-top: 44px;
    font-weight: 600;
    font-size: 24px;
    line-height: 89%;
    color: #29B112;
}

#scrim #incorrect {
    display: none;
    transition: opacity 1s ease-out;
    opacity: 0;
}

#scrim #incorrect img {
    float: left;
    margin-left: 27px;
    margin-right: 10px;
    margin-top:-10px;
    margin-bottom: 34px;
}

#scrim #incorrect h2 {
    margin-top: 41px;
    font-weight: 600;
    font-size: 24px;
    line-height: 119%;
    color: #FF0000;
}

#scrim.correct #correct,
#scrim.incorrect #incorrect {
    opacity: 1;
    display: block;
    transition: opacity 1s ease-out;
}

#correct-color,
#picked-color {
    position: absolute;
    width: 100%;
    height: 60%;
    z-index: 2;
}

#picked-color {
    top: 50%;
}

.wrong {
    border-color: #FF0000 !important;
}

.right {
    border-color: #29B112 !important;
}

@media screen and (max-width: 992px) {
    #guess_the_next {
        /* margin-top: -31px; */
    }
    #points {
        width: 171.07px;
        height: 59.88px;
        padding: 9px;
        font-weight: 600;
        font-size: 29.3269px;
        line-height: 44px;
        border-radius: 29.9379px;
        margin-bottom: 20px;
    }
    #question {
        font-weight: 600;
        font-size: 34.3212px;
        line-height: 51px;
        color: #373737;
    }
    .color-box {
        width: 207.83px;
        height: 207.83px;
        margin: 10px;
        display: inline-block;
        background: #B63EEE;
        border: 14.1327px solid #FFFFFF;
        box-sizing: border-box;
        box-shadow: 0px 13.3608px 21.3772px rgba(0, 0, 0, 0.1);
        border-radius: 10.8788px;
        position: relative;
    }
    .boxes.mini .color-box {
        width: 152px;
        height: 152px;
        margin: 10px;
        margin-top: 18px;
        background: #3F3344;
        border: 10.4683px solid #FFFFFF;
        box-sizing: border-box;
        box-shadow: 0px 12.9415px 20.7065px rgba(0, 0, 0, 0.1);
        border-radius: 10.5374px;
        cursor: pointer;
    }
    .color-box.right {
        border-color: green;
    }
    .color-box.wrong {
        border-color: #e81222;
    }
    #box-3 {
        background: #ccc;
        overflow: hidden;
    }
    #box-3::before {
        content: "?";
        position: absolute;
        top: 53%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-weight: 600;
        font-size: 100px;
        color: #ADADAD;
    }
    #answer-line {
        margin-top: 34px;
        margin-bottom: 12px;
        font-weight: 600;
        font-size: 34.3212px;
        line-height: 51px;
    }
    .scrim-container {
        z-index: 99999;
        margin-top: -22.7%;
    }
    #scrim {
        width: 465.63px;
        height: 99.01px;
        background: #FFFFFF;
        box-shadow: 0px 21.4084px 22.3004px rgba(0, 0, 0, 0.15);
        border-radius: 19.6244px;
        margin-left: 17.4%;
    }
    #scrim.correct,
    #scrim.incorrect {
        display: block;
    }
    #scrim>div {
        padding: 3vmin;
        border-radius: 3px;
        background: white;
        box-shadow: 0 0.5rem 1.5rem -0rem rgba(0, 0, 0, 0.25);
    }
    #scrim #correct {
        display: none;
    }
    #scrim #correct img {
        float: left;
        margin-left: 27px;
        margin-right: 10px;
        margin-top: -13px;
        margin-bottom: 34px;
    }
    #scrim #correct h2 {
        margin-top: 44px;
        font-weight: 600;
        font-size: 21.4084px;
        line-height: 89%;
        color: #29B112;
    }
    #scrim #incorrect {
        display: none;
    }
    #scrim #incorrect img {
        float: left;
        margin-left: 27px;
        margin-right: 10px;
        margin-top: 4px;
        margin-bottom: 34px;
    }
    #scrim #incorrect h2 {
        margin-top: 22px;
        margin-right: 1px;
        font-weight: 600;
        font-size: 24px;
        line-height: 119%;
        color: #FF0000;
    }
    #scrim.correct #correct,
    #scrim.incorrect #incorrect {
        display: block;
    }
    #correct-color,
    #picked-color {
        position: absolute;
        width: 100%;
        height: 60%;
        z-index: 2;
    }
    #picked-color {
        top: 50%;
    }
}

@media screen and (max-width: 600px) {
    #guess_the_next {
        /* margin-top: -31px; */
    }
    #points {
        width: 79.73px;
        height: 27.9px;
        padding: 5px;
        font-weight: 600;
        font-size: 13.6673px;
        line-height: 21px;
        border-radius: 13.952px;
    }
    #question {
        font-weight: 600;
        font-size: 15.9948px;
        line-height: 24px;
    }
    .color-box {
        width: 96.86px;
        height: 96.86px;
        margin: 5px;
        display: inline-block;
        background: #B63EEE;
        border: 6.58631px solid #FFFFFF;
        box-sizing: border-box;
        box-shadow: 0px 6.22655px 9.96249px rgba(0, 0, 0, 0.1);
        border-radius: 5.06986px;
        position: relative;
    }
    .boxes.mini .color-box {
        width: 75.05px;
        height: 75.05px;
        margin: 5px;
        background: #3F3344;
        border: 4.87856px solid #FFFFFF;
        box-sizing: border-box;
        box-shadow: 0px 6.03118px 9.64989px rgba(0, 0, 0, 0.1);
        border-radius: 4.91078px;
        cursor: pointer;
    }
    .color-box.right {
        border-color: green;
    }
    .color-box.wrong {
        border-color: #e81222;
    }
    #box-3 {
        background: #ccc;
        overflow: hidden;
    }
    #box-3::before {
        content: "?";
        position: absolute;
        top: 53%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-weight: 600;
        font-size: 55px;
        color: #ADADAD;
    }
    #answer-line {
        margin-top: 24px;
        margin-bottom: 12px;
        font-weight: 600;
        font-size: 15.9948px;
        line-height: 24px;
    }
    .scrim-container {
        z-index: 99999;
        margin-top: -20.5%;
    }
    #scrim {
        width: 217px;
        height: 46.14px;
        background: #FFFFFF;
        box-shadow: 0px 9.97701px 10.3927px rgba(0, 0, 0, 0.15);
        border-radius: 9.14559px;
        margin-left: 20.5%;
    }
    #scrim.correct,
    #scrim.incorrect {
        display: block;
    }
    #scrim>div {
        padding: 3vmin;
        border-radius: 3px;
        background: white;
        box-shadow: 0 0.5rem 1.5rem -0rem rgba(0, 0, 0, 0.25);
    }
    #scrim #correct {
        display: none;
    }
    #scrim #correct img {
        float: left;
        width: 18.29px;
        height: 18.29px;
        margin-left: 14px;
        margin-right: 10px;
        margin-top: -4px;
    }
    #scrim #correct h2 {
        margin-top: 19px;
        font-weight: 600;
        font-size: 9.97701px;
        line-height: 119%;
        color: #29B112;
    }
    #scrim #incorrect {
        display: none;
    }
    #scrim #incorrect img {
        float: left;
        width: 18.29px;
        height: 18.29px;
        margin-left: 14px;
        margin-right: 10px;
        margin-top: -1px;
        margin-bottom: 34px;
    }
    #scrim #incorrect h2 {
        margin-top: 15px;
        font-weight: 600;
        font-size: 9.97701px;
        line-height: 119%;
        color: #FF0000;
    }
    #scrim.correct #correct,
    #scrim.incorrect #incorrect {
        display: block;
    }
    #correct-color,
    #picked-color {
        position: absolute;
        width: 100%;
        height: 60%;
        z-index: 2;
    }
    #picked-color {
        top: 50%;
    }
}