/* CSS stylesheet */
body {
    position: relative;
    margin: 0;
    background-image: url('blackstone2.png');
    background-repeat: repeat;
    background-attachment: fixed;
    background-size: 20px;
}
header {
    z-index: 999;
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    width: 100%;
    position: relative;
    margin: 0;
    top: 0;
}
#bannernav {
    height: 159px;
}
#banner {
    margin: 0;
    width: 100%;
    height: 120px;
    background-image: url('longbanner.png');
    background-repeat: repeat;
    background-attachment: fixed;
    background-size: 220vh;
}
#bannernav img {
    height: 100%;
    float: right;
}
#banner img {
    margin-left: 1vw;
    height: 100%;
    float: left;
}
#navbar img {
    margin-left: 1vw;
    margin-top: 0.5vh;
    height: 80%;
    float: left;
}
#navbar {
    height: 35px;
    min-height: 25px;
    background-color: #e7e7a2;
    margin: 0;
    border-top: black solid 4px;
    border-bottom: black solid 4px;
}
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
#navbar #menubutton {
    display: inline;
}
#navbar #menubutton img {
    height: 0%;
}
nav {
    margin: 0;
    font-size: 25px;
    font-family: 'Black Ops One', cursive;
}
nav ul {
    margin: 0;
    list-style: none;
    text-align: left;
    margin: 0;
    padding: 0;
    padding-top: 0.5vh;
}
nav ul li {
    display: inline;
    padding-left: 1.5vw;
    padding-right: 5vw;
}
main {
    position: relative;
    margin-top: 0px;
    margin-left: 0vw;
    margin-right: 0vw;
    margin-bottom: 0;
    border-left: 4px solid black;
    border-right: 4px solid black;
}
main p {
    padding: 0;
    margin: 0;
}
a {
    color: rgb(0, 0, 0);
    text-decoration: none;
}
a:hover {
    color: red;
}
footer {
    margin: 0;
    padding: 0;
    width: 100%;
    background-image: url('blackstone2.png');
    background-repeat: repeat;
    background-attachment: scroll;
    background-size: 70px;
    border-top: 4px solid black;
}
.icons {
    display: flex;
    display: inline;
    height: 100%;
    width: 100%;
    margin-left: 34%;
}
footer img {
    width: 5%;
    height: auto;
    margin: 1%;
    border: 4px solid white;
    border-radius: 20px;
    margin-bottom: 0;
}
footer p {
    color: white;
    font-size: 16px;
    text-align: center;
}
#topbox {
    position: relative;
    padding-top: 10px;
    padding-left: 2vw;
    padding-right: 2vw;
    margin-bottom: 0;
    border-top: 0px;
    height: 400px;
    background-image: url('lava2.png');
    background-repeat: repeat-x;
    background-attachment: unset;
    background-size: 420px;
}
#topbox h1 {
    margin: 0;
    padding: 5px;
    padding-top: 10px;
    font-family: 'Black Ops One', cursive;
    color: rgb(255, 255, 255);
    font-size: 70px;
    text-align: center;
    font-weight: normal;
    line-height: 80%;
  }
#topbox h2 {
    padding: 5px;
    margin: 10px 5vw 0px 5vw;
    font-family: 'Share Tech Mono', monospace;
    color: rgb(255, 255, 255);
    font-size: 20px;
    text-align: justify;
    text-align-last: center;
    font-weight: normal;
    line-height: 100%;
}

