/* 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/testing/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;
    margin-bottom: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;
  }

/*Testing divs one more time.*/

.consttestborder {
    height:30px;
    width:100px;
    border:5px dashed black;
    padding-top:7px;
}

/*TRUE FALSE TESTING*/

.tfcontainer {
  background-color:powderblue;
  width:250px;
  height:150px;
  border:5px double blue;
  padding:10px;
  box-sizing:border-box;
}

  .tfbox {
    background-color:yellow;
    width:150px;
    height:50px;
    border:2px solid black;
    font-size:10px;
    padding:2px;
    box-sizing:border-box;
  }
  
  .tfbuttons {
    background-color: rgb(200,200,200);
    color: rgb(50,50,50);
    margin-top:20px;
  }
  
/*I just wanna make something for fun .<.*/
  .totoprel {
    position:relative;
    top:0px;
    left:0px;
  }
  .totop {
    background-color:powderblue;
    border:5px outset green;
    position: fixed;
    bottom:20px;
    right:20vw;
    font-size:15px;
  }
  
  /*Just for fun, for my JS Function thing*/
  .plswork {
    border:5px outset green;
    background-color:white;
    width:200px;
  }
  
  /*For a button cause why not*/
  
  .roundguy {
    border:3px solid blue;
    border-radius:20px;
    background-color:powderblue;
    font-family:monospace;
  }