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


@font-face {
  font-family: "euxoi";
  src: url("/fonts/euxoi_memesbruh03_01102018.ttf") format("truetype");
}

@font-face {
  font-family: "basiic";
  src: url("/fonts/basiic.ttf") format("truetype");
}

@font-face {
  font-family: "roboto-light";
  src: url("/fonts/Roboto-Light.ttf") format("truetype");
}

:root {
    /* These variables exist so you can make quick and simple style changes without much CSS knowledge */

    /* applies to all areas */
    --font-family: "basiic";
    --font-size: 16px;
    --line-height: 1.3em;
    --font-color: black;
    --link-color: #7c4ba2;
    --link-text-decoration: underline dotted 2px;

    /* HEADERS */
    --text-headerfont-family: "euxoi";
    
    /* HIGHLIGHTER */
    --text-highlight-color: #b991d9;

    /* main content (between sidebars) */
    --content-padding: 25px;
    --content-bg-color: #EEEEEE;

    /* header */
    --header-height: 360px;
    --header-background: url('/img/header_01.jpg');
    --header-margin-bottom: 15px;

    /* sidebar */
    --sidebar-margin: 10px;
    --sidebar-width: 180px;
    --sidebar-padding: 15px;
    --sidebar-bg-color: #EEEEEE;

    /* footer */
    --footer-bg-color: #6c6276;
    --footer-font-color: #FFFFFF;

    /* navbar */
    --navitems-alignment: center;
    --space-between-navitems: 20px;
    --navbar-margin-bottom: 10px;
    --nav-bg-color: #6c6276;
    --nav-link-color: #FFFFFF;
    --nav-link-text-decoration: underline dashed 1px;

    /* container */
    --container-width: 950px;
    --container-bg-color: #FFFFFF;

    /* controls the gap between the content and the footer */
    --row-gap: 5px;

    /* To add scrollbars to your sidebars, just make the height a px value and change overflow to 'auto' */

    --sidebar-height: 100%;
    --sidebar-overflow: hidden;
    --background-color: #FFFFFF;
    --background-attachment: fixed;
    --background-image: url('/img/bg01_buns.jpg');
}








body {
    margin: 0;
    padding: 0;
    background-color: var(--background-color);
    background-image: var(--background-image);
    background-attachment: var(--background-attachment);
    font-family: var(--font-family);
    font-size: var(--font-size);
    line-height: var(--line-height);
    color: var(--font-color);
}

body a {
    color: var(--link-color);
    font-weight: bold;
    text-decoration: var(--link-text-decoration);
}

body h1 {
    font-family: var(--text-headerfont-family);
    font-weight: normal;
    font-size: 48px;
    line-height: 50px;
    margin-left: 0px;
    margin-top: 15px;
    margin-bottom: 0px;
}

body h2 {
    font-family: var(--text-headerfont-family);
    font-weight: normal;
    font-size: 32px;
    line-height: 34px;
    margin-left: 0px;
    margin-top: 15px;
    margin-bottom: 0px;
}

body h3 {
    font-family: var(--text-headerfont-family);
    font-weight: normal;
    font-size: 16px;
    margin-top: 15px;
    line-height: 18px;
}

hr {
    margin: 35px;
    border: 2px dashed;
    border-color: var(--nav-bg-color);
}

#main-container {
    max-width: var(--container-width);
    margin: 0 auto;
    background-color: var(--container-bg-color);
}

.flex {
    display: flex;
    margin-bottom: var(--row-gap);
}

.content-wrap {
    margin-top: var(--content-margin-top);
}

#content-container {
    width: 60%;
    margin-bottom: var(--row-gap);
    background-color: var(--content-bg-color);
}

#left-sidebar {
    width: var(--sidebar-width);
    margin-right: var(--sidebar-margin);
    margin-bottom: var(--row-gap);
    height: var(--sidebar-height);
    overflow: var(--sidebar-overflow);
    background-color: var(--sidebar-bg-color);
}

#right-sidebar {
    width: var(--sidebar-width);
    margin-left: var(--sidebar-margin);
    margin-bottom: var(--row-gap);
    height: var(--sidebar-height);
    overflow: var(--sidebar-overflow);
    background-color: var(--sidebar-bg-color);
}

#header-contained {
    height: var(--header-height);
    margin-bottom: var(--header-margin-bottom);
    background-image: var(--header-background);
    background-position: center center;
}

#footer {
    text-align: center;
    color: var(--footer-font-color);
    background-color: var(--footer-bg-color);
}

#header-full {
    display: none;
    height: var(--header-height);
    margin-bottom: var(--header-margin-bottom);
    background-image: var(--header-background);
    background-position: center center;
}

#navbar-contained {
    margin-bottom: var(--row-gap)
}

#navbar-full {
    display: none;
}

.nav {
    margin-left: 0;
    text-align: var(--navitems-alignment);
    margin-top: 0;
    margin-bottom: var(--navbar-margin-bottom);
    padding-top: 1em;
    padding-bottom: 1em;
    background-color: var(--nav-bg-color);
}

.nav li {
    display: inline-block;
    padding-right: var(--space-between-navitems);
}

.nav li a {
    color: var(--nav-link-color);
    font-family: var(--text-headerfont-family);
    font-size: 32px;
    font-weight: normal;
    text-decoration: var(--nav-link-text-decoration);
}

.wrapper {
    padding: var(--content-padding);
    padding-top: var(--sidebar-padding);
}