#box2 {
    padding-left: 2vw;
    padding-right: 2vw;
    padding-bottom: 50px;
    height: auto;
    background-image: url('backtile.png');
    background-repeat: repeat;
    background-attachment: scroll;
    background-size: 100px;
}
#box2main {
    margin: 0;
    padding-left: 2vw;
    padding-right: 2vw;
    padding-bottom: 50px;
    height: auto;
    background-image: url('backtile.png');
    background-repeat: repeat;
    background-attachment: scroll;
    background-size: 100px;
    position: absolute;
}
#credits {
    display: flex;
    text-align: center;
    font-family: 'Share Tech Mono', monospace;
    font-size: 20px;
    margin-bottom: 100px;
}
#credits p {
    flex-direction: row;
    display: inline;
}
#imgcredits {
    position: absolute;
    bottom: 0;
    display: flex;
    text-align: center;
    font-size: 20px;

}
#credits h2 {
    padding: 0;
    margin: 0;
    font-family: 'Black Ops One', cursive;
    color: rgb(0, 0, 0);
    font-weight: normal;
}
#char1 {
    border: 4px solid black;
    width: 30%;
    margin-left: 2.5%;
    margin-right: 0%;
    background-color: #e7e7a2;
}
#char2 {
    border: 4px solid black;
    width: 30%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    background-color: #e7e7a2;
}
#char3 {
    border: 4px solid black;
    width: 30%;
    margin-left: 0%;
    margin-right: 2.5%;
    background-color: #e7e7a2;
}
#imgcredits img {
    height: 200px;
}
#ichar1 {
    width: 33vw;
}
#ichar2 {
    width: 28vw;
}
#ichar3 {
    width: 33vw;
}

#twitter {
    width: 70%;
    margin-left: 2.5%;
    border: 4px solid black;
    margin-bottom: 0px;
}

.articlebox {
    width: 95%;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
}
.articleimg img {
    height: 250px;
    float: right;
    border: 4px solid black;
    border-radius: 20px;
    margin-left: 15px;
    margin-top: 20px;
}
.articleimg img:hover {
    filter: brightness(70%);
}
.articletext p {
    background-color: #e7e7a2;
    padding: 10px;
    color: rgb(0, 0, 0);
    font-family: monospace;
    text-align: justify;
    font-size: 16px;
    border: 4px solid rgb(0, 0, 0);
    border-end-end-radius: 50px;
    margin-right: 15px;
    margin-top: 37px;
}
.articleheading {
    background-color: #e7e7a2;
    position: absolute;
    width: fit-content;
    margin: 0;
    margin-left: 20px;
    padding: 10px;
    padding-top: 3px;
    padding-bottom: 0px;
    font-family: 'Black Ops One', cursive;
    color: rgb(0, 0, 0);
    font-size: 27px;
    text-align: left;
    font-weight: normal;
    border: 4px solid black;
    border-start-start-radius: 20px;
    border-start-end-radius: 20px;
    border-bottom: 0;
}

.charrow {
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
}
.charrow2 {
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
    display: none;
}
.charbox {
    background-color: #e7e7a2;
    width: 21.7%;
    border: 4px solid black;
    margin-left: 2%;
    border-start-start-radius: 20px;
    border-start-end-radius: 20px;
}
.charheading {
    margin: auto;
    text-align: center;
    font-family: 'Black Ops One', cursive;
    color: rgb(0, 0, 0);
    font-size: 20px;
    font-weight: normal;
    padding-top: 5px;
    padding-bottom: 5px;
}
.charbox p {
    color: rgb(0, 0, 0);
    font-family: monospace;
    text-align: left;
    font-size: 16px;
    padding-left: 3.5%;
    padding-right: 3.5%;
    padding-top: 0px;
    padding-bottom: 8px;
    line-height: 15px;
    margin: 0;
}
.charimg {
    width: 90%;
    margin-left: 3.5%;
    margin-bottom: 10px;
    border-radius: 10px;
    border: 4px solid black;
    background-color: #ffffff;
}
#searchbox {
    display: flex;
    font-size: 20px;
    border-radius: 30px;
}
#searchbar {
    padding: 10px;
    font-family: monospace;
    font-size: 25px;
    width: 75%;
    background: #f1f1f1;
    border: 4px solid black;
    border-right: 0px;
}
#searchbutton {
    float: left;
    width: 25%;
    padding: 10px;
    background: #2196F3;
    color: white;
    font-size: 17px;
    cursor: pointer;
    border: none;
    border: 4px solid black;
}
.spacer {
    height: 20px;
}
.gametitle {
    border-start-start-radius: 20px;
    border-start-end-radius: 20px;
    background-color: #e7e7a2;
    width: fit-content;
    margin: 0;
    margin-left: 8%;
    margin-top: 20px;
    text-align: center;
    font-family: 'Black Ops One', cursive;
    color: rgb(0, 0, 0);
    font-size: 25px;
    font-weight: normal;
    padding: 5px 10px;
    border: 4px solid black;
    border-bottom: 0;
}
.gamemargins {
    margin-left: 1%;
    background-color: #e7e7a2;
    border: 4px solid black;
    border-top: 0px solid black;
    padding-top: 10px;
}
.gamebox {
    width: 90%;
    margin: auto;
    
}
.gameimgs {
    padding: 0;
    width: 100%;
    margin: 0;
    border: 4px solid black;
    background-image: url('blackstone2.png');
    background-repeat: repeat;
    background-attachment: scroll;
    background-size: 30px;
    overflow: auto;
    white-space: nowrap;
}
.gameimgs img {
    height: 250px;
    margin: 0;
}
#videoclick:hover {
    filter: brightness(70%);
}
.whatsnew {
    background-color: #c7c764;
    border-radius: 20px;
    color: rgb(0, 0, 0);
    font-family: monospace;
    text-align: left;
    font-size: 16px;
    padding-left: 1%;
    padding-right: 1%;
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 15px;
    margin: 0px 10px;
    width: 50%;
}
.gameinfo {
    color: rgb(0, 0, 0);
    font-family: monospace;
    text-align: left;
    font-size: 16px;
    padding-left: 1%;
    padding-right: 1%;
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 15px;
    margin: 0;
}
#neverwill {
    font-size: 10px;
    font-style: normal;
}
#mobnav {
    display: none;
}


