body{
    font-family: Roboto Mono,monospace;
    display: grid;
    background: #e0e0e1;
}
.site-title{
    text-align: center;
}


.avatar-image{
    width: 100px;
    border-radius: 50px;
}

.section{
    background: white;
    box-shadow: 5px 5px 7px 1.6px rgb(0 0 0 / 15%);
    padding: 20px;
    border-radius: 5px;
}

.section-heading{
    display: grid;
    grid-template-columns: max-content auto;
    align-items: center;
    gap: 8px;
}

.section-heading img{
    width: 40px;
}

.section-separator.is-style-dots:before {
    content: "\00b7 \00b7 \00b7 \00b7 \00b7 \00b7";
    color: fuchsia;
    font-size: 2em;
    letter-spacing: 2em;
    padding-left: 2em;
    font-family: serif;
}

.section-separator{
    background: none!important;
    border: none;
    text-align: center;
    max-width: none;
    line-height: 1;
    height: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}

.bottom-footer{
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

.buttons-container{
    display: flex;
    justify-self: center;
    grid-gap: 20px;
    grid-template-columns: max-content;
}

.button{
    padding: 12px 24px;
    border-radius: 5px;
    border: solid 2px teal;
    color: teal;
    cursor: pointer;
    text-decoration: unset;
}

.button:hover{
    background: teal;
    color: white;
}