:root {
    --main-color: yellow;
    --second-color: goldenrod;
}
body {
    background-color: black;
    display: inline-flex;
    padding-inline: 5%;
    padding-block: 30px;
    column-gap: 2%;
    justify-content: center;
}
header {
    display: flow;
    width: 24%;
    max-width: 150px;
    min-width: 80px;
}
main {
    width: 74%;
    display: grid;
    row-gap: 7px;
}
header > div, .title, .examples, footer {
    background-color: yellow;
    min-height: 20px;
    border-radius: 3px;
    padding: 5px 10px
}
header > div {
    margin-bottom: 5px;
}
.further, .Do-Dont, .ToS {
    background-color: goldenrod;
    min-height: 50px;
    border-radius: 3px;
}
.middle{
    display: inline-flex;
    column-gap: 2%;
}
.reference {
    width: 54%;
    background-color: red;
    border-radius: 3px;
    background-size: cover;
}
.mid-side {
    width: 44%;
    display: grid;
    row-gap: 10px;
}
.sona {
    aspect-ratio: 1/1;
}
.socials {
    font-size: 2em;
    text-align: center;
}
.socials img {
    background-size: contain;
    max-width: 100%;
    height: 0.8em;
    filter: brightness(0);
}
.sona, .title, .examples {
    background-image: url("/buddyImages/sparkle.gif");
    background-size: cover;
}
.controls {
    padding: 5px;
    display: inline-flex;
    width: stretch;
    justify-content: space-between;
    font-weight: bold;
    font-size: x-large;
}