form{
    padding: 0;
    margin: 0px 2%;
    margin-bottom: 20px;
    font-family: monospace;
    border: 4px solid black;
    background-color: #e7e7a2;
    font-size: 16px;
}
#form_name input {
    display: block;
    width: 100%;
    font-family: monospace;
    font-size: 16px;
    height: 50px;
    border: 0;
    border-bottom: 2px solid black;
    padding-left: 1%;
}
#form_email input {
    display: block;
    width: 100%;
    font-family: monospace;
    font-size: 16px;
    height: 50px;
    border: 0;
    border-bottom: 2px solid black;
    padding-left: 1%;
}
#form_text textarea {
    display: block;
    width: 100%;
    font-family: monospace;
    font-size: 16px;
    padding-top: 15px;
    padding-left: 1%;
    border: 0;
}
#form_submit {
    width: 20%;
}
#form_submit input {
    display: inline;
    float: right;
    width: 100%;
    height: 100%;
    border: 0;
    font-family: monospace;
    font-size: 20px;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
}
#nemail {
    display: inline;
    width: 80%;
}
#topbit {
    display: flex;
}

#allchar {
    display: flex;
    flex-wrap: wrap;
}
#charic {
    border: 4px solid black;
    padding: 0px;
    width: 23%;
    background-color: #e2e063;
    background-image: linear-gradient(rgb(194, 223, 29),rgb(250, 248, 145));
    border-radius: 10px;
    padding-bottom: 5px;
    margin: 0.5%;
    flex: 1 0 20%;
    max-width: 23.35%;
}
#characterimg {
    border: 2px solid black;
    width: 94%;
    display: block;
    margin: auto;
    margin-bottom: 5px;
    background-color: white;
}
#charicname {
    background-color: #ffffff;
    border: 2px solid black;
    color: #000000;
    width: 94%;
    margin: auto;
    text-align: center;
    font-family: monospace;
    font-weight: bold;
    font-size: 20px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 5px;
    margin-bottom: 5px;
}
#charic h2 {
    font-family: monospace;
    font-size: 15px;
    padding: 0px;
    color: rgb(0, 0, 0);
    padding: 2px;
    padding-left: 5px;
    padding-right: 5px;
    margin: 0;
    font-weight: normal;
}
#chardebut {
    background-color: rgb(255, 255, 255);
}
#chartrivia {
    background-color: rgb(255, 255, 255);
}
#charcreator {
    background-color: rgb(212, 212, 212);
}
#chargames {
    background-color: rgb(255, 255, 255);
}
#charfamily{
    background-color: rgb(212, 212, 212);
}
#boxx {
    width: 94%;
    margin: auto;
    border: 2px solid rgb(0, 0, 0);
    margin-top: 5px;
    background-color: white;
}
#whiter{
    height: 100%;
    background-color: white;
    position: absolute;
    top: 0;
    left: 0;
}
#filts {
    width: 100%;
    margin: 0px;
    height: 35px;
    display: flex;
    margin-bottom: 0px;
}
section {
    width: 100%;
    margin: 0px;
    height: 15px;
    display: flex;
    background-color: rgb(230, 230, 230);
    color: rgb(0, 0, 0);
    border-bottom: 2px solid black;
}
section h2 {
    width: 25%;
    height: 100%;
    border: 4px solid black;
    border-top: 0px;
    padding-left: 5px;
    font-family: monospace;
    font-size: 12px;
    font-weight: bold;
    margin: 0;
    border-left: 0;
    border-right: 0;
}
#firsth {
    border-left: 4px solid black;
}
#lasth {
    border-right: 4px solid black;
}
#filts select {
    width: 25%;
    height: 100%;
    border: 4px solid black;
    border-right: 2px solid black;
    border-top: 0px;
    padding-left: 5px;
    font-family: monospace;
    font-size: 17px;
    font-weight: bold;
    margin: 0;
    border-left: 0;
}
#filts #family {
    border-left: 4px solid black;
}
#filts #creator {
    border-right: 4px solid black;
}
#nullchars {
    border: 4px solid black;
    margin: auto;
    width: fit-content;
    background-color: yellow;
    font-family: monospace;
    font-weight: bold;
    padding: 5px;
    border-radius: 10px;
    visibility: hidden;
}

