body {
    margin: 0;
    display: grid;
    font-family: 'Gill Sans', 'Gill Sans MT', 'Trebuchet MS', sans-serif;
}

header {
    background-color: #3b444b;
    color: #f0ece1;
    text-align: center;
}

main {
    background-color: #e5703d;
    color: #3b444b;
}

footer {
    background-color: #3b444b;
    padding: 1em;
    display: flex;
    justify-content: center;
}

.box {
    border: 2px solid #3b444b;
    border-radius: 5px;
    background-color: #f0ece1;
    margin: 1em;
}

#middle {
    align-items: center;
    border: 2px solid #3b444b;
    border-radius: 5px;
    background-color: #f0ece1;
    margin: 1em;
    display: flex;
    flex-direction: column;
}

h3, h4 {
    text-align: center;
    margin: auto;
    padding: 5px;
}

table {
    border-collapse: collapse;
    width: 100%;
  }
  
td, th {
    border: 1px solid #ece0bf;
    text-align: left;
    padding: 8px;
  }
  
tr:nth-child(even) {
    background-color: #ece0bf;
  }

p {
    padding-left: 10px;
    padding-right: 10px;
  }

a:link, a:visited, a:hover, a:active {
    color:#3b444b
}

.dice {
    height: 20px;
}

.tech {
    border-radius: 5px;
    background-color: #000000;
    width: fit-content;
    display: flex;
    padding: 5px;
    margin: 5px;
}

.button {
    background-color: #3b444b;
    color: #f0ece1;
    text-align: center;
    border-radius: 2px;
    margin: auto;
    margin-bottom: 1em;

}

.nav {
    display: flex;
    gap: 1em;
    padding: 1em;
}

.lightText {
    color:#f0ece1 !important;
}

blockquote {
    background-color: #ece0bf;
}

@media screen and (min-width: 600px) {
    main {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
        "stock vehicles"
        "stock group"
        "crafting crafting";
    }

    .stock {
        grid-area: stock;
    }

    .vehicles {
        grid-area: vehicles;
    }

    .group {
        grid-area: group;
        height: 100%;
    }

    .crafting {
        grid-area: crafting;
    }


  }