/*Importer fonts*/
@import url('https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alkalami&display=swap');

/*Nulstiller alle default browser settings*/
*{
    margin: 0;
    padding: 0;
}
picture{
    display: flex;
    width: 100%;
    max-width: 100%;
    height: 100%;
}
/*Giver alt text farven darkslategray og fonten Lato*/
body {
    background-color: hsla(0, 100%, 97%, 1);
    color:hsl(180, 0%, 15%);
    font-family: 'Lato', sans-serif;
}
span.required{
    color: rgba(165, 19, 19, 1);
    font-weight: bolder;
}
form#a{
    display: flex;
    flex-direction: column;
    align-items: center;
}
form#a *{
    border: none;
}
form#a>div>label{
    display: block;
}
form#a>div{
    display: flex;
    width: 25rem;
    justify-content: space-between;
}
form#a input{
    background-color: hsla(0, 100%, 97%, 1);
}
form#a input[type=text],form#a input[type=email]{
    width: 20rem;
    border: 0.1rem solid hsla(180, 0%, 15%, 1);
}
form#a input[type=number]{
    width: 14rem;
    border: 0.1rem solid hsla(180, 0%, 15%, 1);
}
form#a input[type=submit]{
    padding: 0.2rem 0.3rem;
    color: hsla(0, 100%, 97%, 1);
    border: 2px solid hsla(0, 80%, 50%, 1);
    background-blend-mode: soft-light;
    background-image: url("../img/koeb.jpg");
    background-size: 100% 100%;
    background-color: hsla(0, 80%, 50%, 1);
}
input:checked{
    accent-color: hsla(0, 80%, 50%, 1);
}
form#a textarea{
    width: 20rem;
    height: 10rem;
    resize: none;
    border: 0.1rem dashed hsla(180, 0%, 15%, 1);
}
form#a select{
    width: 10rem;
    border: 0.1rem solid hsla(180, 0%, 15%, 1);
}
form#a input:focus{
    background-color: white;
}
form#a>*{
    margin: 0.2rem 0rem;
}
article#con>*{
    margin: 1rem 0rem;
}
article#con{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}
section#con{
    display: flex;
    justify-content: center;
    align-items: center;
}

div.MobileNav>div{
    display: flex;
    position: sticky;
    background-color: hsl(180, 0%, 15%);
    float: right;
    height: 3rem;
    width: 3rem;
    transition: width 1s, background-color 1s;
    content: url("../img/Mobile-Menu-White.svg");
}
div.MobileNav>div.On{
    display: flex;
    position: sticky;
    float: right;
    height: 3rem;
    z-index: 2;
    width: 100vw;
    content: url("../img/Mobile-Menu-Black.svg");
    background-color: hsla(0, 100%, 97%, 1);
}
nav.Mobile{
    display: none;
  }
div.MobileNav>div.On+nav.Mobile{
    display: flex;
    position: relative;
    z-index: 1;
    background-color: rgba(165, 19, 19, 1);
    background-image: url("../img/nav.jpg");
    height: 3rem;
    width: 100vw;
}
div.MobileNav>div.On+nav.Mobile ul{
    display: flex;
    width: 100%;
    list-style: none;
    justify-content: space-around;
    align-items: center;
}
div.MobileNav>div.On+nav.Mobile ul li a{
    color: hsla(0, 100%, 97%, 1);
    text-decoration: none;
}
div.MobileNav>div.On+nav.Mobile ul li{
    padding: 0.5rem 1%;
    max-width: 15%;
}
div.MobileNav>div.On+nav.Mobile ul li>a{
    font-size: 100%;
}
div.MobileNav>div.On+nav.Mobile ul li.On{
    background-color: hsla(0, 100%, 97%, 0.2);
}
div.MobileNav>div.On+nav.Mobile ul li.On div.dropdown-dropdown-content{
    display: flex;
    flex-direction: column;
}
div.MobileNav>div.On+nav.Mobile ul li div.dropdown-dropdown-content{
    display: none;
    position: absolute;
    left: 0px;
    top: 3rem;
    box-shadow: 0rem 0rem 1.2rem hsla(180, 0%, 15%, 0.5);
}
div.MobileNav>div.On+nav.Mobile ul li div.dropdown-dropdown-content a{
    height: 3rem;
    width: 100vw;
    font-size: 20px;
    color: hsla(180, 0%, 15%, 1);
    background-color: hsla(0, 100%, 97%, 1);
    text-align: center;
    line-height: 3rem;
}
/*Gøre så CTA'en får en farvet baggrund*/
nav.Desktop li.cta a, div.MobileNav li.cta{
    background-blend-mode: soft-light;
    background-image: url("../img/cta.jpg");
    background-size: 100% 100%;
    background-color: hsla(0, 80%, 50%, 1);
}