#adbox {
    border: 4px solid black;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 200px;
    height: 55vw;
    width: 45vw;
    background-image: url("adbackground.png");
    background-repeat: repeat;
    background-attachment: scroll;
    background-size: 100%
}
#adtitle {
    color: white;
    font-family: monospace;
    font-weight: bolder;
    text-align: center;
    font-size: 3vw;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
}
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: rgb(97, 97, 97);
    width: 30vw;
    height: 30vw;
    border: 4px solid #000000;
    border-style: dashed;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    margin: auto;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
    background-color: rgb(255, 255, 255);
    color: black;
}

/* Style the back side */
.flip-card-back {
    background-color: rgb(0, 0, 0);
    color: white;
    transform: rotateY(180deg);
}
img #adpic {
    height: 100%;
    width: 100%;
}
#advtext {
    margin-top: 40px;
    font-family: monospace;
    font-size: 20px;
}
#advcode {
    margin-top: 40px;
    font-family: monospace;
    font-size: 15px;  
}
#days {
    color: white;
    margin-bottom: 20px;
    text-align: center;
    font-weight: bold;
    font-family: monospace;
    font-size: 2vw;
}
#linker {
    margin-top: 40px;
    width: 50%;
    height: 10%;
    font-size: 20px;
    color: black;
}





@media screen and (max-width : 1000px){

#adbox {
    height: 110vw;
    width: 90vw;
}
#adtitle {
    font-size: 5.5vw;
}
#days {
    font-size: 5vw;
}
#advtext {
    margin-bottom: 10px;
}
#advcode {
    margin-bottom: 10px;
}
#linker {
    font-size: 13px;
    height: 10vw;
}
.flip-card {
    height: 70vw;
    width: 70vw;
}

#charic {
    margin-left: 2%;
    flex: 1 0 50%;
    max-width: 45.5%;
}
#mobnav {
    margin-top: 35px;
    background-color: rgb(56, 56, 56);
    width: 100%;
    border-top: 4px solid black;
    border-bottom: 4px solid black;
    display: none;
}
a {
    color: rgb(255, 255, 255);
    text-decoration: none;
    
}
#mobnav li {
    padding: 10px 2%;
    font-size: 20px;
    font-family: monospace;
    list-style: none;
}


