*{
    margin: 0px; /* mellemrem fra udkanten og ind til tekst osv. */
    padding: 0px; /* mellemrum i mellem teksten */
    
}
body{
    color: darkslategray; /* color bestemmer farven som teksten bliver i den her body */
    font-family: Arial, Helvetica, sans-serif; /* giver hvilken font teksten er skrevet i */
    background-color: rgb(240, 240, 240); /* baggrundsfarven som er lavet, den står i rgb men skal skrives ind i HSL */
}
header>picture>a img{
    width: 100%; /* hvor bredt et billede skal være */
    display: block; /* block gør at billede kommer til at fylde hele siden i bredde */
}
nav, footer{
    background-color: rgb(104, 0, 0);
    height: 3rem; /* height er hvor høj vores nav og footer skal være */
    text-align: center; /* centrer teksten */
    color: whitesmoke;
}   
nav{
   position: sticky; /* positionen af vores nav i dette tilfælde sticky så når vi scroller så følger den med */
   top: 0; /* hvor meget plads der skal være til det ovenover */
    width: 100%; 
}

nav a{
    color: whitesmoke;
    text-decoration: none; /* text decoration er underlines osv. */
}
nav ul{
    display: none;
    width: 100%;
    z-index: 5;
}
nav ul li{
    margin: 0 5px;
    list-style: none;
    line-height: 3rem; /* linje højte som vi har sat til 3rem */
    width: 20%;
    position: relative;
}
nav ul ul{
    position: relative;
    z-index: 1;
    display: none;
    background-color: rgb(104, 0, 0,0.95);
}
nav ul ul li{
    display: block;
    width: auto;
}
nav ul img{
    width: 2%;
    position: sticky
}
h1, h2{
    color: rgb(104, 0, 0);
    font-family: 'Berkshire Swash', cursive;
    font-weight: 400; /* hvor tyk skrifttypen skal være */
    text-shadow: -2px -2px silver; /* tekst skygge til at have bag teksten */
}
h1{
    font-size: 3rem;
    text-align: center;
}
h2{
    font-size: 2rem; /* skriftstørrelse */
}
h3{
    font-size: 1.5rem;
}
p, h3{
    margin-top: 2rem; /* hvor meget plads vi har fra toppen af */
    margin-bottom: 2rem; /* hvor meget plads vi har fra bunden af */
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    margin-left: auto;
    margin-right: auto;
}
section img, header> a img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
article img{
    float: right; /* vi får billedet til at flyde ved siden af teksten */
    position: relative;
    display: none;
}
.p{
    display: flex; /* vi får vores display til at stå verticle */
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-width: 5px; /* vi sætter en tykkelse på vores border */
    border-radius: 30% 0%; /* vi sætter en radius på vores border så kanterne bliver bløde */
    padding: 2rem;
    margin-left: auto;
    margin-right: auto;
}
h1 img{
    float: none;

}
p{
    text-align: center;
    font-size: 1.3rem;
    line-height: 2.5rem;
 
}
/* der er valgt ikke at smide den op i (h1,h2) og h3 da der muligvis kommer mere senere der vil bruge alle 3 */
h1,h2,h3{
    text-align: center;
}
body>ul li{
    font-size: 1.3rem;
    line-height: 2.5rem;
    
}
picture>a>img{
    height: 100%;
}
table, th, td{
    border-collapse: collapse;
}
nav .menu-btn, nav>img
{
    height: 40px;
    top: 5px;
    right: 10px;
    position: absolute; /* absolute gør så den ligger absolut imellem de elementer som den er placeret i, hvis du rykker elementerne kommer den med */
}

/* Separat styling for checkbox */
nav .menu-btn
{
    display: block;
    width: 40px;
    z-index: 7;
    opacity: 0;
    cursor: pointer;
}

/* Separat styling for menuikoner */
nav>img
{
    z-index: 6;
}