.sidebar-wrapper {
    padding: var(--sidebar-padding);
    height: var(--sidebar-height);
    overflow: var(--sidebar-overflow);
}

.footer-wrapper {
    padding: 5px;
}

.highlight-container, .highlight {
  position: relative;
}

.highlight-container {
  display: inline-block;
}
.highlight-container:before {
  content: " ";
  display: block;
  height: 90%;
  width: 100%;
  margin-left: -3px;
  margin-right: -3px;
  position: absolute;
  background: var(--text-highlight-color);
  opacity: .5;
  transform: rotate(2deg);
  top: -1px;
  left: -1px;
  border-radius: 20% 25% 20% 24%;
  padding: 10px 3px 3px 10px;
}

.banner-button {
  display: block;
  margin: auto;
  position: relative;
  height: auto; 
  max-width: 400px; 
  min-width: 320px;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  
}

.overlay-text a {
  color: white;
  font-family: var(--text-headerfont-family);
  font-weight: normal;
  font-size: 32px;
  line-height: 34px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}



.roster {
  margin: 15px;
  padding: 7px;
  text-align: center;
}


.roster-img {
    max-width: 180px;
    margin: 5px;
    border-radius: 30px;
    height: auto;
}

.roster-imgL {
    max-width: 180px;
    margin: 5px;
    border-radius: 30px;
    height: auto;
}

.roster-imgM {
    max-width: 100px;
    margin: 5px;
    border-radius: 30px;
    height: auto;
}

.roster-imgS {
    max-width: 80px;
    margin: 5px;
    border-radius: 30px;
    height: auto;
}


.roster-imgXS {
    max-width: 40px;
    margin: 1px;
    border-radius: 10px;
    height: auto;
}


.warning-container {
 display: block;
 border: dashed red 2px;
 background-color: #F5A1A1;
 width: 80%;
 margin: 35px;
 padding: 5px;
}

.closebtn {
  float: right;
  font-size: 16px;
  cursor: pointer;
  font-family: var(--text-headerfont-family);
  background-color: white;
  border: 1px black;
  padding: 5px;
  margin: 10px;
  border-radius: 15px;
}

.expandbtn {
  display: inline;
  background-color: white;
  border: 1px black;
  font-size: 16px;
  cursor: pointer;
  font-family: var(--text-headerfont-family);
  width: auto;
  padding: 5px;
  margin: 10px;
  border-radius: 15px;
}

.standardbtn {
  display: inline;
  border: 1px black;
  cursor: pointer;
  width: auto;
  padding: 15px;
  margin: 5px;
  border-radius: 15px;
  line-height: 50px;
}



/* General Rows and Columns Start */
.row {
  text-align:center;
  margin-top: 20px;
}

/* Two columns side by side */
.column {
  float: left;
  width: 48%;
  margin-bottom: 16px;
  padding: 0 8px;
}

/* Display the columns below each other instead of side by side on small screens */
@media screen and (max-width: 950px) {
  .column {
    width: 100%;
    display: block;
  }
}

.card {
  border: dashed 2px black;
}

/* Some left and right padding inside the container */
.container {
  padding: 0 16px;
}

/* Clear floats */
.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}
/* General Rows and Columns End */



/* START OF CHAR STUFF */
/* Two columns side by side */
.columnChar {
  float: right;
  width: 38%;
  margin-bottom: 16px;
  padding: 0 8px;
}

/* Display the columns below each other instead of side by side on small screens */
@media screen and (max-width: 950px) {
  .columnChar {
    width: 100%;
    display: block;
  }
}

.columnCharImage {
  max-width:100%;
  position:absolute;
  top: 20px;
  left: 50%;
  padding-left:20px;
}

/* Display the columns below each other instead of side by side on small screens */
@media screen and (max-width: 950px) {
  .columnCharImage {
    max-width: 100%;
	position:static;
	padding:0px;
  }
}

/* Two columns side by side */
.columnText {
  float: right;
  width: 58%;
  margin-bottom: 16px;
  padding: 8px;
}

/* Display the columns below each other instead of side by side on small screens */
@media screen and (max-width: 950px) {
  .columnText {
    width: 100%;
    display: block;
  }
}
/* END OF CHAR STUFF */








/* To keep your site RESPONSIVE, make sure this variable matches the width for --container-width UNLESS --container-width is 100% - if it's 100%, you'll need to manually input a breakpoint. */
@media only screen and (max-width: 950px) {
    .flex {
        flex-wrap: wrap;
    }

    #left-sidebar {
        width: 100%;
        display: block;
        order: 2;
        margin-right: 0;
        margin-bottom: 10px;
    }

    #right-sidebar {
        width: 100%;
        display: block;
        order: 3;
        margin-left: 0;
    }

    #content-container {
        width: 100%;
        display: block;
        order: 1;
        margin-bottom: 10px;
    }
    
    .roster-imgL {
        max-width: 100px;
        margin: 3px;
        border-radius: 30px;
        height: auto;
    }
    
    .roster-imgM {
        max-width: 60px;
        margin: 3px;
        border-radius: 20px;
        height: auto;
    }
    
    .roster-imgS {
        max-width: 40px;
        margin: 1px;
        border-radius: 10px;
        height: auto;
    }
    
    .roster-imgXS {
        max-width: 40px;
        margin: 1px;
        border-radius: 10px;
        height: auto;
    }

}