#filts {
    margin: auto;
    width: 94.5%;
    height: 20px;
}
#filts select {
    font-size: 12px;
}
section {
    margin: auto;
    width: 94.5%;
    height: 12px;
}
section h2 {
    font-size: 10px;
}
.gametitle {
    margin: auto;
    margin-top: 20px;
}
.gamebox {
    width: 100%;
}
.gameimgs {
    border-left: 0;
}
.gameimgs img {
    height: 200px;
}
.gamemargins {
    margin-left: 2%;
    margin-right: 2%;
}
.gametitle {
    padding-bottom: 2px;
}
.whatsnew {
    width: fit-content;
    border-radius: 10px;
}
#box2 {
    margin: 0;
    padding: 0;
    padding-bottom: 50px;
}

#navbar #menubutton {
    display: inline;
}
#navbar #menubutton img {
    height: 80%;
}
nav {
    margin: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
#navlinks {
    display: none;
}

main {
    margin-left: 0;
    margin-right: 0;
    border: 0;
}
#topbox {
    margin: 0;
}
#topbox h1 {
    font-size: 45px;
}
#topbox h2 {
    font-size: 18px;
    margin: 0;
}

#ichar1 {
    width: 33vw;
}
#ichar2 {
    width: 30vw;
}
#ichar3 {
    width: 33vw;
}
#imgcredits img {
    height: 150px;
}
#credits {
    margin-bottom: 20px;
}
#credits p {
    font-size: 18px;
}
#credits h2 {
    font-size: 25px;
}

#twitter {
    width: 85%;
    margin: auto;
    margin-top: 50px;
}

.articlebox {
    width: 100%;
    display: inline;
}
.articletext {
    margin-bottom: 20px;
}
.articleimg img {
    width: 100%;
    height: auto;
    float: right;
    border: 0;
    border-top: 4px solid black;
    border-bottom: 4px solid black;
    margin: 0;
    border-radius: 0;
    margin-bottom: 10px;
}
.articletext p {
    font-size: 16px;
    border: 0;
    border-radius: 0;
    margin: 0;
    border-bottom: 4px solid black;
}
.articleheading {
    position: relative;
    margin: auto;
}

.charrow {
    flex-direction: column;
    margin: 0;
}
.charbox {
    width: 90%;
    margin: auto;
    margin-bottom: 20px;
}
.charbox p {
    color: rgb(0, 0, 0);
    font-family: monospace;
    text-align: left;
    font-size: 16px;
    padding-left: 3.5%;
    padding-right: 3.5%;
    padding-top: 0px;
    padding-bottom: 8px;
    line-height: 15px;
    margin: 0;
}
.charimg {
    width: 90%;
    margin-left: 3.5%;
    margin-bottom: 10px;
    border-radius: 10px;
    border: 4px solid black;
}
footer img {
    width: 5%;
    height: auto;
    margin: 1%;
    border: 4px solid white;
    border-radius: 20px;
    margin-bottom: 0;
}
#searchbox {
    margin-left: 10px;
    margin-right: 10px;
}
#searchbar {
    font-size: 20px;
}


}

@media screen and (max-width : 500px){
    .icons {
        margin-left: 20%;
    }
    footer img {
        width: 10%;
        height: auto;
        margin: 1%;
        border: 4px solid white;
        border-radius: 10px;
        margin-bottom: 0;
    }
    #box2 {
        padding: 0;
        padding-bottom: 20px;
    }
    #imgcredits img {
        height: 100px;
    }
    #credits h2 {
        font-size: 20px;
    }
    #credits p {
        font-size: 18px;
    }
    #char1 {
        border: 0;
        border-top: 4px solid black;
        border-bottom: 4px solid black;
        width: 33%;
        margin: 0;
    }
    #char2 {
        border: 4px solid black;
        width: 33%;
        margin: 0;
    }
    #char3 {
        border: 0;
        border-top: 4px solid black;
        border-bottom: 4px solid black;
        width: 33%;
        margin: 0;
    }
    #charic {
        margin-left: 4%;
        flex: 1 0 100%;
        max-width: 90%;
    }
}