body {
    margin: 0;
    padding: 0;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.container {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: 0.5fr 5fr 0.5fr;
    grid-template-areas: 
      'header header header'
      'nav main aside'
      'footer footer footer';   
  
    min-height: 100vh;
  }

header {
    grid-area: header;
    background-image: url('images/borzoi_hero.jpg'); 
    background-size: 70vh cover;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: 2px;
    height: 40em;
    color: white;
    display: flex;
    justify-content: center;
}

nav {
    grid-area: nav;
    font-size: 1.5rem;
    padding: 0 1em 0 1em;
    line-height: 0.5em;
    color: rgb(255, 115, 0);
}

a {
    text-decoration: none;
}

main {
    grid-area: main;
    color: rgb(255, 115, 0);
    padding: 0 5em 1.25em 5em;
    font-size: 1.5rem;
}

aside {
    grid-area: aside;
    font-size: 1.5rem;
    color: rgb(255, 115, 0);
}

footer {
    grid-area: footer;
    background-color: rgb(255, 115, 0);
    color: white;
    height: 200px;
}

h1 {
    position: relative;
    top: 2em;
    left: 3.5em;
    font-size: 6rem;
}

.content p {
    color: rgb(59, 38, 0);
    text-indent: 2em;
    line-height: 1.5em;
}

.quiz {
    color: rgb(59, 38, 0);
    border: 5px solid rgb(255, 115, 0);
    padding: 1em;
    max-width: fit-content;
}

.buttons {
    background-color: rgb(255, 115, 0);
    border: none;
    color: white;
    padding: .75em;
    border-radius: 10%;
}

.buttons:hover {
    border-color: black;
}

.nobutton {
    background-color: rgb(255, 115, 0);
    border: none;
    color: white;
    padding: .75em;
    border-radius: 10%;
}

.random {
    color: rgb(59, 38, 0);
    border: 5px solid rgb(255, 115, 0);
    padding: 1em;
    max-width: fit-content;
}

.random-button {
    background-color: rgb(255, 115, 0);
    border: none;
    color: white;
    padding: .75em;
    border-radius: 5px;
}

.footer-content {
    font-size: 1.25rem;
    padding-left: 3em;
    padding-right: 3em;
}

@media (max-width: 1024px) {
    .layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(5rem, auto) 1fr minmax(5rem,auto) auto;
        grid-template-areas: 
          "header"
          "nav"
          "main"
          "aside"
          "footer";
    }
}