html
{
    font-family: 'minecraftmedium';
    scrollbar-gutter: stable;
    overflow-x: hidden;
}

@font-face {
    font-family: 'minecraftmedium';
    src: url('../resources/font/minecraft-webfont.woff2') format('woff2'),
    url('../resources/font/minecraft-webfont.woff') format('woff');
    font-weight: auto;

}

button {
    cursor: pointer;
    font-family : inherit;
    font-size: 1em;
    background-color: white;
    border: none;
    padding: 6px 12px;
}

.navbar button
{
    color: white;
    width: 120px;
    text-align: center;
    font-size: 22px;
    background-color: rgba(0,0,0,0.0);
}

.navbar button:hover
{
    color: white;
    opacity:0.8;
    background-color: rgba(0,0,0,0.0);
    box-shadow: inset 0 -5px 0 0 #FFFFFF; 
}

button:hover
{
    background-color: #4c578a;
    color :#141829;
}



.bar
{
    font-size: 16px;
    width:50%;
    margin: 0 auto;
}

.traits-grid button
{
    margin: auto 8px;
}

body{

    background-color: #15151a;
}
.main{
    text-align: center;
    max-height:135vh;
}
.bg2
{
    z-index: -10;
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto;
    width:100%;
    margin-top: 0;
    max-height:40vh;
    min-height: 40vh;
    object-fit: cover;
}

.bg
{
    z-index: -10;
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto;
    width:100%;
    margin-top: 0;
    max-height:100vh;
    min-height: 100vh;
    object-fit: cover;
}


#logo
{
    position: absolute; 
    top: 20vh;
    height: 40vh;
    opacity: 0.9;
    transform: translateX(-50%);
}

#logo2
{
    top: 5vh;
    height: 15vh;
    opacity: 0.9;
}



.chars
{
    z-index:1;
    position:absolute;
    height:40vh;
    top:60vh;
    margin: 0 auto;
    transform: translateX(-50%);

}

#cover
{
    color: white;
    z-index:2;
    width:100vw;
    text-align: center;

}

#cover img
{
    top: 100vh;
    -webkit-user-select: none; /* Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
pointer-events: none;
    position: absolute;
    z-index:2;
    width:100%;
    height: 33vh;
    left:0px;
}


#cover h1
{
    width:100%;
    padding-bottom:32px;
    top: 103vh;
    position: absolute;
    z-index:3;
}
#cover p
{
    top: 105vh;
    font-size: 22px;
    padding-top:6vh;
    position: absolute;
    z-index:3;
    width:100%;
    color: white;
}

#cover button
{
    font-size: 26px;
    margin-top:5vh;
    padding: 8px 16px;
}

.grid-container
{
    justify-content: center;
    text-align: right;
    margin : 0 5%;
    min-height: 200vh;
}
.grid{
    margin: 0 auto;
    height:auto;

}
.grid:after {
    content: '';
    display: block;
    clear: both;
}

.grid-item {
    cursor: pointer;
    float: left;
    border-radius: 10px;
    margin: 8px;
    width: 264px;
    height: 312px;
}

.grid-item > button
{
    background-color: white;
    padding: 3px;
}

.grid-item > button:hover 
{
    background-color: rgba(0,0,0,0.4);
    color: white;
}

.grid-item img{
    width: 264px;
    height: 312px;
    image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.grid-item:hover
{
    opacity: 80%;
}

.big-picture
{
    width: 440px;
    height: 520px;
    image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.menu
{
    color: #383838;
    cursor:pointer;
    font-size: 45px;
    left: 95%;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
}

.options
{
    font-size: 14px;
}

#modal
{
    z-index: 9999;
    scrollbar-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    overflow: auto;
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    text-align: center;
}

#modal-content
{
    width: 880px;
    height: 520px;
    margin: 2% auto;
    padding:0px 0px 0px 0px;
    background-color: #30303b;
    border-radius: 0px;
    border: solid black 3px;
    color: white;
}

p {
    margin-bottom: 5px; /* between paragraphs */
}

