b{
font-family: 'ZenKakuGothicNew-Medium', sans-serif;
}

#task {
width: 700px;
transition: .4s;
transform-origin: 50% 100%;
padding-bottom: 65px;
display: none;
opacity: 0;
margin: 20px auto 16vh;
}

#name {
font-size: 28px;
font-family: "Raleway", serif;
text-align: center;
}

#fact {
font-size: 22px;
text-align: center;
margin: 10px 15px;
min-height: 310px;
display: flex;
align-items: center;
justify-content: center;
color: var(--dark);
}

#check {
display: flex;
height: 8px;
margin-top: 40px;
position: relative;
}

#check>div {
height: 100%;
width: 100px;
margin: 0 3px;
transition: .3s;
border-radius: 100px;
box-sizing: border-box;
background: #f2f2f2;
border: 1px solid transparent;
}

#description {
margin-top: 20px;
color: var(--gray);
font-size: 19px;
text-align: center;
margin-bottom: 20px;
}

#true_false {
display: flex;
width: 100%;
bottom: 0;
height: 70px;
left: 0;
justify-content: center;
}

#true_false>div {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 20px;
height: 100%;
position: relative;
font-family: "Raleway-Medium", serif;
border-radius: 100px;
color: white;
cursor: pointer;
font-size: 17px;
width: 200px;
margin: 0 20px;
background: var(--dark);
}

#true_false>div:hover {
background: var(--hover);
}

#true_false>div:before {
content: "";
width: 10px;
height: 10px;
border-left: 3.3px solid white;
border-bottom: 3.3px solid white;
rotate: 225deg;
margin: 0 20px 0 0;
}

#true_false>#false {
justify-content: end;
}

#true_false>#false:before {
order: 1;
rotate: 45deg;
margin: 0 0 0 20px;
}

.mini_result {
position: absolute;
left: 50%;
transform: translate(-50%);
display: flex;
align-items: center;
justify-content: center;
}

.mini_result>div {
opacity: 0;
color: white;
padding: 12px 20px;
font-size: 17px;
min-width: 120px;
text-align: center;
border-radius: 100px;
position: absolute;
bottom: 20px;
font-family: "Raleway", serif;
width: max-content;
animation: mini_result 1.2s;
}

@keyframes mini_result {
50% {
opacity: 1;
bottom: 60px;
}

80% {
opacity: 1;
bottom: 60px;
}

100% {
opacity: 0;
bottom: 60px;
}
}

.mini_result>.result_true {
background: var(--progress9);
}

.mini_result>.result_false {
background: var(--progress1);
}

.fact_result>div:nth-child(2)>b {
color: var(--dark);
margin-bottom: 5px;
}

.fact_result {
font-size: 22px;
margin-bottom: 50px;
display: flex;
}

.mini_result2 {
display: none;
}

#breadcrumbs {
margin: 60px auto 0;
}

#your_answer {
margin-bottom: 50px;
}

#step {
border-radius: 100px;
width: calc(100% - 100px);
height: 10px;
border: 2px solid #cdcdcd;
position: relative;
margin: 40px 0;
display: none;
}

#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: 768px) {

#true_false>div:hover {
background: var(--dark);
}

.fact_result {
flex-direction: column;
align-items: center;
}

#fact {
min-height: 300px;
}

#task {
width: calc(100% - 40px);
}

#true_false>div {
width: 100%;
margin: 0 0 0 10px;
}

#true_false>#false {
margin: 0 10px 0 0;
}

#description {
font-size: 16px;
display: none;
}
}