.label{
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0.5rem 0rem;
}
.tabelContain{
    display: flex;
    flex-direction: column;
    align-items: center;
}

div.coloring>div:nth-child{
    background-color: hsla(0, 100%, 97%, 1);
}
div.coloring>div:nth-child(even) {
    background-color: hsla(0, 100%, 93%, 1);
}
div.coloring{
    border: 0.15rem solid rgba(165, 19, 19, 1);
    padding: 0.1rem 0.1rem;
    border-radius: 0.4rem;
}
div.barbarianLabelTable{
    grid-template-columns: 1fr 3fr 6fr 3fr 3fr;
    grid-template-areas:
    "level pb feat r rd";
}
div.barbarianTable{
    grid-template-columns: 1fr 3fr 6fr 3fr 3fr;
    grid-template-areas:
    "level pb feat r rd";
}
div.clericLabelTable{
    grid-template-columns: 1fr 3fr 6fr 3fr 9fr;
    grid-template-areas:
    "level pb feat ck ss";
}
div.clericTable{
    grid-template-columns: 1fr 3fr 6fr 3fr repeat(9, 1fr);
    grid-template-areas:
    "level pb feat ck s1 s2 s3 s4 s5 s6 s7 s8 s9";
}
div.fighterLabelTable{
    grid-template-columns: 1fr 3fr 6fr;
    grid-template-areas:
    "level pb feat";
}
div.fighterTable{
    grid-template-columns: 1fr 3fr 6fr;
    grid-template-areas:
    "level pb feat";
}
div.sorcererLabelTable{
    grid-template-columns: 1fr repeat(2, 2fr) 6fr 3fr 9fr;
    grid-template-areas:
    "level pb sp feat ck ss";
}
div.sorcererTable{
    grid-template-columns: 1fr repeat(2, 2fr) 6fr 3fr repeat(9, 1fr);
    grid-template-areas:
    "level pb sp feat ck s1 s2 s3 s4 s5 s6 s7 s8 s9";
}
div.spellTable{
    text-align: center;
    grid-template-columns: repeat(3,1fr);
    border: 0.15rem solid rgba(165, 19, 19, 1);
    padding: 0.1rem 0.1rem;
    border-radius: 0.4rem;
}
div.centerSpell{
    margin: 1rem 0rem;
    display: flex;
    justify-content: center;
    width: 100%;
}
div.spellTable>span{
    background-color: hsla(0, 100%, 97%, 1);
}
div.spellTable>span:not(div.spellTable>span:nth-of-type(3n)){
    border-right: 0.15rem solid rgba(165, 19, 19, 1);
}
div.spellTable>span:nth-of-type(6n),div.spellTable>span:nth-of-type(6n-1),div.spellTable>span:nth-of-type(6n-2){
    background-color: hsla(0, 100%, 93%, 1);
}
div.barbarianLabelTable,div.clericLabelTable,div.fighterLabelTable,div.sorcererLabelTable,div.barbarianTable,div.clericTable,div.fighterTable,div.sorcererTable,div.spellTable{
    display: grid;
}
div.barbarianTable,div.clericTable,div.fighterTable,div.sorcererTable,div.spellTable{
    padding: 0.3rem 0rem;
}
div.barbarianTable,div.clericTable,div.fighterTable,div.sorcererTable,div.barbarianLabelTable,div.clericLabelTable,div.fighterLabelTable,div.spellTable,div.sorcererLabelTable,.tabelContain{
    width: 70rem;
}


.level{
    grid-area: level;
}
.pb{
    grid-area: pb;
}
.sp{
    grid-area: sp;
}
.feat{
    grid-area: feat;
}
.ck{
    grid-area: ck;
}
.r{
    grid-area: r;
}
.rd{
    grid-area: rd;
}
.ss{
    grid-area: ss;
    text-align: center;
}
.s1{
    grid-area: s1;
}
.s2{
    grid-area: s2;
}
.s3{
    grid-area: s3;
}
.s4{
    grid-area: s4;
}
.s5{
    grid-area: s5;
}
.s6{
    grid-area: s6;
}
.s7{
    grid-area: s7;
}
.s8{
    grid-area: s8;
}
.s9{
    grid-area: s9;
}

