@font-face {
    font-family: "Dogica";
    src: url("../fonts/dogica.ttf") format("truetype");
    font-weight: lighter;
    font-style: normal;
    font-display: swap;
}


/* VARIABLES */
:root {
    /* Background Colors: */
    --background-color: #956d71;
    --header-background-color: #798185;
    --content-background-color: #e1cbc6;
    --sidebar-background-color: #d6a3a8;

    /* Text Colors: */
    --text-color: #383237;
    --sidebar-text-color: #a25975;
    --link-color: #9f5766;
    --link-color-hover: #b47b83;

    /* Text: */
    /* --font: Verdana, sans-serif; */
    --font: "Dogica", Verdana, sans-serif;
    --heading-font: Georgia, 'Times New Roman', Times, serif;
    --font-size: 8px;

    /* Other Settings: */
    --margin: 0px;
    --padding: 14px;
    --border: 1px solid #fff5f8;
    --outline: 1px solid #5d3343;
    --round-borders: 4px;
    --sidebar-width: 200px;
    --scrollbar:var(--background-color) white;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #fcf4f4 0%, #f8e7e6 50%, #f2dada 51%, #e8b0ae 100%);
    --gradient-primary-hover: linear-gradient(135deg, #fcf4f4 0%, #f8e7e6 78%, #f8e7e6 78%, #f2dada 79%, #e8b0ae 100%);
    --gradient-secondary: linear-gradient(135deg, #fcf4f4 0%, #f8e7e6 44%, #e8b0ae 94%, #f8e7e6 100%, #f8e7e6 100%);

    /* WARFRAME THEME VARIABLES*/

    /* Background Colors: */
    --wf-background-color: #23212b;
    --wf-header-background-color: #798085;
    --wf-content-background-color: #3a383f;
    --wf-sidebar-background-color: #262327;


    /* Text Colors: */
    --wf-text-color: #ffeede;
    --wf-sidebar-text-color: #ffbf83;
    --wf-link-color: #ffbf83;
    --wf-link-color-hover: #ffbf83;

    /* Other Settings */
    --wf-border: 1px solid #ffbf83;
    --wf-outline: 1px solid #5d3343;
    --wf-scrollbar:var(--wf-link-color) var(--wf-background-color);

    /* Gradients */
    --wf-gradient-primary: linear-gradient(135deg, #66584a 0%, #5c4e40 17%, #473a2f 50%, #3d3127 51%, #473529 59%, #553829 71%, #3d3027 84%, #2c251c 100%);
    --wf-gradient-primary-hover: linear-gradient(135deg, #8c7a66 0%, #7f6b59 17%, #614f41 50%, #544436 51%, #614939 59%, #754d39 71%, #544236 84%, #3d3225 100%);
    --wf-gradient-secondary: linear-gradient(135deg, #66584a 0%, #5c4e40 17%, #473a2f 50%, #3d3127 51%, #473529 59%, #553829 71%, #3d3027 84%, #2c251c 100%);

}

/* WARFRAME THEME ------------------------- */
.warframe-theme {
    background: var(--wf-background-color);
    background-image: url("../img/bg.jpg");
    color: var(--wf-text-color);
    text-transform: none;
    scrollbar-color: var(--wf-scrollbar);
}

.warframe-theme .main-content {
    background: var(--wf-content-background-color);
    background-image: url("../img/noise-texture.png");
    scrollbar-color: var(--wf-scrollbar);
}

.warframe-theme .left-sidebar {
    background: var(--wf-sidebar-background-color);
}

.warframe-theme left-sidebar-grid {
    border: var(--wf-border);
}

.warframe-theme .header {
    border-bottom: var(--wf-border);
}

.warframe-theme left-sidebar {
    border-top: var(--wf-border);
}

.warframe-theme .footer {
    grid-area: footer;
    border-top: var(--wf-border);
    background-color: var(--wf-sidebar-background-color);
}

.warframe-theme .side-nav ul {
    border: var(--wf-border);
    background: var(--wf-gradient-primary);
}


.warframe-theme .side-nav li {
    border-top: var(--wf-border);
    background: var(--wf-gradient-primary);
}

.warframe-theme .side-nav li:hover {
    background: var(--wf-gradient-primary-hover);
}

.warframe-theme .side-nav li a {
    color: var(--wf-text-color);
}

.warframe-theme .side-nav li a.active {
    color: var(--wf-link-color-hover);
}

.warframe-theme li.coming-soon:hover {
    opacity: 1;
    background: var(--wf-gradient-primary);
}

.warframe-theme gallery-title {
    background: var(--wf-gradient-primary);
    border: var(--wf-border);
    outline: var(--wf-outline);
    background: var(--wf-gradient-secondary);
}

.warframe-theme gallery-thumb {
    background-color: var(--wf-sidebar-background-color);
    border: var(--wf-border);
    outline: var(--wf-outline);
}

.warframe-theme one-column-grid {
    outline: var(--wf-outline);
    border: var(--wf-border);
}

.warframe-theme .outlined-rounded {
    border: var(--wf-border);
    outline: var(--wf-outline);
}

vindicta {
    color: rgb(255, 99, 99);
}

memoriam {
    color: rgb(209, 141, 255);
}

aureum {
    color: var(--wf-link-color);
}

/* ------------------------------------------ */



body {
    background: var(--background-color);
    background-image: url("../img/bg.jpg");
    background-blend-mode: multiply;
    font-family: var(--font);
    background-repeat: repeat;
    color: var(--text-color);
    font-size: var(--font-size);
    max-width: 900px;
    margin: 10px;
    padding: var(--margin);
    line-height: 1.8;
    text-transform: lowercase;
}

.img-full {
    width: 100%
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: lighter;
    font-family: var(--heading-font);
    letter-spacing: 1.6px;
    font-style: italic;
}

h1 {
    font-size: 24px;
}

h3 {
    font-size: 11px;
}


.outlined-rounded {
    border: var(--border);
    outline: var(--outline);
    border-radius: var(--round-borders);
}


/* Links: */
a {
    text-decoration: none;
}

a,
a:visited {
    color: var(--link-color);
}

a:hover,
a:focus {
    color: var(--link-color-hover);
    text-decoration: none;
}


top-bar {
    color: white
}

top-bar a,
top-bar a:visited {
    color: white;
}

/* grid container */
left-sidebar-grid {
    outline: var(--outline);
    border-radius: var(--round-borders);
    display: grid;
    grid-template-areas:
        "header"
        "main-content"
        "left-sidebar"
        "footer";
    grid-template-rows: auto 1fr auto auto;
    border: var(--border);


    /* fallback height */
    /* min-height: 100vh; */

    /* new small viewport height for modern browsers */
    /* min-height: 100svh; */
}

/* general column padding */
left-sidebar-grid>* {
    padding: 1rem;
}

/* assign columns to grid areas */
left-sidebar-grid>.header {
    padding: 0;
    grid-area: header;
    background: var(--header-background-color);
    border-bottom: var(--border);
    border-radius: var(--round-borders) var(--round-borders) 0 0;
    overflow: hidden;
    line-height: 0;
}

left-sidebar-grid>.main-content {
    grid-area: main-content;
    background: var(--content-background-color);
    background-image: url("../img/noise-texture.png");
    overflow-x: hidden;
    

}

left-sidebar-grid>.left-sidebar {
    grid-area: left-sidebar;
    background: var(--sidebar-background-color);
    border-top: var(--border);
}

/* .left-sidebar-grid > .right-sidebar {
    grid-area: right-sidebar;
    background: var(--sidebar-background-color);
} */

left-sidebar-grid>.footer {
    grid-area: footer;
    border-top: var(--border);
    border-radius: 0 0 var(--round-borders) var(--round-borders);
    background: var(--sidebar-background-color);
    background-image: url("../img/noise-texture.png");
}



/* GALLERY GRID TESTING */
/* ------------------------------------------------------ */

one-column-grid {
    outline: var(--outline);
    border-radius: var(--round-borders);
    display: grid;
    grid-template-areas:
        "header"
        "main-content"
        "footer";
    grid-template-rows: auto 1fr auto auto;
    border: var(--border);
    /* fallback height */
    min-height: 100vh;
    /* new small viewport height for modern browsers */
    min-height: 100svh;
}


/* general column padding */
one-column-grid>* {
    padding: 1rem;
    background: var(--content-background-color);
    background-image: url("../img/noise-texture.png");
}

/* assign columns to grid areas */
one-column-grid>.header {
    padding: 0;
    grid-area: header;
    background: var(--header-background-color);
    border-bottom: var(--border);
    border-radius: var(--round-borders) var(--round-borders) 0 0;
    overflow: hidden;
    line-height: 0;
}

one-column-grid>.main-content {
    grid-area: main-content;
}

one-column-grid>.footer {
    grid-area: footer;
    border-top: var(--border);
    border-radius: 0 0 var(--round-borders) var(--round-borders);
}

.gallery-image {
    max-width: 600px;
}

gallery-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

gallery-main h1,
h2 {
    text-transform: capitalize;
    font-style: normal;
}

.smaller-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 500px;
    justify-content: center;

}

.smaller-thumbs>gallery-thumb {
    height: 34px;
}

gallery-thumb img {
    width: 100%;
    height: 100%;
    
}

/* ------------------------------------------------------ */



.side-nav {
    box-sizing: border-box;
}

.side-nav sidebar-title:first-child h3 {
    margin-top: 0;
}

/* sidebar-title h3 {
    padding: 12px 0 0 12px;
} */

.side-nav ul {
    outline: var(--outline);
    border: var(--border);
    border-radius: var(--round-borders);
    background: var(--gradient-secondary);
    list-style: none;
    padding: 0;
    margin: 0;
    text-transform: uppercase;
}



.side-nav li {
    line-height: 2;
    border-top: var(--border);
    background: var(--gradient-primary);
    transition: all 0.23s ease-in-out;
    padding: 2px 0 2px 6px;
}

.side-nav li:hover {
    letter-spacing: 2px;
    background: var(--gradient-primary-hover);
    opacity: 0.6;
}


li.coming-soon:hover {
    letter-spacing: 0px;
    opacity: 1;
    background: var(--gradient-primary);
}

coming-soon {
    opacity: 0.5;
}

.side-nav li a {
    color: var(--text-color);
    display: block;
}

.side-nav li a.active {
    color: var(--link-color-hover);
}


.side-nav li:first-child {
    border-top: none;
    border-radius: 4px 4px 0 0;
}

.side-nav li:last-child {
    border-radius: 0 0 4px 4px;
}

back-button {
    outline: var(--outline);
    border: var(--border);
    border-radius: var(--round-borders);
    background: var(--gradient-primary);
    line-height: 2;
    padding: 2px 0 2px 6px;
    display: inline-block;
    text-transform: uppercase;
    width: 250px;
}

.image-filter {
    position: relative;
}

.image-filter::before,
.image-filter::after {
    content: "";
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

/* .image-filter--pastel img {
  filter: brightness(1.2) contrast(0.6) brightness(1.1) saturate(1.4);
} */

.image-filter--pastel::before {
    background: white;
    opacity: 0.3;
    mix-blend-mode: soft-light;
}

.image-filter--pastel::after {
    background: var(--content-background-color);
    /* change color here */
    opacity: 0.4;
    mix-blend-mode: color;
}

gallery-title {
    display: block;
    padding-left: 6px;
    border: var(--border);
    border-radius: var(--round-borders);
    outline: var(--outline);
    text-transform: none;
    line-height: 0.5;
    background: linear-gradient(135deg, #fcf4f4 0%, #f8e7e6 50%, #f2dada 51%, #e8b0ae 100%);
}

gallery-title h3 {
    font: var(--font);
    text-transform: uppercase;
    letter-spacing: 0px;
}


gallery-box {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 12px 0 36px 0;
}

gallery-thumb {
    background-color: var(--sidebar-background-color);
    width: 64px;
    height: 64px;
    border: var(--border);
    border-radius: var(--round-borders);
    outline: var(--outline);
    position: relative;
    overflow: hidden;
}

gallery-thumb-title {
    position: absolute;
    bottom: 0;
    right: 0;
    text-transform: uppercase;
    font-size: 6px;
    text-align: right;
    color: white;
}

gallery-box img {
    filter: contrast(0.9) brightness(1.1) saturate(0.5);
    position: relative;
}

gallery-box img::after {

    background: var(--content-background-color);
    /* change color here */
    opacity: 0.3;
    mix-blend-mode: color;
}

.gallery-soon {
    opacity: 0.5;
}


.banner-web {
    display: none;
}

/* DETAILS STYLING */

details {
    border: var(--border);
    outline: var(--outline);
    border-radius: var(--round-borders);
    padding: 6px;
    margin-bottom: 12px;
    background: hsla(0, 0%, 100%, 0.384);
}



/* DETAILS END-------------- */

/* TABLE STYLING */


table {
    border-collapse: collapse;
    border: var(--border);
    letter-spacing: 0px;
    text-transform: none;
    width: 100%;
}

thead {
    background: var(--sidebar-background-color);
}

th,
td {
    border: var(--border);
    padding: 6px;
    text-align: left;
}

tbody > tr:nth-of-type(even) {
  background: var(--content-background-color);
}

table-thumb {
    background-color: var(--sidebar-background-color);
    border: var(--border);
    outline: var(--outline);
    border-radius: var(--round-borders);
    display: inline-block;
    width: 16px;
    height: 16px;
}

table-thumb img {
    width: 100%;
    height: auto;
    display: block;
}

/* ---TABLE END------- */


.map-embed {
    border: var(--border);
    outline: var(--outline);
    border-radius: var(--round-borders);
}

/* desktop breakpoint */
@media (min-width: 900px) {
    body {
        margin: 0;
        position: absolute;
        min-width: 900px;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .one-column {
        position: static;
        margin: 10px auto;
        left: 0;
        top: 0;
        -webkit-transform: none;
        transform: none;
    }


    left-sidebar-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas:
            "header header header header"
            "left-sidebar main-content main-content main-content"
            "footer footer footer footer";
    }

    /* header {
        height: 200px;
    } */

    .header {
    height: 80px;
    /*testing shorter height*/
}

    left-sidebar-grid>.left-sidebar {
        border-top: none;
        border-right: var(--border);
    }

    left-sidebar-grid>.main-content {
    overflow-y: auto;
    scrollbar-color: var(--scrollbar);
    /*scrollbar colours*/
    scrollbar-width: thin;
    max-height: 732px;
    /* testing max height */

}

    .warframe-theme left-sidebar-grid>.left-sidebar {
        border-top: none;
        border-right: var(--wf-border);
    }

    .banner-web {
        display: block;
    }
    .banner-mobile {
        display: none;
    }
}