/*this will handle the header*/
.responsive-nav{
    box-sizing: border-box;
    position: sticky;
    top: 0%;
    background-color: rgb(101, 101, 101);
    justify-self: center;
    padding-top: 15px;
    padding-left: 5%;
    padding-bottom: 15px;
    max-height: fit-content;
    width: 105%;
    z-index: 1;
    transition: ease-in-out 1s;
}
.responsive-nav .nav-items {
            display: none;
            list-style: none;
}
.responsive-nav .hamburger {
            display: block;
            cursor: pointer;
        }
@media screen and (min-width: 800px) {
            .responsive-nav .nav-items {
                display:flex;  
                align-self: center;
                justify-self: left;
            }
            li{
                display:block;
                margin-right: 5%;
                margin-top: 0%;
            }
            .responsive-nav .hamburger {
                display: none;
            }
            .responsive-nav{
                height: 100px;
                box-sizing: border-box;
            }
        }



/* fonts */
p{
    font-family: "komet", sans-serif;
    font-weight: 400;
    font-style: normal;
}

li{
    font-family: "strelka", sans-serif;
    font-weight: 800;
    font-style:normal;
    background-color: rgb(255, 255, 255);
    text-align: center;
    padding: 5px;
    border-radius: 15px;
    border: solid black 5px;
    box-sizing: border-box;
    width: fit-content;
    min-width: 100px;
    margin-top: 2.5%;
    font-size: large;
}

/* misc */
h2{
    color: white;
}

*{
    transition: ease-in-out;
}

/*the layout of the sinner cards on the page*/
.sinner_body{
    background-color: rgb(0, 0, 0);
}

.sinner_main{
        justify-items: center;
        background-color: rgb(0, 0, 0);
        display: grid;
        grid-template-columns: 1fr;
        padding: 0px;
        margin: 0px;
        border: 0px;
}
@media screen and (min-width: 800px){
    .sinner_main{
        justify-items: center;
        background-color: black;
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 0px;
        margin: 0px;
        border: 0px;
    }
}
@media screen and (min-width: 1550px){
    .sinner_main{
        justify-items: center;
        background-color: rgb(0, 0, 0);
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        padding: 0px;
        margin: 0px;
        border: 0px;
    }
}

/*setting up the sinner info cards*/
.sinner_info{
    position: relative;
    background-color: rgb(43, 43, 43);
    margin: 5px;
    padding: 1%;
    min-width: 300px;
    max-width: 500px;
    display: grid;
    grid-template-rows: 0.1fr 0.1fr 0.5fr 0.1fr;
    grid-template-areas: 
    "sinner_title"
    "sinner_litref"
    "sinner_portrait"
    "sinner_desc";
    box-sizing: border-box;
    justify-items: center;
    border: solid black 5px;
    border-radius: 50px;
}
.sinner_name{
    padding: 5%;
    justify-self: center;
    background-color: white;
    text-align: center;
    box-sizing: border-box;
    height: 90%;
    width: fit-content;
    border: solid black 5px;
    border-radius: 15px;
}
.sinner_litref{
    padding: 5%;
    background-color: white;
    justify-self: center;
    text-align: center;
    box-sizing: border-box;
    height: fit-content;
    min-width: 80%; 
    font-size: x-large;
    line-height: 1.2em;
    border: solid black 5px;
    border-radius: 15px;
}
.sinner_portrait{
    width: 100%;
    justify-self: center;
    display: flex;
    max-width: 450px;
    position: relative;
    border-radius: 15px;
}
.sinner_desc{
    background-color: white;
    padding: 5%;
    border-radius: 25px;
    border-color: black;
    border: solid black 5px;
    max-height: fit-content;
    margin-left: 10px;
    margin-right: 10px;
    font-size: x-large;
    line-height: 1.5em;
}
@media screen and (min-width: 800px){
.sinner_litref{
    font-size: large;
    line-height: 1.2em;
    }
.sinner_desc{
    background-color: white;
    padding: 5%;
    border-radius: 25px;
    border-color: black;
    border: solid black 5px;
    max-height: fit-content;
    margin-left: 10px;
    margin-right: 10px;
    font-size: larger;
    line-height: 1.2em;
}
}
@media screen and (min-width: 1550px){
.sinner_desc{
    background-color: white;
    padding: 5%;
    border-radius: 25px;
    border-color: black;
    border: solid black 5px;
    max-height: fit-content;
    margin-left: 15px;
    margin-right: 15px;
    font-size:large;
}
}


/*setting up the Enemy info cards*/
.enemy_body{
    justify-self: center;
    background-color: black;
}