/* -- Shop -- */

main{
    background-color: hsla(0, 100%, 97%, 1);
    display: flex;
    justify-content: center;
    padding: 2rem 0rem;
    width: 100%;
}
div.container{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 1200px;
    height: 100%;
}
div.item{
    display: flex;
    flex-direction: column;
    margin: 1rem 0rem;
    height: 500px;
    width: 350px;
    border-radius: 1rem;
    background-color: hsl(0,0%,80%);
}
div.itemPic{
    flex-grow: 1;
    display: flex;
    align-self: center;
    align-items: center;
}
div.itemInfo{
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    height: 6.5rem;
    background-color: hsla(0,0%,96%,1);
}
span.bold{
    font-weight: bold;
}
div.itemType{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 0.5rem;
    flex-grow: 1;
}
div.itemBuy{
    height: 0.7rem;
    display: flex;
    flex-grow: 1;
}
div.pris{
    text-align: center;
    flex-grow: 1;
}
div.buy{
    display: flex;
    flex-direction: row;
    border: 2px solid hsla(0, 80%, 50%, 1);
    background-blend-mode: soft-light;
    background-image: url("../img/koeb.jpg");
    background-size: 100% 100%;
    background-color: hsla(0, 80%, 50%, 1);
    border-radius: 20rem;
    flex-grow: 4;
    margin-bottom: 0.4rem;
    margin-right: 0.5rem;
}
div.antal{
    display: flex;
    flex-grow: 1;
    width: 20px;
    height: 100%;
    align-self: center;
    align-content: center;
    justify-content: center;
    text-align: center;
}
div.buyButton{
    display: flex;
    color: hsla(0,0%,96%,1);
    border-top-right-radius: 19rem;
    border-bottom-right-radius: 19rem;
    flex-grow: 3;
}
div.buyButtonText{
    display: inline;
    margin: 0 auto;
    font-size: 1rem;
    text-align: center;
    align-self: center;
    flex-shrink: 1;
}
input.antall, input.antalll{
    font-family: 'Alkalami', serif;
    display: inline-block;
    max-width: 100%;
    font-size: 1rem;
    text-align: center;
    border-top-left-radius: 19rem;
    border-bottom-left-radius: 19rem;
    border: none;
}
*:focus{
    outline: none;
}




