body {
    min-height: 150vh;
    width: 98vw;
    background-color: black;
}
header {
    height: 15%;
    display: flex;
}
footer {
    height: 5%;
    

}

.logo {
    width: 10%;
}
nav {
    display: inline-block;
}
li {
    display: inline-block;
    padding: 1rem;
}

a {
  color: white;  
  text-decoration: none;
  font-size: 20;
}

.active {
    color: crimson;
}
main {
    width: 100%;
    height: 80%;
   
}
.container {
    text-align: center;
    width: 100%;
    height: 50%;
}

.art {
    width: 80%;
    height: 80%;
    object-fit: fill;
    display: block;
    margin: auto;
}

h1 {
    color: white;
}
h2 {
    color: white;
    margin-bottom: 0;
    padding-bottom: 1rem;
}
p {
    color: white;
    display: inline-block;
    width: 70%;
    margin: 0rem 0rem 2rem 0rem;
    line-height: 2;
}

.infobox {
    background-color: black;
    width: 40%;
    display: inline-block;
    -webkit-box-shadow: inset 0px -1px 7px 3px rgba(156,0,0,1);
-moz-box-shadow: inset 0px -1px 7px 3px rgba(156,0,0,1);
box-shadow: inset 0px -1px 7px 3px rgba(156,0,0,1);
}

.infoart {
    width: 20%;
    text-align: left;
    padding-bottom: 1rem;
}

.footerlogo {
    height: 100%;
    width: 5%;
}
.statscontainer {
    padding-left: 5rem;
    height: 30%;
    width: 90%;
    -webkit-box-shadow: inset 0px -1px 7px 3px rgba(156,0,0,1);
-moz-box-shadow: inset 0px -1px 7px 3px rgba(156,0,0,1);
box-shadow: inset 0px -1px 7px 3px rgba(156,0,0,1);
margin: 2rem 0rem 2rem 0rem;
}
.statscontainer img {
    height: 30%;
    padding-bottom: 1rem;
}
.statscontainer p {
    line-height: 1;
    margin-left: 1rem;
}
.statscontainer::before {
    content: "Best Sword in game";
    background-color: red; 
}