.enemy_main{
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr;
    background-color: rgb(0, 0, 0);
    justify-items: left;
    max-width: 100%;
    justify-self: center;
}
.enemy_info{
    box-sizing: border-box;
    width: 100%;
    border: solid rgb(0, 0, 0) 5px;
    padding: 15px;
    padding-bottom: 30px;
   margin-bottom: 50px;
   border-radius: 50px;
}
.enemy_name{
    box-sizing: border-box;
    background-color: white;
    max-width: fit-content;
    justify-self: center;
    text-align: center;
    padding: 10px;
    border-radius: 15px;
    border: black 5px solid;
}
.enemy_litref{
    background-color: white;
    max-width: 90%;
    justify-self: center;
    text-align: center;
    border-radius: 15px;
    border: black 3.5px solid;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
}
.enemy_portrait{
    display:block;
    width: 100%;
    align-self: center;
    justify-self: center;
    max-width: 300px;
    padding: 5px;
}
@media screen and (min-width: 800px){
.enemy_main{
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: rgb(0, 0, 0);
    justify-items: left;
    max-width: 100%;
    justify-self: left;
}
h1{
    font-size: 2em;
}
h3{
    font-size: 1.5em;
    line-height: 1.1em;
}
p{
    font-size: 1.15em;
    line-height: 1.5em;
}
.enemy_info{
    width: 100%;
   
}
.enemy_name{
    background-color: white;
    max-width: fit-content;
    justify-self: center;
    text-align: center;
}
.enemy_litref{
    background-color: white;
    max-width: fit-content;
    justify-self: center;
    text-align: center;
}
.enemy_portrait{
    display: block;
    width: 100%;
    align-self: center;
    justify-self: center;
    max-width: 300px;
}
}
@media screen and (min-width: 1550px){
.enemy_main{
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background-color: rgb(0, 0, 0);
    justify-items: left;
    max-width: 100%;
    justify-self: left;
}
h1{
    font-size: 3em;
}
h3{
    font-size: 1.5em;
        line-height: 1.5em;
}
.enemy_info{
    width: 100%;
   
}
.enemy_name{
    background-color: white;
    max-width: fit-content;
    justify-self: center;
    text-align: center;
}
.enemy_litref{
    background-color: white;
    max-width: fit-content;
    justify-self: center;
    text-align: center;
}
.enemy_portrait{
    display: block;
    width: 100%;
    align-self: center;
    justify-self: center;
    max-width: 300px;
}}

.song_title{
    justify-self: center;
    background-color: white;
    border-radius: 15px;
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    bottom: 10px;
}
audio.audioControl {
    display: block;
	width: 90%; 
    justify-self: center;
}
/* specific enemy settings */

.kromer{
    background-color: rgb(211, 211, 206);
}
.dongrang{
    background-color: rgb(33, 34, 32);
}
.ahab{
    background-color: rgb(78, 106, 36);
}
.erlking{
    background-color: rgb(60, 22, 107);
}
.dadquixote{
    background-color: rgb(198, 28, 28);
}
.jiamu{
    background-color: rgb(176, 173, 169);
}


@media screen and (min-width: 800px){
.kromer{
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: overlay;
    background-image:url(Assets/Battle_Unending_Hill_of_Corpses_3_BG.png);
    background-position: center;
   
}
.dongrang{
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: overlay;
    background-image:url(Assets/Battle_Dongrang_Effloresced_E.G.O_Farmwatch_BG.png);
    background-position: center;
}
.ahab{
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: overlay;
    background-image:url(Assets/Battle_The_Pallid_Whales_Heart_2_BG.png);
    background-position: center;
}
.erlking{
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: overlay;
    background-image:url(Assets/Battle_Wuthering_Heights_Rooftop_BG.png);
    background-position: center;
}
.dadquixote{
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: overlay;
    background-image:url(Assets/Battle_La_Manchalands_Don_Quixote_Duel_BG.png);
    background-position: center;
}
.jiamu{
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: overlay;
    background-image:url(Assets/Battle_Tiekan_Temple_2_BG.png);
    background-position: center;
}
.tall{
    max-width: 200px;
}
.dontall{
    max-width: 200px;
}
}
@media screen and (min-width: 1550px){
    .bittall{
        max-width: 35%;
    }
    .tall{
        max-width: 40%;
    }
    .small{
        max-width: 65%;
    }
    .littletall{
        max-width: 45%;
    }
}



/*sins time*/
.sins_whole{
    background-color: rgb(0, 0, 0);
    color: rgb(0, 0, 0);
}

.sins_intro{
    background-color: rgba(255, 255, 255, 0.75);
    max-width: 80%;
    justify-self: center;
    justify-items: center;
    padding: 10px;
    padding-left: 25px;
    padding-right: 25px;
    border-radius: 5px;
    border: solid white 2.5px;
}

.sins_main{
    padding: 10px;
    justify-content: center;
    color: black;
}

.wrath{
    box-sizing: border-box;
    margin: 5px;
    margin-bottom: 10px;
    padding-left: 15px;
    grid-area: wrath;
    border: red solid;
    background-color: rgba(255, 0, 0, 0.5);
    border-radius: 1%;
}
.lust{
    box-sizing: border-box;
    margin: 5px;
    margin-bottom: 10px;
    padding-left: 15px;
    grid-area: lust;
    border: orange solid;
    background-color: rgba(255, 166, 0, 0.5);
    border-radius: 1%;
}
.sloth{
    box-sizing: border-box;
    margin: 5px;
    margin-bottom: 10px;
    padding-left: 15px;
    grid-area: sloth;
    border: yellow solid;
    background-color: rgba(255, 255, 0, 0.5);
    border-radius: 1%;
}
.gluttony{
    box-sizing: border-box;
    margin: 5px;
    margin-bottom: 10px;
    padding-left: 15px;
    grid-area: gluttony;
    border: rgb(51, 255, 0) solid;
    background-color: rgba(51, 255, 0, 0.5);
    border-radius: 1%;
}
.gloom{
    box-sizing: border-box;
    margin: 5px;
    margin-bottom: 10px;
    padding-left: 15px;
    grid-area: gloom;
    border: rgb(0, 204, 255) solid;
    background-color: rgba(0, 204, 255, 0.5);
    border-radius: 1%;
}
.pride{
    box-sizing: border-box;
    margin: 5px;
    margin-bottom: 10px;
    padding-left: 15px;
    grid-area: pride;
    border: rgb(54, 54, 255) solid;
    background-color: rgba(54, 54, 255, 0.5);
    border-radius: 1%;
}
.envy{
    box-sizing: border-box;
    margin: 5px;
    padding-left: 15px;
    grid-area: envy;
    border: rgb(234, 0, 255) solid;
    background-color: rgba(234, 0, 255, 0.5);
    border-radius: 1%;
}