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

Any additional CSS formatting that I wish to add to my web page should also be included within this external CSS file. :)
*/

/* adds 10 pixels of padding around the header element, sets the width to 100% */
header {
    color: #2EA7EC;
    padding: 10px;
    width: 100%;
    display: flex;
}

/* Formatting for Header */
.banner-image{
    width: 70%;
    padding: 0em;
    margin: 0em;
}

.banner-title{
    padding-top: 30px;
    width: 50%;
}
#rift{
    width:70%;
    padding-left: 150px;
}

main {
    padding: 10px;
    width: 100%;
}

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

/* adds 10 pixels of padding around the footer element and creates a 1 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;
}

.footer {
    padding: 20px;
    text-align: center;
    /* Positioning the footer at the bottom of the screen */
    left: 0;
    bottom: 0;
    width: 100%;
}

.content {
    padding-bottom: 50px; /* Adjust for footer height + padding */
}

.right {
    text-align: right;
    padding-right: 80px;
}

.center {
    text-align: center;
}
body {
    /* This sets background color... */
    background-color: #051f52;
    color:#FFF;
}

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

p {
    text-align:center;
    font-size: larger;
    color: #2EA7EC;
}


h1 {
    text-align: right;
    padding-right: 80px;
}

h2 {
    text-align:center
}

h3 {
    text-align:center
}


/* main table tag */
table {
    margin: auto;
    border: 5px solid #2EA7EC;
    width: 100%;
    border-spacing: 0;
}
        
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;
}
/* this container keeps text nicely formatted 
.text-container {
    width: 20%;  Adjust as needed 
    max-width: 50px; Set a maximum width if desired 
    margin: 0 auto;  Center the container horizontally 
    padding: 20px;
    background-color: #f0f0f0;
}
*/

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



/* New code to handle Social Media Buttons */
.fa {
    padding: 20px;
    font-size: 30px;
    width: 50px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
  }
  
  .fa:hover {
      opacity: 0.7;
  }
  
  .fa-facebook {
    background: #3B5998;
    color: white;
  }
  
  .fa-twitter {
    background: #55ACEE;
    color: white;
  }
  
  .fa-google {
    background: #dd4b39;
    color: white;
  }
  
  .fa-linkedin {
    background: #007bb5;
    color: white;
  }
  
  .fa-youtube {
    background: #bb0000;
    color: white;
  }