/* 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." */
   
body { background-color: black; }

p,h1,h2,h3 { text-align: center; margin: 2%; }
a { color: blue; }
a:hover { color: yellow; text-shadow: 2px 2px black; }

.clearfix::after { content: ""; clear: both; display: table; }
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: 'VT323', monospace; }

nav { width: 90%; overflow: hidden; background-color: black; margin: 1% 3% 0 7%; justify-content: space-between; }
.navbar { width: 90%; overflow: hidden; background-color: black; margin: 0 5% 0 5%; }
.navbar a { float: left; font-size: 24px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }
.dropdown { float: left; overflow: hidden; }
.dropdown .dropbtn { font-size: 24px; border: none; outline: none; color: white; padding: 14px 16px; background-color: black; font-family: inherit; margin: 0; }
.navbar a:hover, .dropdown:hover .dropbtn { background-color: purple; color: HotPink; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; color: white; }
.dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }
.dropdown-content a:hover { background-color: #660066; transform: scale(1.023) !important; color: white; }
.dropdown:hover .dropdown-content { display: block; }
.navbar:after { content: ""; display: table; clear: both; }
.dropbtn .home { font-size: 1.3em; text-decoration: none !important; }
.navcol { width: 100%; }


.flexrow { display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: flex-start; } .row { display: flex; }
.flexrow:after, .row:after { content: ""; display: table; clear: both; }
.column { padding: 1%; height: auto; margin: 2%; display: inline-block; }
.column2 { float: left; padding: 5px; height: 295px; margin: 2%; overflow-y: scroll; }
.left { width: 19%; margin-left: 8.5%; display: table; float: left; }
.right { width: 62%; margin-right: 9%; display: table; float: right; }
.middle { width: 79%; margin: 2% 9% 2% 2%; }
footer { width: 78%; margin: 1% 3% 3% 11%; padding: .6%; text-align: center; text-shadow: none; border: inset 5px; border-radius: 4px; ; color: black; background-color: lightGrey; }
footer a, footer p { line-height: 140%; }
footer p { margin: 1%; }

.grad { background-image: linear-gradient(to bottom right, rgba(0, 232, 60, 0.53), rgba(247, 0, 99, 0.53)); }
.grad2 { background-image: linear-gradient(to bottom right, rgba(255, 251, 102, 0.7), rgba(161, 255, 213, 0.9)); }

#___gcse_0, #gs_id50, .gcse-searchbox-only { width: 60%; margin: auto; max-height: 30%; float: right; line-height: 80% !important; background-color: black !important; border: none !important; } 
.gsc-control-cse, .gse-search-box, .gcse-searchbox-only, .gcse-searchresults-only { background-color: black !important; border: none !important; }
.gsc-search-box, gsc-input, gsc-input-box, .gsib_a, #gsc-i-id1, .gsc-control-cse, .gcse-searchbox-only { padding: 0 !important; margin: 0 auto 0 auto !important; border: none !important; }
#gsc-iw-id1, #___gcse_1 *, .gsc-results *, .gsc-results gsc-webResult *, .gcsc-more-maybe-branding-root * { border: none !important; background-color: black !important; }
#gsc-iw-id1, .gsc-results { padding: 0 !important; margin: 0 auto 0 auto !important; border: none !important; background-color: black !important; }

.canary { color: PaleGoldenRod !important; }
.shadow { text-shadow: 1.2px .5px 3.2px yellow; font-weight: bold; }

@media screen and (max-width: 1160px) and (min-width: 1000px) {
   nav { width: 100%; }
   nav, nav div, nav button, nav i, nav a { margin: 0 0 .1% 0; font-size: 1.3rem !important; }
   #___gcse_0 { margin: .85% 0 0 2.7%; } svg:not(:root) { overflow-clip-margin: border-box; overflow: visible; } .gsc-input { width: 60%; }
  .column { width: 48.1%; margin: 1%; }
  .column2 { margin: 2px; padding: 2px; width: 50%; font-size: .9em; }
  .left { max-width: 28%; margin: 1%; }
  .right, .middle { width: 74%; margin: 1%; }
  footer { float: none; width: 99%; margin: 1% 0 1% 0; }
  footer, footer p { font-size: .87em; line-height: normal; }
  footer p { margin: 1%; }
  footer a { font-size: .9em; line-height: normal; }
}

@media screen and (max-width: 999px) and (min-width: 701px) {
  nav * { width: 100%; margin: 0 0 .2% 0; font-size: 1.2rem !important; }
  .column, footer { float: none; width: 99%; margin: 1%; border: inset 3px; }
  .column2 { margin: 2px; padding: 1px; width: 49%; font-size: .7em; border: inset 3px; }
  .left { max-width: 28%; margin: 1%; }
  footer, footer p { font-size: .87em; line-height: normal; }
  footer a { font-size: .9rem; line-height: normal; }
  li, li2 { margin: 0; padding: 0; }
  #___gcse_0 *, .useful { display: none; }
}

@media screen and (max-width: 700px) {
  nav * { width: 100%; margin: 0 0 .4% 0; font-size: 1.2rem !important; }
  .home *, .home a { font-size: 1.2rem !important; }
  .column, footer { float: none; width: 100%; margin: 1.6% auto !important; border: inset 3px; }
  .column2 { margin: 2px; padding: 1px; width: 49%; font-size: .7em; border: inset 3px; }
  footer, footer p { font-size: .75rem; line-height: normal; }
  footer a { font-size: .75rem; line-height: normal; }
  footer * { float: none; margin: 0; width: 100%; }
  li, li2 { margin: 0; padding: 0; }
  #___gcse_0 *, .left, .gcse-searchbox-only, .useful { display: none; }
}