@media (max-width: 900px){
    header{
        width: 100%;
    }
}
@media (max-width: 500px){
        header{
        width: 100%;
    }
}

main img{
    max-width: 100%;
    height: auto;
}
header{
    background-color: rgb(30, 58, 120);
    color:rgb(240,248,255);
}
body{
    background-color:rgb(157, 191, 255);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
nav{
    display: inline-block;
    background-color: rgb(30, 58, 120);
    color:rgb(240,248,255);
    margin-bottom: 10px;
    width: 100%;
}
nav ul{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    margin: 0;
    padding: 5px;
    list-style-type: none;
    width: 100%;
}

nav ul li{
    display: inline;
    padding: 5px;
    width: 100%;
}
nav a{
    color:rgb(240,248,255);
}
nav a:hover{
    color: rgb(255, 200, 200);
}

table{
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

th{
    text-align: left;
    padding: 10px;
    background-color: rgb(30, 58, 120);
    color:rgb(240,248,255);
    border-bottom: 2px solid black;
}

td{
    padding: 10px;
    vertical-align: top;
}

section{
    border-radius: 10px;
    color:black;
    margin: 10px;
    padding: 10px;
}

#LvlA{
    background-color: rgb(190, 197, 210);
}

#LvlAA{
    background-color: rgb(166, 171, 181);
}
#LvlAAA{
    background-color: rgb(140, 145, 153);
}