.when img {width: 20vw}
.when1 img {width: 15vw}
body, .when {background: lightgray}
.white {background: white;}
.pink {background: pink;}
.blue {background: lightblue;}
.green {background: lightgreen;}
.yellow {background: #FFFF99;}
.butt {border: 2px solid black; height: 20px; width: 20px; display: inline-block; border-radius: 5px; cursor: pointer}
.buttons {margin: 10px 0 0; text-align: center}
.frame {text-align: center}
table, tr, td {border: none; border-collapse: collapse; margin: 0 auto}
td {padding: 30px; vertical-align: top; text-align: center}
td.final {vertical-align: middle}
img {width: 200px}
.recording input, textarea {border: 2px solid black; border-radius: 10px; padding: 20px; font-size: 30px; width: 100%; margin: 5px 0}
p {font-family: "Josefin Sans", sans-serif; font-size: 170%; line-height: 1.3; letter-spacing: 1px}
button {font-size: 30px; padding: 10px; border: 1px solid black; border-radius: 5px}
button.sub {background: #7BCCB5; font-size: 80%; font-weight: bold; margin-top: -20px; padding: 20px 30px; border-radius: 10px; cursor: pointer}
button.sub1 {background: #7BCCB5; font-size: 80%; font-weight: bold; margin-bottom: 10px; padding: 20px 30px; border-radius: 10px; cursor: pointer}
input.sub {background: #7BCCB5; font-size: 80%; font-weight: bold; margin-top: -20px; padding: 20px 30px; border-radius: 10px; cursor: pointer}
.dir {text-align: center; font-weight: bold}
.sol {height: 100px; width: 100px; text-align: center; font-size: 40px; font-weight: bold}
.top {font-size: 30px; text-align: center}
.total {font-size: 50px; font-weight: bold}
.num {font-size: 70px; font-weight: 700; text-align: center; border-radius: 10px; border: 2px solid black; padding: 10px 30px; width: 100px; line-height: 90px; height: 90px; margin: 10px auto}
textarea.ans {font-size: 2.3em; width: 200px; font-weight: bold; text-align: center; margin: 0 auto}
.btn {cursor: pointer}
hr{border-top: 2px solid black; border-bottom: none}