@font-face {
    font-family: 'Fistalle';
    src: url('../assets/fonts/Fistalle.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

body{
  background-image: url("images/ltblubumpyscales.jpg");
  background-size: 0.1pc;
  font-family: Arial, Helvetica, sans-serif;
/* Low resolution text rendering  */
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  font-smooth: never;
  text-rendering: optimizeSpeed;
}

/* Pixelated/low-res text effect */
* {
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  font-smooth: never;
}

.container{
    display:flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.imgWrap{
    position:relative;
    display: block;
    /* Fills the square .newWorld tile, so the img percentages below resolve
       against a real size instead of the image's natural dimensions. */
    width: 100%;
    height: 100%;
}
.imgWrap:hover {
    filter:drop-shadow(0px 0px 3px black);
    top:3; bottom:0; left:2; right:0;
}
.size-label {
    position: absolute;
    bottom: -16px;
    right: 0px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: .6em;
    font-family: Arial, Helvetica, sans-serif;
    padding: 2px 4px;
    pointer-events: none;
}
.imgWrap::after{
    content:"";
    position:absolute;
    top:0; bottom:0; left:0; right:0;
	border-bottom: 2px inset rgba(0,0,0,.7);
	border-left: 2px inset rgba(0,0,0,.6);
	border-right: 2px inset rgba(255,255,255,.7);
	border-top: 2px inset rgba(255,255,255,.5);
    display: block;
}

.newWorld{
    display:flex;
    width:256px;
    height:256px;
    margin: 10px;
    justify-content: center;
    align-items: center;
    /* Never let the flex row squash a tile out of square */
    flex: 0 0 auto;
    box-sizing: border-box;
}

.newWorld img{
    width:100%;
    height:100%;
    /* Stretch every texture to the square tile, whatever its real ratio */
    object-fit: fill;
    display: block;
}

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.header-title {
    color: #fffb00;
    filter: sepia(.85);
    margin: 1pc;
    font-size: 2.5em;
    font-family: Fistalle, sans-serif;
    font-weight: 500;
    word-spacing: 0.5em;
    letter-spacing: 0.05em;
    padding: .5rem 1rem;
    box-shadow:
    0 0 .5pc 0 rgb(0, 0, 0) inset;
    border-bottom: 8px inset rgba(255,255,255,.2);
    border-left: 8px inset rgba(255,255,255,.2 );
    border-right: 8px inset rgba(0, 0, 0, 0.2);
    border-top: 8px inset rgba(0,0,0,.2);
    transform: scaleX(.9); /* Increase value to stretch more */
    display: inline-block;  /* Needed for transform to work properly */
        /* Outline for each letter */
    text-shadow:
            1px 1px 0 #000000,
            -1px -1px 0 #000000,
            1px -1px 0 #ffee00,
            -1px 1px 0 #ffee00;
    }

.header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/* Links between the collection pages */
.room-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.room-links a {
    font-size: 0.7em;
    background: rgba(0,0,0,0.5);
    color: #ffee00;
    text-decoration: none;
    padding: 2px 4px;
}

.room-links a:hover {
    text-decoration: underline;
}

.room-links a.current {
    color: #fff;
    background: rgba(0,0,0,0.75);
}

.source-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.source-links a {
    font-size: 0.7em;
    background: rgba(0,0,0,0.5);
    color: #fff;
    text-decoration: none;
    padding: 2px 4px;

}

.source-links a:hover {
    text-decoration: underline;
}

h2 {
font-family: fistalle, sans-serif;
font-weight: 400;
font-stretch: condensed;
word-spacing: 0.5em;
text-shadow:
            .5px .5px 0 #fcfae2,
            -1px -1px 0 #000000,
            1px -1px 0 #000000,
            -.5px .5px 0 #fffcd4;

}

.folder-heading {
    width: 100%;
    text-align: left;
    font-size: 1.5em;
    margin: 30px 0 10px 0;
}

.empty-note {
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 0.8em;
    background: rgba(0,0,0,0.5);
    padding: 8px;
    margin: 40px 0;
}

#texture-count {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 0.75em;
    padding: 3px 8px;
    z-index: 100;
}

.linked-source-btn {
    font-size: 0.7em;
    background: rgba(0,0,0,0.65);
    color: #fff;
    border: none;
    border-radius: 0;
    width: 120px;
    text-align: left;
    padding: 2px 2px;
    display: block;
    cursor: pointer;
    text-decoration: underline;
}
.linked-source-btn:hover {
    color: #ffee00;
}

.homemade-source-btn {
    font-size: 0.7em;
    background: rgba(0,0,0,0.65);
    color: #FFD700;
    border: none;
    border-radius: 0;
    width: 120px;
    text-align: left;
    padding: 2px 2px;
    display: block;
    text-shadow: 0 0 8px #FFD700, 0 0 16px #FFA500;
}
.custom-source-btn {
    font-size: 0.7em;
    background: rgba(0,0,0,0.65);
    color: #fff;
    border: none;
    border-radius: 0;
    width: 120px;
    text-align: left;
    padding: 2px 2px;
    display: block;
    text-shadow: none;
}