#result {
position: relative;
width: 800px;
margin: 30px auto 25px;
transition: .4s;
opacity: 0;
display: none;
}

#start_task {
display: none;
}

#task {
position: relative;
margin: 20px auto 16vh;
transition: .4s;
max-width: calc(100% - 40px);
justify-content: center;
opacity: 0;
display: none;
}

.task-flex-block {
display: flex;
min-height: 500px;
justify-content: center;
max-width: 1500px;
margin: 30px auto 0;
}

.tilte-task {
width: max-content;
margin: 30px auto 40px;
font-size: 24px;
font-family: "Raleway", sans-serif;
}

.notion_definition_item {
padding: 20px;
vertical-align: top;
margin: 10px;
align-items: center;
justify-content: center;
font-size: 19px;
text-align: center;
position: relative;
overflow: hidden;
cursor: pointer;
width: calc(50% - 70px);
display: inline-flex;
transition: transform .2s;
border: 1px solid #CDCDCD;
}

#notions {
text-align: end;
margin-right: 20px;
width: 50%;
}

#definitions {
margin-left: 20px;
width: 50%;
}

#notions>div {
border-color: #f2f2f2;
}

#notions>div:after {
content: "";
background: #f2f2f2;
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
left: 0;
right: 0;
}

#notions>.true:after {
background: var(--progress9);
}

.true {
animation: true 1.2s linear forwards;
background: var(--progress9);
}

@keyframes true {
0% {
opacity: 0;
background: var(--progress9);
}

25% {
opacity: 1;
}

50% {
opacity: 0;
}

75% {
opacity: 1;
}

99% {
opacity: 1;
}

100% {
display: none;
background: var(--progress9);
}
}

.wrong {
animation: wrong .6s linear;
background: var(--progress1);
}

@keyframes wrong {
0% {
background: var(--progress1);
color: white;
}

100% {
background: transparent;
color: var(--dark);
}
}

.attempts {
margin-bottom: 40px;
font-size: 22px;
display: flex;
}


#breadcrumbs {
margin: 60px auto 0;
}

#attempts_block {
margin-top: 50px;
}

#score>font>font {
display: block;
font-size: 30px;
margin-left: 20px;
}

#step {
border-radius: 100px;
width: 500px;
height: 10px;
border: 2px solid #cdcdcd;
position: relative;
margin: 20px auto;
}

#step>div:nth-child(1) {
height: 100%;
border-radius: inherit;
transition: .5s;
display: flex;
align-items: center;
width: 0;
background: var(--dark);
justify-content: end;
}

#step>div:nth-child(2) {
position: absolute;
right: -100px;
width: 60px;
font-size: 19px;
top: 50%;
transform: translate(0, -50%);
}

.task_list {
display: none;
}

@media (max-width: 900px) {
#result {
width: calc(100% - 20px);
}
}

@media (max-width: 768px) {
#step>div:nth-child(2) {
right: -80px;
}

#step {
width: calc(100% - 90px);
margin: 20px 0;
}

#notions,
#definitions {
width: 100%;
margin: 0;
}

#notions {
margin-right: 10px;
}

#definitions {
margin-left: 10px;
}

#task {
max-width: none;
width: calc(100% - 40px);
margin: 20px auto 14vh;
}

.notion_definition_item {
min-width: auto;
width: 100%;
padding: 20px 10px;
box-sizing: border-box;
margin: 0 0 20px;
min-height: 90px;
}

.attempts {
flex-direction: column;
font-size: 19px;
margin-bottom: 50px;
align-items: center;
}

.attempts>div:nth-child(2) {
width: 100%;
}
}