:root {
--tabs: #380065;
--tabs-active: #bb004B;
--tabs-hover: #8500c2;
--tabs-click: #960064;
}

a:hover {
text-decoration: none;
}

/* Gallery Pages */
#photos img {height:125px;}

#photos {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
height:inherit;
justify-content:space-around;
}

#photos figure {
margin: 0.3rem 0.2rem;
max-width: min-content;
}
#tab2 #photos {
	margin:0.3rem 0.05rem;
}

[data-theme="light"] { 
#photos img {
border: 2px ridge #3a0061;
}
#photos img:hover {
border-color:#ca005e;
}
}

#photos img {
border: 2px ridge #009ec5;
/* Enable this for pixel art!! */
/* image-rendering: pixelated; */
}

#photos img:hover {
border-color: #ffda00;
}

#photos span {
text-align: center;
display: block;
font-size:0.75rem;
word-wrap:wrap;
line-height:0.85rem;
}

#photos figcaption {
padding: 10px 0px;
}

/* Mobile Styling */

@media (max-width: 800px) {
body {
padding: 1rem;
}

#photos figure {
width: 95%;
max-width: unset;
}

#photos img {
width: 100%;
}
}

/* Styling for JavaScript viewer (if enabled) */

#js-viewer {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.612);
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
z-index:99;
}

#js-viewer img {
max-width: 95%;
max-height: 80%;
height: auto;
width: auto;
border: 3px ridge #ca005e;
}

#js-viewer span {
margin-top: 1rem;
}

#js-viewer span button {
font-family:'Dosis', sans-serif;
letter-spacing:0.025rem;
padding:0.2rem 0.46rem;
font-weight:bold;
border-radius: 0px;
border: 2px outset #00ad9c;
background-color: #00a79e;
cursor: url(https://i.postimg.cc/kXsCXZ1t/nat997.png), auto !important;
}

#js-viewer span button:hover {
border: 2px inset #9200be;
background-color: #ab00df;
color:#00d3be;
}

[data-theme="light"] {
#js-viewer span button {
border-radius: 0px;
border: 2px outset #a400e7;
background-color: #a400e7;
color:#06ffd6;
cursor: url(https://i.postimg.cc/kXsCXZ1t/nat997.png), auto !important;
}

#js-viewer span button:hover {
border: 2px inset #c00b56;
background-color: #fa306d;
color:#ffeece;
}
}


/*---------- Tabs ----------*/
#tabs {
display: block;
position: relative;
margin: 0;
top: 0;
height: 1.8rem;
width: 100%;
padding:0;
}

.tab-button {
display: inline-block;
align-content: center;
margin: 0 -0.4rem 0 0;
padding: 0 0.4rem;
letter-spacing:-0.015rem;
word-spacing:-0.038rem;
font-size:0.955rem;
text-align: center;
background: var(--tabs);
height: inherit;
border: 1px solid #000;
cursor: url(https://i.postimg.cc/kXsCXZ1t/nat997.png), auto !important;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
-ms-transition: 0.5s;
}

.tab-button:hover {
background: var(--tabs-hover);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
-ms-transition: 0.5s;
}

.tab-button.active {
background: var(--tabs-active);
}

.tab-button:active {
background: var(--tabs-click);
box-shadow: inset 0 0 2px #000;
-webkit-transition: 0s;
-moz-transition: 0s;
transition: 0s;
-ms-transition: 0s;
}

.tabs-con {
display: block;
padding: 0;
width: 100%;
height: 100%;
}

.tab {
padding: 0.5rem;
}
/*--- END Tabs ---*/