* {
font-family: sans-serif;
}
h3 {
text-align: center;
}
.problems {
display: none;
justify-content: space-between;
margin: 0 2em;
cursor: pointer;
position: relative;
}
.problems.prob {
display: flex;
background-color: #efefef;
}
.problems.prob .problem {
flex-grow: 1;
text-align: center;
position: relative;
z-index: 1;
transition: 0.25s;
}
.problems.prob .problem.active, .problems.prob .problem:hover {
color: #fff;
}
.problems.prob .focus {
position: absolute;
width: 25%;
height: 100%;
background: linear-gradient(to right, #A3CC63 75%, green 300%);
left: 0;
transition: 0.25s;
}
.problems.prob .focus.p1 {
transform: translateX(0);
}
.problems.prob .focus.p2 {
transform: translateX(100%);
background: linear-gradient(to right, #A3CC63 50%, green 150%);
}
.problems.prob .focus.p3 {
transform: translateX(200%);
background: linear-gradient(to right, #A3CC63 25%, green 100%);
}
.problems.prob .focus.p4 {
transform: translateX(300%);
background: linear-gradient(to right, #A3CC63 0%, green 50%);
}
.probs {
padding: 2em 2em 0;
text-align: justify;
}
.probs .prob {
display: none;
}
.probs .prob:last-child {
padding-top: 2em;
}
.probs .prob.active {
display: block;
}
a {
color: green;
margin: auto;
}
.wrap {
border: 1px solid #A3CC63;
margin: 0 2em;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
padding-bottom: 3em;
}