@font-face {
    font-family: "Beryozki";
    src:
      url("Beryozki.woff") format("woff"),
      url("Beryozki.eot") format("embedded-opentype");
}

.content {
    margin: auto;
    text-align: center;
    background-color: #5c5e67C0;
    max-width: 80vw;
    border-style: solid;
    border-top-style: none;
    border-radius: 0 0 1cm 1cm;
    border-color: aliceblue;

    padding-top: 2cm;

    /* Grid fucking magic. */
    display: grid;
    grid-template-areas:
        "header header"
        "menubar menubar"
        "sidebar content"
        "footer footer";
    grid-template-columns: 1fr 3fr;
}

menu.sidebar {
    grid-area: sidebar;
}

menu.menubar {
    grid-area: menubar;
    background-color: rgba(120, 120, 133, 0.75);
    min-height: 2cm;

    font-family: Beryozki, sans-serif;
}

h1 {
    font-size: 10em;
    font-weight: bold;
    font-family: Beryozki;
    grid-area: header;
    margin-top: -1cm;
    margin-bottom: 1cm;
}

article {
    grid-area: content;
    font-family: Beryozki;
    font-size: 3em;
    font-weight: bold;
    img {
        width: 80%; 
    }
}

body {
    background-color: #000000;
    background-image: url("background.png");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

button img {
    display: none;
    height: 3cm;
}

button div {
    display: inline;
    position: relative;
    background-image: url("buttonbackground.png");
    background-size: 7cm 3cm;
    padding: 0.5cm 1cm 0.5cm 1cm;
    width: 6cm;
    height: 2cm;
    color: #ffffff;
}

button {
    background: none;
    border: none;
    padding: 0 0 0 0;

    font-family: Beryozki;
    font-size: 5vw;
    font-weight: bold;
    height: 3cm;
}

button.sidebar {

    width: 100%;
}