/* 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-image: var(--background-image);
  background-size:100vw;
  background-color: var(--page-background);
  background-repeat: no-repeat;
  color: var(--text-color);
  font-family: Verdana;
	-webkit-transition: color var(--trans), background-color var(--trans), border-color var(--trans), background-image var(--trans);
	transition: color var(--trans), background-color var(--trans), border-color var(--trans), background-image var(--trans);
}

html, body {
  height:auto;
  width:100vw;
  margin: 0;
  padding: 0;
}

#webpage {
  width: 1160px;
  height: 100%;
  min-height:calc(100vh - 15px);
  background-color: var(--background-color);
  margin: 0 auto 0 auto;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 15px;
	-webkit-transition: color var(--trans), background-color var(--trans), border-color var(--trans), background-image var(--trans);
	transition: color var(--trans), background-color var(--trans), border-color var(--trans), background-image var(--trans);
}

.page-banner {
  background-image: var(--banner-image);
  background-size: cover;
  background-repeat: no-repeat;
  width: 1200px;
  height: 400px;
  margin-left: -20px;
  margin-bottom: 20px;
  border-radius: 10px;
  z-index:99999;
  position: relative;
	-webkit-transition: background-image var(--trans);
	transition: background-image var(--trans);
}

/* MOBILE / TABLET */
/*
@media (max-width: 900px) {
  #sidebar {
    background-color: var(--sidebar-background);
    height:592px;
    width:265px;
    float:left;
    margin-top:-20px;
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
    
    font-family: Verdana;
    background-color: var(--sidebar-background);
  	-webkit-transition: color var(--trans), background-color var(--trans), border-color var(--trans);
  	transition: color var(--trans), background-color var(--trans), border-color var(--trans);
  }
  
  #content {
    height:fit-content;
    min-height: 500px;
    width: 800px;
    margin-left: 290px;
    margin-right: -40px;
    padding:0 20px 30px 20px;
    border-left: 2px solid var(--borders);
  }
  
  #footer {
    background-image: var(--footer-image);
    background-size: cover;
    width: 1180px;
    height: 130px;
    margin-top:30px;
    margin-left: -10px;
    margin-bottom: 0;
    display:block;
    z-index:99999;
  }
*/
/* DESKTOP */
/*@media (min-width: 900px) {*/
  #sidebar {
    background-color: var(--sidebar-background);
    height:592px;
    width:265px;
    float:left;
    margin-top:-20px;
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
    
    font-family: Verdana;
    background-color: var(--sidebar-background);
  	-webkit-transition: color var(--trans), background-color var(--trans), border-color var(--trans);
  	transition: color var(--trans), background-color var(--trans), border-color var(--trans);
  }
  
  #content {
    height:fit-content;
    min-height: 500px;
    width: 800px;
    margin-left: 290px;
    margin-right: -40px;
    padding:0 20px 30px 20px;
    border-left: 2px solid var(--borders);
  }
  
  #footer {
    background-image: var(--footer-image);
    background-size: cover;
    background-repeat: no-repeat;
    width: 1180px;
    height: 130px;
    margin-top:30px;
    margin-left: -10px;
    margin-bottom: 0;
    display:block;
    z-index:99999;
  }
/*
}
*/

@media (max-width: 1280px) {
  html, body {
    overflow-x:clip;
    width:100vw;
  }
  
  #webpage {
    width: 100vw;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
  }

  .page-banner {
    background-size: contain;
    width: 100vw;
    max-height: 20vh;
    margin-left: 0;
    margin-bottom: 0;
    border-radius: 0;
  }
  
  #sidebar {
    height:8em;
    width:100vw;
    position:absolute;
    z-index:999999;
    /*float:left;*/
    margin-top:-5vh;
  }
  
  #content {
    height:fit-content;
    min-height: 0;
    width: 95vw;
    margin-top:8em;
    margin-left: 0;
    margin-right: -0.5em;
    /*margin-left: 0.5em;
    margin-right: -0.5em;*/
    padding:0 20px 30px 20px;
    border-left: 0;
    border-top: 2px solid var(--borders);
  }
  
  #footer {
    background-size: contain;
    width: 100vw;
    max-height: 15vh;
    margin-top:15px;
    margin-left: -10px;
    margin-bottom: 0;
    display:block;
    z-index:99999;
  }
}

/*
#topbar {
  background-color: var(--sidebar-background);
  height:4em;
  width:100%;
  position:fixed;
  display:none;
  z-index:999999;
  margin-top:-4em;
  
  font-family: Verdana;
  background-color: var(--sidebar-background);
	-webkit-transition: color var(--trans), background-color var(--trans), border-color var(--trans);
	transition: color var(--trans), background-color var(--trans), border-color var(--trans);
	overflow-x: scrollbar;
}
*/

/* MOBILE */
/*
@media (min-width: 320px) and (max-width: 999px) {

  #webpage {
    width: 100vw;
    height: 100%;
    min-height:calc(100vh);
    margin: 0 auto 0 auto;
    padding-top: 0;
  }

  .page-banner {
    background-size: cover;
    width: 100vw;
    height: calc(100vw * 0.333);
    margin-bottom: 20px;
    border-radius: 0px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    z-index:99999;
    position: relative;
  	-webkit-transition: background-image var(--trans);
  	transition: background-image var(--trans);
  }

  #topbar {
    display:flex;
  }
  
  #webpage {
    margin-top:4em;
  }
  
  #sidebar {
    display:none;
  }
  
  #content {
    height:fit-content;
    min-height: 100vh;
    width: 100vw;
    margin-left: 40px;
    padding:0 20px 30px 20px;
    border-left: none;
  }
  
  #footer {
    background-image: var(--footer-image);
    background-size: cover;
    width: 100vw;
    height: calc(100vw * 0.12);
  }
}
*/
.toggle18 {
  visibility:hidden;
}


h1 {
  margin-bottom:7.5px;
}

h2 {
  margin-bottom:5px;
}

h3 {
  margin-top:5px;
  margin-bottom:2.5px;
  font-variant:small-caps;
}

a {
  color: var(--link);
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

a:hover {
  color: var(--link-hover);
}

li {
  margin-left:30px;
}

img {
  max-width:100%
}



.hornyContent {
  display:none;
}

#warn {
  position: fixed; /* Sit on top of the page content */
  display: block; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.85); /* Black background with opacity */
  z-index: 9999999; /* Specify a stack order in case you're using a different order for other elements */
  /*cursor: pointer; /* Add a pointer on hover */
  text-align:center;
}

#warnText{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 150%;
  color: white;
  transform: translate(-50%,-50%);
}