body {
    height: 100vh;
    margin: 0px;
}
#headline:hover {font-weight: bold;}
#headline {
    text-align: center;
    font-size: 30px;
    width: 9em;
    margin: 10px auto;
}
#thing1:hover>.reasonwhy {height: auto;}
#thing1:hover>.thething {font-weight: bold;}
#thing1 {
    background-color: lightskyblue;
}
#thing2:hover>.reasonwhy {height: auto;}
#thing2:hover>.thething {font-weight: bold;}
#thing2 {
    background-color: cornflowerblue;
}
#thing3:hover>.reasonwhy {height: auto;}
#thing3:hover>.thething {font-weight: bold;}
#thing3 {
    background-color: royalblue;
}
#thing1, #thing2, #thing3 {
    width: 60%;
    margin: 10px auto;
    border: 3px;
    border-style: solid;
    border-color: navy;
    padding: 10px 20px;
}
#goto:hover {
    background-color: navy;
    color: lightblue;
    border-color: lightblue;
}
#goto {
    background-color: lightblue;
    text-decoration: none;
    color: navy;
    margin: 5px;
    border: 1px;
    border-style: solid;
    border-color: navy;
    padding: 5px 15px;
}
.thething {
    font-size: 24px;
    padding-left: 15px;
    padding-right: 5px;
}
.reasonwhy::before {content: "WHY: ";}
.reasonwhy {
    font-size: 15px;
    height: 0px;
    overflow: hidden;
}