/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
html {
      /*"scrollbar-gutter" doesn't show up, but it does work. 
      It's just not placed into the database yet I guess since it's modern day stuff*/
    scrollbar-gutter: stable; 

/*Background stuff*/    
    background-image: url('images/bgtest.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    background-clip: initial;
    background-position:center;
  }

  /*Body Text Stuff*/   
body {
    background-color:yellowgreen;
    width:512px;
    color: black;
    font-family: 'Comic Sans MS';
    font-size: 1.2em;
    padding: 5px 10px;
    margin:auto;
    margin-top:20px;
    border-style:outset;
    border-width:5px;
    border-color:rgb(0,100,0);
  }

  /*Text Link Stuff*/
a:link {
    color:blue;
    text-decoration:none;
  }

a:visited {
    color:rgb(100,70,100); 
    text-decoration:none;
  }

a:hover {
    color:rgb(100,100,255);
    text-decoration:underline;
  }
  
a:active {
    color:red;
  }

  /*Table Stuff*/

/*Border*/ 
table, th, td {
    border: 5px outset rgb(100,100,150);
    border-radius: 8px;
  }
/*Individual properties*/
table {
    font-family: Arial, Sans-serif;
    width: 100%;
    background-color:white;
    padding: 5px;
    border-spacing:4px;
  }

th {
    font-family: Arial, bold;
    text-align: left;
    color:white;
    background-color:rgb(100,100,255);
  }

tr {
    background-color:rgb(173, 216, 230, 75%);
  }
/*tr extra*/

tr:nth-child(even) {
    background-color:rgb(102, 160, 212, 75%);
  }

td {
    text-align: left;
  }
/*td extra*/
td:hover {background-color:#90ffcd}

/*Custom Class Test*/

.boing:hover {background-color:powderblue}

.tweet:hover {
    color:rgb(100,100,255); 
    text-decoration:none;
    font-weight: bold;
    }
    
/*Div Custom Class Test*/    

.container {
    width:100%;
    overflow:auto;
    display:flex;
  }
  
.container div {
    width: 100%;
    display:inline-block;
    margin:0 auto;
    padding:5px;
    vertical-align:top;
  }