/* centers validation */
#validation {
    text-align: center;
}


/* centers everything */
header, div, nav, h1, h2 {
    text-align: center;
}


/*body rule as required*/
body { 
    font-family: Arial, sans-serif; 
    margin: 10px; 
    padding: 20px;
    color: #000000;
    background-color: #f5f5f5;
}

/*figcaption*/
figcaption {
    font-family: 'Courier New', Courier, monospace;
    font-style: italic;
    font-size: small;
    text-align: center;
    padding-bottom: 0.5em;
}

figure {
    text-align: center;
    padding: 20px;
}

audio {
    display: block;
    text-align: center;
    margin: 0 auto;
}

/*display for image on default page*/
.imagemain {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%
  }


/*opening text style*/
.textlook1 {
    text-align: center;
    margin: 20px;
    font-size: 18px;
    text-wrap: wrap;
}

/*informational text style*/
.textlook2 {
    text-align: left;
    margin: 10px;
    text-wrap: wrap;
    line-height: 1.7;
}

/*responsive - from coffee assignment*/
.responsive {
    max-width: 100%;
    height: auto;
    border: 1px solid #51471A;
    border-radius: 10px;
}


/* media query that hides the image when the screen size is at 550 pixels or lower -- from coffee assignment*/
@media only all and (max-width: 550px) {
    img {
        display: none;
    }
}


/*footer style*/
footer {
    font-size: small;
    font-family: 'Courier New', Courier, monospace;
    font-style: italic;
    text-align: center;
}


/* table container for tables side by side*/
.table-container { 
    display: flex; 
    justify-content: space-evenly; 
    margin: 20px; 
    flex-wrap: wrap;
    }

/* tables general */
.table { 
    border-collapse: collapse; 
    width: 30%; 
    margin-right: 10px; 
}

.table th, .table td {
    border: 1px solid #000000; 
    padding: 8px; 
    text-align: center; 
    color: #000000;
}


/*all of my table color nonsense*/
/*ghost*/
.table.ghost th {
    background-color: #5f5fb1;
}
.table.ghost td {
    background-color: #d6d6ff;
}

/*dragon*/
.table.dragon th {
    background-color: #755edf;
}
.table.dragon td {
    background-color: #cfc6f7;
}

/*ice*/
.table.ice th {
    background-color: #6dd3f5;
}
.table.ice td {
    background-color: #caf0fc;
}

/*electric*/
.table.electric th {
    background-color: #e1d73a;
}
.table.electric td {
    background-color: #f7e5c3;

}

/*fighting*/
.table.fighting th {
    background-color: #99371a;
}
.table.fighting td {
    background-color: #f5d5cb;
}

/*grass*/
.table.grass th {
    background-color: #72c135;
}
.table.grass td {
    background-color: #e3fad2;
}

/*rock*/
.table.rock th {
    background-color: #a79045;
}
.table.rock td {
    background-color: #fcf1cc;
}

/*bug*/
.table.bug th {
    background-color: #88960e;
}
.table.bug td {
    background-color: #f6fad2;
}

/*fire*/
.table.fire th {
    background-color: #c82100;
}
.table.fire td {
    background-color: #fadfd9;
}

/*ground*/
.table.ground th {
    background-color: #cead53;
}
.table.ground td {
    background-color: #f7edd2;
}

/*psychic*/
.table.psychic th {
    background-color: #e13368;
}
.table.psychic td {
    background-color: #fcd7e2;
}

/*flying*/
.table.flying th {
    background-color: #5c72d4;
}
.table.flying td {
    background-color: #d0d7f7;
}

/*normal*/
.table.normal th {
    background-color: #c5c0b7;
}
.table.normal td {
    background-color: #faf5ed;
}

/*water*/
.table.water th {
    background-color: #0c67c2;
}
.table.water td {
    background-color: #cde3fa;
}

/*poison*/
.table.poison th {
    background-color: #762d78;
}
.table.poison td {
    background-color: #f6d5f7;
}