#wrapper {
    display: grid;
    grid-gap: 1em;
    grid-column: 5% auto 50px auto 5%;
    grid-row: 80px 140px auto 100px 50px 80px;
}

body {
    background-image: url(../images/background.jpg);
}
#header{
    grid-area: 1/1/1/6;
    text-align: center;
    border: 2px solid black;
    background-color: rgb(100, 100, 100, .7);
    color: white;
}

h1{
    font-size: 65px;
}

h2{
    font-size: 30px;
    color: white;
}

p{
    color: white;
}

#subheader{
    grid-area: 2/2/2/5;
    display: grid;
    grid-row: auto;
    grid-column: auto auto auto auto;
    grid-gap: 1em;
    border: 2px solid black;
    background-color: rgb(100, 100, 100, .7);
    padding: 30px;
}

#subHeaderText{
    grid-area: 1/1/1/5;
    text-align: center;
}


.picture {
    border: 2px solid black;
    width: 180px;
    height: 160px;
}

.playerImg {
    border: 2px solid black;
    width: 180px;
    height: 160px;
    margin: 0 auto;
}

.defenderImg{
    border: 2px solid black;
    width: 180px;
    height: 160px;
    margin: 0 auto;
}

.archerClass {
    grid-area: 2/1/2/1;
    margin-left: 5%;
    margin-bottom: 20px;
    text-align: center;
}

.warriorClass {
    grid-area: 2/2/2/2;
    margin-bottom: 20px;
    text-align: center;
}

.mageClass {
    grid-area: 2/3/2/3;
    margin-bottom: 20px;
    text-align: center;
}

.rougeClass {
    grid-area: 2/4/2/4;
    margin-right: 10px;
    margin-bottom: 20px;
    text-align: center;
}

#leftDiv {
    display: grid;
    grid-area: 3/2/4/2;
    border: 2px solid black;
    text-align: center;
    background-color: rgb(100, 100, 100, .7);
    color: white;
    padding: 10px;
}

#vs{
    grid-area: 3/3/4/3;
    border: 2px solid black;
    background-color: rgb(100, 100, 100, .7);
    text-align: center;
    padding: 5px;
}

#rightDiv{
    grid-area: 3/4/4/4;
    border: 2px solid black;
    text-align: center;
    background-color: rgb(100, 100, 100, .7);
    color: white;
    padding: 10px
}

#textArea{
    grid-area: 4/2/4/5;
    border: 2px solid black;
    text-align: center;
    background-color: rgb(100, 100, 100, .7);
    color: white;
    padding: 1em;
}

#buttonDiv{
    grid-area: 5/3/5/3;
    text-align: center;
}

#footer{
    grid-area: 6/1/6/6;
    border: 2px solid black;
    text-align: center;
    background-color: rgb(100, 100, 100, .7);
    bottom: 0;
    padding: 20px;
}