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

#task {
width: 750px;
margin: 20px auto 16vh;
}

#start_task {
opacity: 1;
}

#task>h1 {
font-size: 18px;
line-height: normal;
margin: 0;
font-weight: normal;
margin-bottom: 12px;
text-align: center;
top: -5px;
color: var(--gray);
position: relative;
font-family: "Raleway", serif;
}

#question {
font-size: 32px;
text-align: center;
margin-bottom: 40px;
}

.answer {
font-size: 19px;
margin: 0 auto 10px;
position: relative;
padding: 12px 24px;
cursor: pointer;
border-radius: 100px;
overflow: hidden;
transition: .6s;
z-index: 1;
min-height: 50px;
opacity: 0;
align-items: center;
display: flex;
box-sizing: border-box;
border: 2px solid #cdcdcd;
}

.answer_active {
color: white;
}

.answer:before {
content: "";
position: absolute;
height: 100%;
width: 0;
background: var(--dark);
right: 0;
top: 0;
transition: .6s;
border-radius: 100px;
z-index: -1;
}

.answer_active:before {
width: 100%;
}

.mistakes {
margin-bottom: 50px;
font-size: 22px;
display: flex;
align-items: center;
}

.picture {
cursor: pointer;
display: none;
width: 100%;
margin-bottom: 25px;
}

.picture>img {
width: 100%;
}

#previous_next_step {
display: flex;
justify-content: space-between;
margin-top: 30px;
position: relative;
}

#previous,
#next {
background: var(--dark);
color: white;
display: flex;
border-radius: 100px;
font-family: "Raleway-Medium", serif;
cursor: pointer;
font-size: 17px;
height: 50px;
align-items: center;
justify-content: center;
width: 150px;
transition: .25s;
}

#previous:hover,
#next:hover {
background: var(--hover);
}


#step {
color: var(--gray);
align-items: center;
display: flex;
font-size: 18px;
}

.author {
display: none;
color: var(--gray);
text-align: center;
font-size: 15px;
margin-top: 20px;
margin-bottom: 40px;
font-family: "Raleway", serif;
}

#breadcrumbs {
margin: 60px auto 0;
}

.task_list {
display: none;
}

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

@media (max-width: 768px) {
#result {
margin-top: 20px;
}

#task {
margin-top: 20px;
}

#description_task {
margin-top: 30px;
font-size: 18px;
min-width: 100%;
}


#task>h1 {
font-size: 16px;
}

#question {
font-size: 22px;
}

.author {
font-size: 14px;
}

#step {
position: absolute;
width: 100%;
display: block;
text-align: center;
margin-top: 75px;
}

#previous_next_step {
padding-bottom: 45px;
}

.mistakes {
flex-direction: column;
font-size: 19px;
}

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