/*Giver alle Footer baggrunds farve og en højde på 3rem og centre texten og text farve*/
footer{
    background-color: hsla(0, 100%, 27%, 1);
    height: 3rem;
    text-align: center;
    color: hsla(0, 100%, 97%, 1);
}
/*Gemmer Nav barren*/
nav.Desktop{
    display: none;
}
/*Laver Headers om til et flex object*/
header{
    display: flex;
    position: static;
    top: 0;
    left: 0;
    right: 0;
}
/*Laver alle H1 til at være 3rem stor*/
h1{
    font-size: 3rem;
}
/*Laver alle H2 til at være 2rem stor*/
h2{
    font-size: 2rem;
}
/*Laver alle H3 til at være 1,5rem stor*/
h3{
    font-size: 1.5rem;
}
/*Laver alle H4, H5, H6 og P til at være 1,3rem stor*/
h4,h5,h6,p{
    font-size: 1.3rem;
}
/*Laver alle H1,H2,H3,H4,H5,H6 til at være hsla(0, 100%, 27%, 1)*/
h1, h2, h3, h4, h5, h6{
    color: hsla(0, 100%, 27%, 1);
}
/*Laver alle P til at være 2,5rem høj og have 2rem plads mellem noget*/
p{
    line-height: 2.5rem;
    margin-bottom: 2rem;
}
/*Laver alle img der ikke er lige under en header til at have 1rem plads i toppen*/
img:not(header img){
    margin-top: 1rem;
}
/*Laver alle p,h1,h2,h3,h4,h5,h6 og img der ikke er under en header til at have 1rem plads i bunden*/
p,h1,h2,h3,h4,h5,h6,img:not(header img){
    margin-bottom: 1rem;
}
/*For alle img til ikke at blive støre end browserens vindue*/
img{
    max-width: 100%;
}
/*Laver alle img der har klassen "mainPic" til at være helt til venstre*/
img.mainPic{
    margin-left: auto;
    margin-right: auto;
    float: top;
}
/*Laver alle img der ikke er under et a tag under en article med klassen "indexClasses" eller img med klassen "mainPic" Fylde hele breten*/
img:not(article.indexClasses>a>img):not(img.mainPic){
    width: 100%;
}
/*Gøre så class iconerne i bunden er centret i en lodret stilling*/
article.indexClasses{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/*Gøre så alle p,h1,h2,h3,h4,h5,h6 ikke er længere end 1200px centrert og har 2rem plads i toppen*/
p,h1,h2,h3,h4,h5,h6{
    width: 90vw;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 2rem;
}
/*Gøre så alle img under et a tag under en article med klassen "indexClasses" har et rundet ventre oppe og højre bund med 20px*/
article.indexClasses>a>img{
    border-top-left-radius:1.5rem;
    border-bottom-right-radius: 1.5rem;
}
/*Gøre så alle p under en div med klassen "list" er til venstre*/
div.list>p{
    text-align: left;
}
/*Gøre så alle h1,h2 har fonten 'Berkshire Swash' og en skygge som er placeret -2px på det verticle og horizontale led og en blur på 2px og farvet sølv*/
h1,h2{
    font-family: 'Berkshire Swash', cursive;
    text-shadow: -0.15rem -0.15rem 0.15rem hsla(180, 0%, 15%, 0.2);
}
/*Gøre så selectors kun bliver ramt hvis skærmen er over 768px bred*/
@media screen and (min-width: 768px){
    article#con{
        width: 50rem;
    }
    div.MobileNav{
        display: none;
    }
    /*Putter alle class billeder til ventre*/
    img.mainPic{
        float: left;
    }
    /*Centre Billederne i bunden af index*/
    article.indexClasses{
        justify-content: center;
        flex-direction: row;
    }
    article.indexClasses>a{
        margin: 0rem 1.5rem;
    }
    /*Laver nav baren*/
    nav.Desktop{
        display:flex;
        justify-content: center;
        position: sticky;
        background-image: url("../img/nav.jpg");
        background-color: hsla(0, 100%, 27%, 1);
        background-size: 100% 100%;
        height: 3rem;
        text-align: center;
        top: 0;
        left: 0;
        right: 0;
    }
    /*Gøre links i nav baren farvet og giver dem afstand til hinanden*/
    nav.Desktop a{
        color: hsla(0, 100%, 97%, 1);
        display: block;
        text-decoration: none;
        line-height: 3rem;
        padding-left: 1rem;
        padding-right: 1rem;
        transition: background-color 0.3s;
    }
    /*Når man har musen over noget i navigationen lyser det op*/
    nav.Desktop .dropdown:hover>a, nav.Desktop>ul>li:hover>a{
        background-color: hsla(0, 100%, 97%, 0.25);
    }
    nav.Desktop>ul>li:hover>a{
        transition: background-color 0.3s;
    }
    /*Giver noget quality of life til navigation baren*/
    li{
        padding-left: 1rem;
        padding-right: 1rem;
    }
    /*Laver Navigations baren bedre og uden punkter*/
    ul{
        display: flex;
        list-style-type: none;
        overflow: hidden;
        justify-content: center;
    }
    /*Laver alt indenhold i dropdown menuen usyndligt og giver det man skal bruge til at vise dropdown menuen en fast størelse og giver den farve og skygge med en glow på 1.2rem*/
    nav.Desktop .dropdown-content {
        display: none;
        position: absolute;
        background-color: hsla(0, 100%, 97%, 1);
        min-width: 12rem;
        box-shadow: 0rem 0rem 1.2rem hsla(180, 0%, 15%, 0.5);
      }
    /*Laver alle hyperlink text farvet og fjerner understrej og ligger til venstre*/
    nav.Desktop .dropdown-content a {
        color: hsla(180, 0%, 15%, 1);
        text-decoration: none;
        text-align: left;
      }
    /*For alle hyperlink text til at lyse op når man har musen over det*/
    nav.Desktop .dropdown-content a:hover {background-color: hsla(0, 100%, 50%, 0.65);}
    /*For dropdown menuen til at vise når man har musen over det*/
    nav.Desktop .dropdown:hover .dropdown-content {
        display: block;
      }
}
/*Gøre så selectors kun bliver ramt hvis skærmen er over 1200px bred*/
@media screen and (min-width: 1200px) {
    /*Gøre så alt text fylder 1200px i længde og er centret*/
    p,h1,h2,h3,h4,h5,h6{
        width: 1200px;
        margin: auto;
    }
}