@font-face{
	font-family: "rs";
	src: url('../font/runescape.ttf'); 
}

@font-face{
	font-family: "rsbold";
	src: url('../font/runescape_bold.ttf'); 
}

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
	

body{	
	background-color:	#0d2038 ;  /* #1C1C1A,  #121211, legit harmaa > #2b2f34 */
	font-family: Roboto, Arial;
	color:#c7d1c7; /* DCEBDD FFFFCC */
	padding:0px;
	margin:0px;
	overflow-x:hidden;
	width:100vw;
    font-family:rs;
}


#app {
    xborder:1px solid grey;
    width:100%;
    height:90vh;

    display:flex;
    align-items: center;
    justify-content: center;

}

#app > .box {
    xborder:1px solid grey;
    width:30%;
    height:100%;
    background-color: #272520;
    padding:10px;
    border:2px solid #48453b;
    box-shadow:2px 2px 4px rgba(0,0,0,0.6);
}



#app > .box.sets {
    width:15%;
    border-radius: 5px 0px 0px 5px;
}

#app > .box.info {
    width:35%;
    border-left:none;
    border-right:none;
}

#app > .box.info > .set-title {
    font-size:2em;
    text-align: center;
    margin-bottom:5px;
    xfont-family:rsbold;
}

#app > .box.images {
    width:20%;
    border-radius: 0px 5px 5px 0px;
    overflow:hidden;
    padding-right:0px;
}

#app > .box > .title {
    xborder:1px solid grey;
    padding:10px;
    font-size:1.5em;
    xfont-family:rsbold;
    text-align: center;
}


#set-images {
    height:90%;
    overflow-y:scroll;
    
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    padding:5px;
}

#set-images > img.image {
    xborder:1px solid #3e3529;;
    border-radius:5px;
    width:100%;
    box-shadow:0px 0px 5px rgba(0, 0, 0, 1);
    margin-bottom:10px;
}