* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    position: relative;
    max-width: 1200px;
}

.view__img {
    width: 100%;
}

.view {
    position: relative;
}

.circle {
    width: 40%;
    position: absolute;
    top: 7%;
    left: 30%;
    z-index: 3;
    transition: 3s all ease-in-out;
}

.foundation {
    width: 30%;
    position: absolute;
    top: 63%;
    left: 35.5%;
}

.indicator {
    width: 5%;
    top: 3%;
    left: 48%;
    position: absolute;
    z-index: 5;
}

.startCircle {
    position: absolute;
    bottom: 7%;
    left: 35%;
    width: 30%;
    height: 10%;
    background: #E44A14;
    color: #fff;
    font-size: 14px;
    border-radius: 8px;
    border: none;
    outline: none;
    text-transform: uppercase;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 1.5px;
    transition: .2s all;
}

.startCircle:hover {
    background: #D32A13;
}

.question__img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 100%;
}

.answer {
    background: transparent;
    position: absolute;
    bottom: 27%;
    left: 13%;
    width: 24%;
    height: 35%;
    border: none;
    outline: none;
    cursor: pointer;
    transition: .2s all;
}

.answer--1 {
    left: 39.5%;
}

.answer--2 {
    left: 64%;
}

.answer:hover {
    /*background: rgba(255, 255, 255, .2);*/
}

.tryAgainBtn {
    background: #2E3192;
    color: #fff;
    text-transform: uppercase;
    font-weight: 500;
    width: 40%;
    height: 40px;
    border-radius: 5px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: none;
    outline: none;
    bottom: 38%;
    cursor: pointer;
    letter-spacing: 1.5px;
    transition: .2s all;
}

.tryAgainBtn:hover {
    opacity: .8;
}

.tryAgainBtn--end {
    bottom: 25%;
}

.tryAgainBtn--endRight {
    bottom: 35%;
}

.wrongAnswer__text {
    position: absolute;
    top: 33%;
    left: 50%;
    text-align: center;
    transform: translateX(-50%);
    font-size: 17px;
}

.wrongAnswer__text--right {
    top: 43%;
}

.btn--sound {
    position: absolute;
    width: 25px;
    height: auto;
    background: transparent;
    cursor: pointer;
    border: none;
    outline: none;
}

.btn--sound--instruction {
    top: 18.5%;
    left: 50%;
    transform: translateX(-50%);
}

.btn--sound .img {
    width: 100%;
    height: auto;
}

.btn--sound--question {
    left: 50%;
    top: 20%;
    transform: translateX(-50%);
}

.btn--sound--question--top {
    top: 15%;
}

.btn--sound--feedback {
    top: 40%;
}

.btn--sound--feedbackPositive {
    top: 35%;
}

.btn--sound--answer--1,
.btn--sound--answer--2,
.btn--sound--answer--3 {
    top: 75%;
}

.btn--sound--answer--1 {
    left: 22.3%;
}

.btn--sound--answer--2 {
    left: 48.8%;
}

.btn--sound--answer--3 {
    left: 76%;
}

.pointsWrapper {
    position: absolute;
    top: 20px;
    right: 20px;
    border-radius: 50%;
    background: #BFE3EC;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    z-index: 10000;
}

.pointsWrapper,
.pointsWrapper * {
    font-size: 20px;
    font-weight: 700;
}

.pointsPlaceholder {
    padding-right: 5px;
}

.finalResult {
    display: block;
    padding-top: 20px;
    font-weight: 700;
    font-size: 21px;
}

.btn--start {
    position: absolute;
    background: transparent;
    top: 62%;
    left: 43%;
    width: 14%;
    height: 11%;
    cursor: pointer;
    border: none;
    outline: none;
}

:root {
    --primary: #78C9FF;
    --hover: #67B8EE;
}

.scroll {
    border-right: 1px solid var(--primary);
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) #C1DCFF;
}

.scroll::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}
.scroll::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
}
.scroll::-webkit-scrollbar-thumb {
    background: var(--primary);
    border: 33px none #ffffff;
}
.scroll::-webkit-scrollbar-thumb:hover {
    background: var(--hover);
}
.scroll::-webkit-scrollbar-thumb:active {
    background: var(--hover);
}
.scroll::-webkit-scrollbar-track {
    background: #dedede;
    border: 49px none #dedede;
}

.scroll::-webkit-scrollbar-corner {
    background: transparent;
}

.summary {
    position: absolute;
    top: 27%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    margin: 20px auto;
    max-height: 300px;
    padding: 25px;
    visibility: hidden;
    z-index: -100;
}

.summary__item {
    margin-bottom: 40px;
}

.summary__image {
    display: block;
    width: 90%;
    margin: 0 auto 20px;
}

.summary__userAnswer {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.summary__rightAnswer {
    color: green;
    font-size: 18px;
    text-align: center;
    font-weight: 700;
}