/* Initial Setup */
:root {
    /* THEME B */
    --theme0: #000000;
    --theme1: #0D3706;
    --theme2: #334936;
    --theme3: #529A4E;
    --theme4: #93A78C;

    --lightA: #afafaf;
    --lightB: #cfcfcf;

    --darkA: #111111;
    /* THEME B */
    /* --theme0: #0D3706;
    --theme1: #445E2B;
    --theme2: #7B9A69;
    --theme3: #B3C3A0;
    --theme4: #c8d6b7; */
    /* THEME C */
    /* --theme0: #274472;
    --theme1: #34507e;
    --theme2: #41729F;
    --theme3: #5885AF;
    --theme4: #C3E0E5; */
    --opacity0: 1.0;
    --opacity1: 0.75;
    --opacity2: 0.5;
    --opacity3: 0.25;
    --opacity4: 0.0;
}

html, body {
    padding: 0px;
    margin: 0px;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

/* Colors and general theme */
.theme0 {
    color: var(--theme0);
}

.theme1 {
    color: var(--theme1);
}

.theme2 {
    color: var(--theme2);
}

.theme3 {
    color: var(--theme3);
}

.theme4 {
    color: var(--theme4);
}

.bgtheme0 {
    background-color: var(--theme0);
}

.bgtheme1 {
    background-color: var(--theme1);
}

.bgtheme2 {
    background-color: var(--theme2);
}

.bgtheme3 {
    background-color: var(--theme3);
}

.bgtheme4 {
    background-color: var(--theme4);
}

.opacity0 {
    opacity: var(--opacity0);
}

.opacity1 {
    opacity: var(--opacity1);
}

.opacity2 {
    opacity: var(--opacity2);
}

.opacity3 {
    opacity: var(--opacity3);
}

.opacity4 {
    opacity: var(--opacity4);
}

/* Container stuff */

.container {
    display: flex;
}

.frow {
    flex-direction: row;
}

.fcol {
    flex-direction: column;
}

.center {
    align-items: center;
    justify-content: center;
}

.align {
    align-items: center;
}

.justify {
    justify-content: center;
}

.fwhole {
    flex: 1 !important;
}

.fhalf {
    flex: calc(1/2) !important;
}

.fthird {
    flex: calc(1/3) !important;
}

.ffourth {
    flex: calc(1/4) !important;
}

.fill {
    width: 100%;
    height: 100%;
}


/* Navigation Rail */

nav-rail {
    width: 80px;
    font-family: "Roboto", sans-serif;
    padding: 0px 4px 0px 4px;
    background-color: var(--theme0);
    /* border-right: 1px solid var(--theme2); */
}

@media screen and (max-width: 600px) {
    nav-rail {
        visibility: hidden;
        width: 0px;
        height: 0px;
        padding: 0px;
    }
}

nav-item {
    color: var(--lightA);
    width: 80px;
    height: 56px;
    transition-duration: 0.45s;
}

nav-item:not(:last-child) {
    padding-bottom: 12px;
}

nav-item:hover .nav-icon:not(.home) {
    background-color: var(--theme2);
    border-radius: 45px;
    transition-duration: 0.45s;
}

nav-item:hover {
    color: var(--lightB);
    cursor: pointer;
    transition-duration: 0.45s;
}

.nav-icon {
    display: flex !important;
    padding: 0px;
    margin-bottom: 4px;
    width: 56px;
    height: 32px;
    align-items: center;
    justify-content: center;
    transition-duration: 0.45s;
}

.home {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background-color: var(--theme2);
}

/* Main Content */

#content {
    background-color: var(--darkA);
    overflow: scroll;
    padding: 0px 20% 0px 20%;
}

@media screen and (max-width: 600px) {
    #content {
        padding: 0px;
    }
}

#area {
    margin-bottom: 20px;
    margin-top: 20px;
}

/* Cards */

.row {
    flex: 1;
    display: flex;
    flex-direction: row;
}

.col {
    flex: 1;
}

@media screen and (max-width: 600px) {
    .row {
        flex-direction: column !important;
    }
}

card {
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    margin: 8px;
    display: flex;
    text-overflow: ellipsis;
    background-color: var(--theme2);
    font-size: 1vw;
}

image-card {
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    margin: 8px;
    display: flex;
    text-overflow: ellipsis;
    background-color: var(--theme2);
    font-size: 1vw;
}

@media screen and (max-width: 600px) {
    card {
        font-size: 4vw;
        margin-bottom:  8px;
    }

    card-image.logo img {
        width: 1000px;
    }
}

card-header {
    background-color: var(--theme1);
}

card-content {
    background-color: var(--theme2);
}

card-image {
    overflow: hidden;
    align-self: center;
    display: flex;
}
card card-image {
    margin-bottom:8px;
}

card-image img {
    max-width: 100%;
    align-self: center;
}

card-footer {
    font-family: "Roboto", sans-serif;
    display: flex;
    color: white;
    height: 100px;
    max-height: 100px;
    overflow: scroll;
    flex-direction: column;
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    padding: 0px 16px 0px;
}

action {
    align-items: center;
    justify-content: center;
    display: flex;
}

.sizewhole {
    width: 100%;
    height: auto;
}

.sizehalf {
    width: 50%;
    height: auto;
}

.sizethird {
    width: calc(100%/3);
    height: auto;
}

.sizefourth {
    width: calc(100%/4);
    height: auto;
}

/* Status */

status {
    align-self: center;
}

status, .sold {
    color: var(--theme4);
}

status, .purchase {
    color: white;
}

/* Buttons */

button {
    padding-left: 24px;
    padding-right: 24px;
    height: 40px;
    border-radius: 20px;
    border: none;
    min-width: 108px;
    margin: 16px;
    transition-duration: 0.45s;
}

button:has(+status, .sold) {
    background-color: var(--theme2);
    border: 1px solid var(--theme4);
}

button:has(+status, .purchase) {
    background-color: var(--theme3);
}

button:has(+status, .purchase):hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

button:has(+status, .purchase):active {
    background-color: var(--theme4);
    transition-duration: 0.45s;
}