@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap');

body {
    font-family: Pixelify Sans;
    font-size: 17px;
    color: white;
    background-image: url("https://f2.toyhou.se/file/f2-toyhou-se/images/119701017_sf7tvvJOMoAhHRo.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

h1 {
    color: #ffef00; 
    font-size: 50px;
}

a {
    color: #ffef00; 
}

a:hover {
    color: white;
}

::selection {
    background-color: #ffef00;
    color: #000;
}

.navigation {
    background-color: #0a010e;
    padding: 14px;
    width: 50%;
    margin: auto;
    
    
}


.navalign {
    display: inline-block;
    
}

.navbutton {
    display: block;
    font-size: 20px;
    padding: 20px;
    text-align: center;
    color: #ffef00;
    text-decoration: none;   
}


.navbutton:hover {
    font-size: 20px;
    text-decoration: none;
    font-weight: bold;
    color: #FFF;
}

.mainpage {
    background: linear-gradient(#21182e, #39223d);
    width: 52%;
    padding: 30px;
    margin-left: 5%;
    border-radius: 12px;
    border: 5px #000 solid;
    box-shadow: 0 0 2px #9f55ae;
}

.infobox {
    width: 30%;
    border: 5px solid #000;
    background: linear-gradient(#21182e, #39223d);
    float: right; 
    padding: 20px; 
    margin-right: 5%;
    font-size: 16px; 
    overflow-wrap: break-word;
    box-shadow: 0 0 2px #9f55ae;
}

.title {
    background: linear-gradient(#613e68, #9f55ae);
    border: 2px solid #0e010c; 
    padding: 15px; 
    font-size: 30px; 
    font-weight: bold; 
    color: #ffef00; 
    text-align: center;
}


.slot {
    background-color: #21182e;
    border: 1px solid #0e010c; 
    padding: 15px; 
    margin: 12px;
    font-size: 17px; 
    text-align: left;
}

.imageslot {
    display: block;
    margin: auto;
    padding: 20px;
    width: 100px;
}

.tag {
    color: #ffef00;   
    font-size: 20px; 
    font-weight: bold; 
    text-decoration: underline;
}

.relation {
    text-decoration: none;
    font-size: 35px;
    color: white;
}

.relation:hover {
    text-decoration: none;
    color: #fff677;
}

.gallery {
    background: linear-gradient(#21182e, #39223d);
    padding: 30px;
    border-radius: 12px;
    border: 2px #000 solid;
    box-shadow: 0 0 2px #9f55ae;   
    margin: 5%;
}

.galleryitem {
    border: 2px solid #000;
    width: 300px;
}

.pageimg {
    width: 500px;
    margin: auto;
    display: block;
}


.areabox {
    display: block;
    background-repeat: no-repeat;
    background-size: cover;

    padding: 50px;
    border: 6px solid #000;
    border-radius: 7px;
}

.enemy {
    background:  linear-gradient(#21182e, #39223d); 
    border: 2px solid #080616;
    padding: 22px;
    border-radius: 4px;
    width: 20%;
}


.enemyslot {
    padding: 4px;
    font-size: 23px;
    border: 2px solid #21182e;
    margin: 2px;
}

.listingimgs {
    display: block;
    margin: auto;
    border-radius: 12px;
}