.bar
{
    text-align: center;
    height: 5vh;
    padding: 16px 16px 0px 16px;
}

.bar p
{
    font-size: 20px;
    color: white;
}

#img
{
    left: 0px;
    width:440px;
}


.traits-grid{
    margin: 0 auto;
    padding: 6px;

}
.traits-grid:after {
    content: '';
    clear: both;
}

.traits-grid-item {
    width:100%;
    padding-bottom: 0px;
    border-radius: 0px;
    margin: 4px 4px 0px 4px;
    height: auto;
    clear: both;
}

.parent
{
    text-align: center;
}

.child-left
{
    display:inline-block;
    vertical-align: top;
    margin: auto 0px;
    width: 440px;
}

.child-right
{
    display:inline-block;
    vertical-align: top;
    margin: 32px auto auto auto;
    width: 428px
}

.traits-grid-item:after
{
    clear: both;
}

.alignleft {
    float: left;
}
.alignright {
    float: right;

}


#name
{
    font-size: 22px;
    padding: 6px 0;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
.bar-item img
{
    /*max-height: 120px*/
}

.container {
    position: relative;
    text-align: center;
    color: white;
}

/* Top left text */
.container .top-left {
    background-color: rgba(0,0,0,0.4);
    padding: 0px 4px;
    position: absolute;
    top: 8px;
    left: 8px;
}

/* Top right text */
.container .top-right {
    background-color: rgba(0,0,0,0.4);
    padding: 0px 4px;
    position: absolute;
    bottom: 8px;
    right: 8px;
}

.container .bottom-left {
    background-color: white;
    padding: 0px 4px;
    position: absolute;
    bottom: 8px;
    left: 8px;
}

.small
{
    display:none;
}

.box
{
    
    margin: 0 auto;
    width:65%;
    display:flex;
}

.box-item
{
    flex: 1;
    text-align: center;
    
}

.box-item ul
{
    display: inline-block;
    margin:0 auto;
    text-align:left;
}

h2
{
    font-size: 28px;
}

li {
    padding: 6px 0px;
    font-size: 25px;
    list-style-type: none; 
 }

 #about
 {
    margin-top: 122vh;
    background-color:#373d42;
    color:white; width:100vw;
    margin-left: -8px;
    text-align:center;
    padding: 24px 0px;
 }

 @media screen and (max-width: 1920px)
 {
    #cover img
{
    top: 100vh;
    -webkit-user-select: none; /* Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
pointer-events: none;
    position: absolute;
    z-index:2;
    width:100%;
    height: 35vh;
    left:0px;
}

 }

@media screen and (max-width: 1420px) {
    .big
    {
        display:none;
    }
    .small
    {
        display:block;
    }
    #logo
    {
        top: 30vh;
        height: 30vh;
        opacity: 0.9;
    }
    #chars
    {
        height:30vh;
        top:70vh;
    }
    .bar{
        padding-bottom: 0px
    }
    .grid-item {
        width: 176px;
        height: 208px;
    }
    .grid-item img {
        width: 176px;
        height: 208px;
    }
}

@media screen and (max-width: 1150px) {
    #logo
    {
        top: 40vh;
        height: 20vh;
        opacity: 0.9;
    }
    #chars
    {
        height:20vh;
        top:80vh;
    }
}

@media screen and (max-width: 900px) {
    .box
    {
        
        margin: 0 auto;
        width:90%;
        display:flex;
    }
    .bottom-left
    {
        left:6px;
    }

    .child-right
    {
        margin-top: 8px;
    }
    #modal-content
    {
        width: 440px;
        height: auto;
    }
    #img
    {
        left: 0px;
        width:440px;
    }

    .bar{
        padding-bottom: 16px;
    }
    .grid-item {
        width: 132px;
        height: 156px;
    }
    .grid-item img {
        width: 132px;
        height: 156px;
    }
    .bar-item img
    {
        max-height: 100px;
    }

    .bar p
    {
        font-size: 19px;
    }
}

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

    .box-item ul li
    {
        
        font-size: 20px;
    }

    #cover img
    {
        
        height: 45vh;
        left:0px;
    }

    #about
    {
    margin-top: 137vh;
    background-color:#373d42;
    color:white; width:100vw;
    margin-left: -8px;
    text-align:center;
    padding: 24px 0px;
    }


    #logo2
    {
        top: 5vh;
        height: 12vh;
        opacity: 0.9;
    }


    #logo
    {
        top: 40vh;
        height: 15vh;
        opacity: 0.9;
    }

    .bar{
        padding-top:5vh;
        padding-bottom: 16px;
    }
    .grid-item {
        width: 132px;
        height: 156px;
        margin: 2px;
    }
    .grid-item img {
        width: 132px;
        height: 156px;
    }

    .bar-item
    {

    }
    .bar-item img
    {
        max-height: 90px;
    }

    .bar
    {
        font-size: 17px;
        width:75%;
        margin: 0 auto;
    }

    #modal-content
    {
        font-size: 19px;
        width: 80%;
        margin: 2% auto;
        padding:0px 0px 8px 0px;
        background-color: #30303b;
        border-radius: 0px;
        color: white;
    }

    .child-left
    {
        width:100%
    }

    .child-right
    {
        width:80%
    }

    .traits-grid
    {
        font-size: 12px;
    }

    .big-picture
    {
        width:100%;
        height: auto;
    }
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

input[type='number']{
    width: 80%;
    height: 25px;
}

.search-bar
{
    width: 80%;
    margin: 70vh auto 32px auto;
    color: white;
}

.search-bar2
{
    width: 100%;
    margin: 20vh auto 32px auto;
    color: white;
    text-align: center;
}

.search-bar2 input[type="number"]
{
    width:50%
}

.search-bar2 .wrapper
{
    text-align: center;
}

.search-bar2 p
{
    text-align:center;
}

.search-bar2 h1
{
    color: white;
    width:100%;
    padding-bottom:32px;
    top: 103vh;
    z-index:3;
}

.nav-pages
{
    text-align: center;
    margin: 32px auto 32px auto;
    color: white;
}

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

    #cover p
    {
        font-size: 18px;
    }
    
    #about
    {
        
        margin-top: 140vh;
    }

    .box
    {
        width:100%;
        margin-left:-8px;
    }

    .box-item h2
    {
        font-size: 22px;
    }

    .box-item ul li
    {
        font-size: 16px;
    }


    #cover p
{
    margin-left: 5%;
    width:90%;
}

    .search-bar2
    {
        text-align: center;
    }
    .search-bar2 button{
        margin-top:8px
    }
    #logo2
    {
        top: 10vh;
    }
    #modal-content
    {
        font-size: 19px;
        width: 90%;
        margin: 2% auto;
        padding:0px 0px 8px 0px;
        background-color: #30303b;
        border-radius: 0px;
        color: white;
    }

    .child-right
    {
        width: 90%
    }
    .child-left
    {
        width:90%
    }
    .bar-item img
    {
        width: 176px;
    }

    .bar
    {
        font-size: 17px;
        width:85%;
        margin: 0 auto;
    }


    .grid-item {
        width: 132px;
        height: 156px;
        margin: 2px;
    }
    .grid-item img {
        width: 132px;
        height: 156px;
    }
    .bar
    {
        padding: 16px 16px 16px 16px;
    }
    .bar-item img
    {
        max-height: 90px;
    }

    .bar p
    {
        font-size: 17px;
    }

    #modal-content
    {
        font-size: 16px;
        width: 80%;
        margin: 2% auto;
        padding:0px 0px 8px 0px;
        background-color: #30303b;
        border-radius: 2px;
        color: white;
    }

    .traits-grid
    {
        font-size: 12px;
    }

    .big-picture
    {
        width:100%;
        height: auto;
    }
}