@import url(https://fonts.bunny.net/css?family=aclonica:400|barlow:400);

/*Font used for fancy accents -- REPLACE with your own!*/
@font-face {
    font-family: 'Aclonica', sans-serif;
    font-family: 'Barlow', sans-serif;
}

body {
    margin: 0;
    padding: 0;
    color: #fff;
    background: #271610;
    background-image: url("https://www.transparenttextures.com/patterns/white-diamond-dark.png");

    font-size: 0.95em;
    font-family: "Barlow", "Source Code Pro", "Courier New", monospace;
}

* {
    cursor: url(images/cursors/normal.gif), auto;
    -webkit-animation: defaultcursor 600ms infinite;
    animation: defaultcursor 600ms infinite;
}

@-webkit-keyframes defaultcursor {
    0% {
        cursor: url(images/cursors/normal.gif), auto;
    }

    100% {
        cursor: url(images/cursors/normal_2.gif), auto;
    }

}

@keyframes defaultcursor {
    0% {
        cursor: url(images/cursors/normal.gif), auto;
    }

    100% {
        cursor: url(images/cursors/normal_2.gif), auto;
    }

}

a {
    color: #b8aba6;
    cursor: url(images/cursors/link.gif), auto;
    -webkit-animation: linkcursor 600ms infinite;
    animation: linkcursor 600ms infinite;
}

@-webkit-keyframes linkcursor {
    0% {
        cursor: url(images/cursors/link.gif), auto;
    }

    100% {
        cursor: url(images/cursors/link_2.gif), auto;
    }


}

@keyframes linkcursor {
    0% {
        cursor: url(images/cursors/link.gif), auto;
    }

    100% {
        cursor: url(images/cursors/link_2.gif), auto;
    }

}

/*Increased spacing to compensate for current font - may want to change if you use something else.*/
p {
    line-height: 150%;
}

/*Set font for headings.*/
h1,
h2,
h3 {
    text-align: center;
    font-family: Aclonica, Cursive, serif;
    letter-spacing: 0.175em;
    word-spacing: 0.2em;
}

/*Make the first letter slightly bigger and a different color :) */
h1::first-letter,
h2::first-letter,
h3::first-letter {
    color: #e2b895;
    font-size: 1.25em;
    font-weight: bold;
}



/*Make lowercase headers bigger, since this font's a little harder to read.*/
h1 {
    font-size: 2.325em;
}

/*Make h2 and h3 in ALLCAPS.*/
h2,
h3 {
    text-transform: uppercase;
}

/*h3 is left-aligned and indented.*/
h3 {
    text-align: left;
    margin-left: 1em;
    font-size: 1.25em;
}

/*Change color when bold or italic.*/
b {
    color: #e2b895;
}

i {
    color: #b19c94;
}

hr {
    border: 0;
    background: linear-gradient(rgb(0, 0, 0, 0), rgb(255, 255, 255, 1), rgb(0, 0, 0, 0));
    height: 1px;
    margin: 2em 1em;
}

blockquote {
    font-style: italic;
    border-left: 1px solid #aae6ff;
    background: rgb(170, 230, 255, 0.15);
    padding: 5px 20px;
}


/***

NOTE: This stylesheet uses elements instead of div classes in a few places (nav1, nav2). 
If you want to use them as classes, put "." in front of all the custom element names in the stylesheet here.
For example: nav1 .navlink {} would be .nav1 .navlink {} instead.

***/

/*Content all goes in here.*/
.wrapper {
    display: block;
    margin: 0 auto;
    width: 800px;
    position: relative;
}

/*This is where the pretty header image goes! Replace the url with the location of your own.*/
.header {
    display: block;
    background: linear-gradient(rgb(39, 22, 16, 0.99), rgb(39, 22, 16, 0)), url("https://gbf.wiki/images/0/02/PromotionalArt_2019_02_22_WMTSB_II_Event.jpg") no-repeat;
    /*REPLACE ME!*/
    background-size: 900px auto;
    height: 400px;
    top: 0;
}

/*Miscellanous fancy styling for the title inside the header area.*/
.header h1 {
    font-size: 3.25em;
    padding-top: 175px;
    text-transform: lowercase;
}

.header h1::first-letter {
    color: #fff;
    font-size: 1.0em;
}

/*Puts "[]" around the title.*/
.header h1:before {
    content: "[";
}

.header h1:after {
    content: "]";
}

/*Nav1 is for the link buttons on the side.*/
nav1 {
    display: block;
    position: absolute;
    float: right;
    margin-left: 800px;
    top: 30px;
}

nav1 .navlink {
    display: block;
    margin: 15px 0px;
    padding: 5px 2px;
    width: 150px;
    text-align: center;
    background: #3d383b;
    font-family: Aclonica;
    font-size: 1.5em;
    text-transform: uppercase;
    border-radius: 0 15px 5px 0px;
}

nav1 .navlink a {
    color: #fff;
    text-decoration: none;
}

nav1 .navlink:hover,
nav1 .navlink:focus-within {
    background: #555;
    padding-left: 5px;
    transition: ease 0.5s;
    /*So the tab button appears to 'move' instead of instantly changing and popping outwards.*/
}

/*Nav2 is for the links directly below the header.*/
nav2 {
    display: block;
    width: 100%;
    background: #a97967;
    text-align: center;
}

nav2 .navlink {
    display: inline-block;
    margin: 10px 5px;
    padding: 2px;
    font-size: 1.5em;
    text-decoration: none;
    font-family: "Symbola", "Palatino Linotype", Garamond, serif;
    font-weight: bold;
}

nav2 .navlink a {
    color: #fff;
    text-shadow: 0 0 2px #c3cdea;
}

nav2 .navlink a:hover,
nav2 .navlink a:focus {
    text-shadow: 0 0 3px #dae1f5;
    transition: ease 5s;
}

/*Main page content goes in here. (Replace the image with your own footer image.)
  The rgb color in the linear-gradient here should match your actual main div background color, so the image
  appears to 'fade in' from the image to solid background. */
.main {
    display: block;
    margin: 0;
    position: relative;
    /*In order: gradient overlay (opacity going from 1 to 0.875), actual background color, footer image*/
    background: linear-gradient(rgb(67, 48, 41, 1), rgb(67, 48, 41, .875)), #433029 url("./images/bg.png") no-repeat;
    background-size: 900px auto;
    background-position: bottom center;
}

/*Inside div. I don't remember why this was a div and nothing else, but it is. 
  If you do change that, remember to add display:block; to the element first.*/
.inner {
    padding: 1px 20px 20px 20px;
    /*The 1px is to prevent paragraph margin overflow from mucking up the background. CSS is weird sometimes.*/
}

/*Prevent image overflow.*/
.inner img {
    max-width: 100%;
    height: auto;
}

/*Footer with small text at the bottom of the page.*/
.footer {
    display: block;
    padding: 0.75em 20px;
    text-align: center;
    font-size: 0.85em;
    background: #a97967;
    line-height: 150%;
}

.footer a {
    color: #dddddd;
    text-decoration: none;
}



/***

For narrower screens that can't handle the full version of the page.

***/

/*For desktop screens that are too narrow for the default width, keep the default layout, but with a narrower column.*/
@media(max-width:1050px) {
    .wrapper {
        width: 600px;
    }

    nav1 {
        margin-left: 600px;
    }
}

/*For smallest screens, switch to percentage-based width, and move the side tab buttons to the space under the header as centered buttons.*/
@media(max-width:900px) {
    .wrapper {
        width: 80%;
    }

    nav1 {
        position: static;
        margin-left: 0;
        margin: 0 auto;
        width: 100%;
        text-align: center;
    }

    nav1 .navlink {
        display: inline-block;
        border-radius: 15px 5px;
        margin: 15px 0;
        padding: 5px 15px 10px 15px;
        width: auto;
    }

    nav1 .navlink:hover {
        padding-left: 15px;
    }
}

/*If on mobile, maximize the space available by increasing width to 95%.*/
@media(orientation:portrait) {
    .wrapper {
        width: 95%;
    }
}

/* bang whap */
div {
    box-sizing: border-box;
}

.table-container {
    display: block;
    margin: 2em auto;
    width: 90%;
    color: #2d221e;
    background-color: rgba(212, 188, 179, 0.75);

}


.flex-table {
    display: flex;
    flex-flow: row;
    border-left: solid 1px #2d221e;
}

.flex-row {
    text-align: center;
    padding: 1em 1em;
    border-right: solid 1px #2d221e;
    border-bottom: solid 1px #2d221e;
    flex-grow: 1;
    align-content: center;
    justify-content: left;
}

.flex-row.first {
    border-top: solid 1px #2d221e;
}

.column .flex-row.first {

    border-top: double 4px #2d221e;
}

.rowspan {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: center;
    min-width: 65%;
}

.column {
    display: flex;
    flex-flow: column wrap;
    width: 100%;
    padding: 0;
}

.column .flex-row {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    border: 0;
    border-bottom: double 4px #2d221e;
    border-right: solid 2px #2d221e;
}

iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100% !important;
}

