@charset "UTF-8";
/*
Purpose: Basic style sheet for Web Project 2
Author: Andrew Addens
Course: ITWP 1100
*/

/* adds 10 pixels of padding around the header and main elements, sets the width to 100% */
header, main {
    padding: 10px;
    width: 100%;
}

h1, h2 {
    text-align: center;
}

/* adds 10 pixels of padding around the nav element and displays a 2 pixel solid black border below and above the nav element, sets width to 100% */
nav {
    padding: 20px;
    width: 100%;
    text-align: center;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
}

body {
    background-color: #646D7F;
    color:#FFF;

}

p {
    text-align:center;
    padding-left: 10px;
    padding-right: 40px;
}

.center {
    text-align: center;
}

.left {
    text-align: left;
}

/* adds 10 pixels of padding around the footer element and creates a 2 pixel solid black border above the footer, centers the footer text, sets the width to 100% */
footer { 
    padding: 10px;
    border-top: 2px solid #000;
    width: 100%;
    text-align:center;
    position: absolute;
}

/* Positions the footer at the bottom of the screen when there isn't a lot of content */
.footer {
    left: 0;
    bottom: 0;
    width: 100%;
}

#player {
    margin: auto;
    border: 3px solid #333;
    padding: 10px;
}

/* main table tag */
table {
    margin: auto;
    border: 5px solid #2EA7EC;
    width: 100%;
    border-spacing: 0;
}

.shrink { /* scales down size by 25%, specifically for tables */
    transform: scale(0.75);
}

td, th {
    border-style:groove;
    padding: 0.5em;
    width:auto;    
    text-align:center;
    }
        
tfoot td {
    font-size: 10px;
    font-style: italic;
    text-align: center;
    }
        
tr:nth-of-type(even) {
    background-color: #000;
    }
        
thead:first-of-type {
    background-color: #2EA7EC;
    color:#FFF;
    }

/* responsive image class */
img.responsive {
    max-width: 100%; /* allows the image to scale down if it has to, but it will not scale up in size to be larger than its original size */
    height: auto;
}

/* used to format form/picture into a table */
.container {
      display: flex;
    }
.column {
      flex: 1;
      padding: 20px;
    }