/** Note that !important tags are used extensively to override the Bootstrap framework's original settings. The em units are also
used to allow for responsive sizing.**/ 

@font-face {
    font-family: 'IBM Plex Mono';
    src: URL('font/IBMPlexMono-Regular.ttf') format('truetype');
  }

body{
    overflow-y: scroll;
    /*Hide the horizontal scroll since some elements overflow by a few pixels.*/
    overflow-x: hidden;
}

nav{
    display: flex;
    justify-content: space-around;
    width: 40%;
}

h2{
    color:white;
    margin-top: 2% !important;
}
.directory{
    background-color:#c60055 !important;
}
.directory a{
    color:#D1EBAD !important;
}
#navContainer{
    background-color: #283593aa;
    font-family: 'IBM Plex Mono', monospace, sans-serif;
    font-size:larger;
}
#logo{
    color:azure;
    font-size: smaller;
    display: flex;
    align-items: center;
    width: 40%;
}
#cover{
    max-width: 100%;
    height:auto;
}
.card{
    margin-top: 10px !important;
    margin-left:0.5em;
}
.weapon img{
        width: 100%;
        max-width: 315px;
        height:160px;
        margin-top: 1%;
}

.shield img{
    width: 40%;
    height: auto;
    text-align: center;
}

.boss img{
    width: auto;
    height:220px;
}

.showcase img{
    width: 100%;
    max-width: 630px;
}
.copyrightText{
    text-align: center;
}
.desc{
    margin-top:1em;
    text-align:center;
}
.weapon, .showcase, .boss, .info{
    background-color: #574b90 !important;
    color:white !important;
}

.boss, .weapon{
    height: 40em !important;
}
.info{
    height: 20em !important;
}

.btn-group-toggle{
    margin-left: 10%;
}
.weapon-header{
    font-size:x-large;
}
.card-deck{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.vidCard{
    width:auto !important;
    height: 25em !important;
}
iframe {
    /* override other styles to make responsive */
    width: 100%    !important;
    height: 100%   !important;
  }
.bx-wrapper{
box-shadow: none !important;
border: none !important;
background: #574b90 !important;
}

#spoiler{
    display: none;
}