body { 
    margin: 0; 
    width: 100%;
    padding: 0; 
    background-color: #e6f2fc;
    font-family: Arial, Helvetica, sans-serif;
}

header {
    width: 80vw;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #051c2c;
    text-align: center;
    font-family: fantasy;
    font-size: x-large;
    font-weight: bold;
}

.container {
    width: 80vw;
}

h2 {
    font-style: italic;
    font-size: medium;
    text-align: center;
}

hr {
    border-style: none;
}

.col {
    display: inline-flexbox;
    max-width: 200px;
    margin-right: 230px;
    text-align: center;
}

p {
    display: inline-flexbox;
    max-width: 200px;
    text-align: center;
}

.topic-btn {
    display:inline-block;
    padding:0.3em 1.2em;
    border-radius:2em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'Roboto',sans-serif;
    font-weight:300;
    color:#FFFFFF;
    background-color:#4eb5f1;
    text-align:center;
    transition: all 0.2s;
}
.topic-btn:hover{
    background-color:#4095c6;
    }
    @media all and (max-width:30em){
    .topic-btn{
    display:block;
    margin:0.2em auto;
    }
}