/* ========== Browser Reset ========== */

html, body, div, span, applet, object, iframe,
h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* Above code is from here, by user shenole latimer: https://stackoverflow.com/questions/44186354/div-not-extending-to-top-of-body */

/* ========================== All ==========================*/

html{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 0.95em;
}

h2{
    font-size: 1.6em;
}

h3{
    font-size: 1.2em;

}

hr{
    width: 100%;
    height: 4px;
    background-color: white;
}

p{
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}

#allContent{
    display: flex;
    flex-direction: column;

    overflow-x: hidden;
    overflow-y: hidden;

    height: 100vh;
}

.headButt{
    width: 100%;
    margin: 0;
    height: 5%;

    background-color: grey;
}

.dropdownArrow{
    height: 100%;
    margin-left: auto;
}

.buttons{
    padding: 1%;
    width: 33%;
    text-align: center;
    vertical-align: middle;

    background-color: grey;
}

/* ========== All content ========== */

@media screen and (max-width: 500px){
    .showProf{
        width: 15%;
        float:left;
        margin: 0;
    }
    #pfp{
        width:90%;
        margin: 3% 5% 4% 5%;
    }
    #profile{
        width: 100%;
        padding: 2%;

        display: none;
        flex-direction: column;
        flex-wrap: nowrap;

        overflow-y: auto;
        overflow-x: hidden;

        background-color: lightgrey;
    }
    #bio{
        width: 100%;

        background-color: white;

        overflow-y: auto;
        overflow-x: hidden;
    }
}

@media screen and (min-width: 501px){
    .showProf{
        display: none;
    }
    #pfp{
        width:75%;
        margin: 0 auto 4% auto;
    }
    #profile{
        width: 30%;
        padding: 2%;

        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;

        overflow-y: auto;
        overflow-x: hidden;

        background-color: lightgrey;
    }
    #bio{
        width: 70%;

        background-color: white;

        overflow-y: auto;
        overflow-x: hidden;
    }
}

@media screen and (min-width: 1080px){
    #allContent{
        width: 85vw;
        margin: auto;
    }
    #profile{
        width: 25%;
    }
    #bio{
        width: 75%;
    }
}



#content{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    height: 95vh;

    gap: 0;
    margin: 0;
}

#family, #friends, #enemies{
    display: none;
}

.shipButton{
    height: 3vh;
    width: 97%;
    display: flex;
    margin: 2% auto 2% auto;

    text-align: left;
    padding: 2%;

    background-color: grey;
}

.shipSection{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    gap: 2%;
}

.shipProf{
    width: 45%;
    text-align: center;
    padding: 1%;

    font-size: 0.8em;
}

.shipImg{
    width: 100%;
    margin: 0;
}

#biography, #gallery, #beings, #locations, #characters{
    display: none;
}

.gallImgCont{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    align-content: center;
    gap: 1%;
}

.gallImg{
    min-width: 10%;
    max-width: 45%;

    margin: 1% auto 1% auto;
}
.imgFit{
    min-height: 100px;
    max-height: 350px;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto 0 auto;
}

/* ========================== Character List  ========================== */

#head{
    background-color: lightgrey;
}

#showWhat{
    padding: 2%;
}

#charList{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1%;

    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 1%;

    margin: auto auto 2% auto;
}

.char{
    max-width: 25%;
    margin: 1% auto 1% auto;

    background-color: pink;

    padding: 2%;

    text-align: center;
}

.char:hover{
    background-color: yellow;
}

.gafg{
    border: 3px solid blue;
}

.fodg{
    border: 3px solid purple;
}

.laser{
    border: 3px solid red;
}