.iframeholder {
    position: relative;
    overflow: hidden;
    width: 75%;
    padding-top: 42.1875%;
    /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
    margin: auto;
}

@media all and (max-width: 767px) {

    .flex-row {
        width: calc(100% / 3);
    }

    .flex-row.first {
        width: 100%;
    }

    .column {
        width: 100%;
    }
}

@media all and (max-width: 430px) {

    .flex-table {
        flex-flow: column;
    }

    .flex-table .flex-row {
        border-bottom: 0;
    }

    .flex-table .flex-row:last-of-type {
        border-bottom: solid 1px #2d221e;
    }


    .flex-row {
        width: 100%;
    }

    .flex-row.first {
        width: 100%;
        border-bottom: 0;
    }

    .column {
        width: 100%;
    }

    .column .flex-row {
        border-bottom: solid 1px #2d221e;
    }

    .column .flex-row.first {

        border-top: 0;
    }

}


/*https://codepen.io/ancaspatariu/pen/WpQYOP*/
.carousel {}

ul.slides {
    display: block;
    position: relative;
    min-height: 345px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
}

.slides * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

ul.slides input {
    display: none;
}


.slide-container {
    display: block;
}

.slide-image {
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    top: 0;
    transition: all .7s ease-in-out;
    align-items: center;
    justify-content: center;
}

.carousel-controls {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    font-size: 100px;
    line-height: 345px;
    color: #fff;
}

.carousel-controls label {
    display: none;
    position: absolute;
    padding: 0 20px;
    opacity: 0;
    transition: opacity .2s;
    cursor: pointer;
}

.slide-image:hover + .carousel-controls label {
    opacity: 0.5;
}

.carousel-controls label:hover {
    opacity: 1;
}

.carousel-controls .prev-slide {
    width: 49%;
    text-align: left;
    left: 0;
}

.carousel-controls .next-slide {
    width: 49%;
    text-align: right;
    right: 0;
}


input:checked + .slide-container .slide-image {
    opacity: 1;
    transform: scale(1);
    transition: opacity 1s ease-in-out;
}

input:checked + .slide-container .carousel-controls label {
    display: block;
}


input:checked + .slide-container .nav label {
    display: block;
}