nav .menu-btn ~ .menuicon
{
    display: block;
}
nav .menu-btn ~ .closeicon{
    display: none;
}
nav .menu-btn:checked ~ .menuicon
{
    display: none;
}
nav .menu-btn:checked ~ .closeicon{
    display: block;
}
nav .menu-btn:checked ~ul{
    display: flex;
    flex-direction: column;
    text-align: center;
    background-color: rgb(104, 0, 0);
}
nav .menu-btn ~ ul li{
    width: 100%;
}
nav .pil-btn{
    z-index: 7;
    opacity: 0%;
    cursor: pointer;
}
img .pilicon{
    z-index: 6;
}
nav .pil-btn, img.pilicon{
    height: 40px;
    top: 5px;
    right: 10px;
    position: absolute;
}
nav .pil-btn ~ .pilicon{
    display: block;
}
nav .pil-btn:checked ~ ul{
    display: flex;
    flex-direction: column;
    background-color: rgb(104, 44, 44);
}
.tabel3,.tabel1,.tabel2{
    display: grid;
    justify-content: center;
    margin-left: 500px;
    margin-right: 500px;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: auto;

}
.tabel1{
    grid-template-columns: 100px 100px 100px 100px 300px;
}
.tabel2{
    grid-template-columns: 90px 90px 200px 90px repeat(9, 90px);
}
span{
    display: grid;
    grid-area: span;
    text-align: center;
    word-spacing: 10px;
    line-height: 2rem;
}
.spellslot{
    display: grid;
    grid-column: 5/14;
}
.level,.cant,.feat,.prof{
    display: grid;
    grid-column: 1/4;
}
.spellmerge{
    grid-column: 1/5;
}
.tabel2:nth-of-type(2) span:nth-of-type(26n+1),.tabel2:nth-of-type(2) span:nth-of-type(26n+2),.tabel2:nth-of-type(2) span:nth-of-type(26n+3),.tabel2:nth-of-type(2) span:nth-of-type(26n+4),.tabel2:nth-of-type(2) span:nth-of-type(26n+5),.tabel2:nth-of-type(2) span:nth-of-type(26n+6),.tabel2:nth-of-type(2) span:nth-of-type(26n+7),.tabel2:nth-of-type(2) span:nth-of-type(26n+8),.tabel2:nth-of-type(2) span:nth-of-type(26n+9),.tabel2:nth-of-type(2) span:nth-of-type(26n+10),.tabel2:nth-of-type(2) span:nth-of-type(26n+11),.tabel2:nth-of-type(2) span:nth-of-type(26n+12),.tabel2:nth-of-type(2) span:nth-of-type(26n+13){
    background-color: lightgrey;
}
/* vi sætter vores side til at blive vist med de her andre settings når det er for 1024px */
@media only screen and (min-width: 1024px){
    p, h3{
        margin-left: auto;
        margin-right: auto;
    }
    nav{
        display: block;
    }
    .p{
        display: flex;
        flex-direction: row;
        width: 500px;
        justify-content: space-between;
    }
    nav ul{
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    nav .menu-btn ~  ul li{
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    nav ul li:hover ul{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    article img{
        display: block;
        float: right;
    }
    nav .menu-btn ~ ul li{
        display: flex;
        justify-content: flex-start;
        position: relative; /* relative ændre ikke noget men det gør så du kan sætte et z-index på */
        margin: 0 5px;
        flex-direction: column;
    }
    nav .menu-btn ~ .menuicon , nav img .menuicon, nav img .closeicon, nav .menu-btn, nav .menu-btn:checked ~ .closeicon{
        display: none;
    }
    nav .pil-btn ~ .pilicon , nav img .pilicon, nav .pil-btn{
        display: none;
    }
}
@media only screen and (min-width: 1200px){
    p{
        margin-left: 100px;
        margin-right: 100px;
    }
    body>ul li{
        margin-left: 100px;
    }
    section img,header>a img{
        width: 100%;
    }
    h1 img{
        float: left;
    }
    nav{
        display: block;
    }
    nav ul li:hover ul{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    article img{
        display: block;
        float: right;
    }
    nav .menu-btn ~ ul li{
        display: flex;
        justify-content: flex-start;
        position: relative;
        margin: 0 5px;
        flex-direction: column;
    }
    nav .menu-btn ~ .menuicon , nav img .menuicon, nav img .closeicon, nav .menu-btn, nav .menu-btn:checked ~ .closeicon{
        display: none;
    }
    nav .pil-btn ~ .pilicon , nav img .pilicon, nav .pil-btn{
        display: none;
    }
    body>ul li{
        display: none;
    }
    body>ul li{
        margin-left: 200px;
    }
    p img{
        display: inline;
    }
}
@media only screen and (min-width: 1920px){
    p, h3{
        margin-top: 2rem;
        margin-bottom: 2rem;
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        margin-left: 400px;
        margin-right: 400px;
}
    body>ul li{
     font-size: 1.3rem;
     line-height: 2.5rem;
     margin-left: 520px;
}
.mainPic{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 10%;
}