/* 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." */

@import url(https://db.onlinewebfonts.com/c/c89bbcb900554090a06a5dadaa54ace3?family=Percolator-Expert); 

@font-face 
{
    font-family: "Percolator-Expert";
    src: url("https://db.onlinewebfonts.com/t/c89bbcb900554090a06a5dadaa54ace3.eot");
    src: url("https://db.onlinewebfonts.com/t/c89bbcb900554090a06a5dadaa54ace3.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/c89bbcb900554090a06a5dadaa54ace3.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/c89bbcb900554090a06a5dadaa54ace3.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/c89bbcb900554090a06a5dadaa54ace3.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/c89bbcb900554090a06a5dadaa54ace3.svg#Percolator-Expert")format("svg");
}


:root
{
  --site-width: 1000px;
  --site-margin: 4px auto;
  --color-element-bg: rgba(41, 41, 41, 0.158);
  --color-element-border: rgba(219, 99, 255, 0.301);
}

body 
{
  
  background-image: url(thweknet/assets/images/background-stars.gif);
  background-attachment: fixed;
  font-family: Percolator-Expert;
  font-size: x-large;

}

.layout > *
{
  max-width: var(--site-width);
  margin: var(--site-margin); 
  display: grid;
  grid-gap: 24px;
  grid-template-columns: 300px minmax(zero, 1fr);
  
  
}

.layout-style > *
{
  background-color: var(--color-element-bg);
  padding: 8px;
  
}

.header
{
  grid-row: 1 / 2;
  grid-column: 1 / 3;
  text-align: center;
  border: 1px;
  background-color: rgba(0, 0, 0, 0);
  font-family: Percolator-Expert;

}

.nav
{
  grid-row: 2 / 3;
  grid-column: 1 / 3;
  text-align: center;
  padding: 0px;
  font-family: Percolator-Expert;
  border: 1px;
  border-style: solid;
  border-image: linear-gradient(to right, rgb(0, 204, 255), rgba(0, 255, 200, 0)) 1 0 1 0;
}

.nav ul
{
  margin: 2px;
  padding: 2px;
  overflow: hidden;
  font-size: x-large;
  text-align: center;
  display: inline-block;

}

.nav li
{
  float: left;
  padding: 4px;
}

.nav li::marker
{
  content: "x ";
}

.navlink
{
  grid-row: 3 / 4;
  grid-column: 1 / 2;
  height: max-content;
  width: max-content;
  padding: 4px;
  border: 1px;
  border-style: solid;
  border-image: linear-gradient(to top, rgb(0, 204, 255), rgba(0, 255, 200, 0)) 0 1 0 1;
}

.navlink ul
{
  padding: 16px;
  margin: 1px;
}

.main
{
  grid-row: 3 / 4;
  grid-column: 2 / 3;
  height: max-content;
  border: 1px;
  border-style: solid;
  border-image: linear-gradient(to top, rgb(0, 204, 255), rgba(0, 255, 200, 0)) 0 1 0 1;
}


.footer
{
  grid-row: 4 / 5;
  grid-column: 1 / 3;
  text-align: center;
  padding: 0px;
  margin: 0px;
  border: 0px;
  background-color: rgba(0, 0, 0, 0);
}

.footer,
.copyrightcontainer 
{
  clear: both;
  font-size: large;
  color: white;
  font-family: Percolator-Expert;
  
}
.copyrightcontainer 
{
  margin: 0 auto;
  
}



h1
{
  font-size: xx-large;
  color: white;
  font-family: Percolator-Expert;
  margin: 8px;

}


h2, h3, h4, h5, h6
{
  font-size: x-large;
  color: rgb(255, 45, 160);
  font-family: Percolator-Expert;
  margin: 0px;
  padding: 4px;

}

p
{
  margin: 0px;
  padding: 16px;
  color: rgb(252, 161, 255);
}

ul, li
{
  list-style-position: inside;
  color: rgb(252, 161, 255);
}



a, a:visited 
{
  color: rgb(255, 192, 18);
  font-weight: bold;
  text-decoration: none;
  
}
a:hover 
{
    color: rgb(255, 0, 0);
    font-weight: bold;
}

.inactive
{
  pointer-events: none;
  cursor: default;
}