/* VARIABLES */
:root {
    /* color scheme */
    --Black: #000000;
    --White: #ffffff;
    --Red: #ff0000;
    --Blue: #00ccff;
    --LGrey: #cccccc;
    --Grey: #777777;
    --Grey: #333333;

    --Text: #333333;
    --Link: #2149b4;


    /* page vars */
    --page-background-color: var(--White);
    --block-color: var(--White);
}

body[theme='home'] {
    --primary-color: #0471AC;
    --accent-color: #F45885;
    --gradient-start: rgba(4, 113, 172, 1);
    --gradient-end: rgba(4, 113, 172, 0);
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--page-background-color);

    padding: 0px;
    margin: 0px;;
}

#header {
    position: sticky;
    top: 0;
    
    background-color: var(--White);
    
    height: 70px;
    
    filter: drop-shadow(0 0 0.2rem rgba(0,0,0,0.3));

    z-index: 1100;
}

.logo {
    position: absolute;
    top: 4;
    left: 18;

    border: none;
    
    width: 300px;
    height: auto;
}

#nav-wrapper {
    position: absolute;
    top: 20px;
    right: 20px;

    text-align: right;
}

#nav-wrapper a {
    cursor: pointer;
}

.flip-btn {

}

.menu-block {

}

.menu {
    position: 
    //background-image: url( ../to hamburger menu svg);
    background-repeat: no-repeat;
    background size: 20px;
    background position: 3, 2;
    width: 20px;
    height: 20px;
    margin: 5px;
    float: right;
    z-index: 100;
}

.menu-list {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    overflow: visible;
    background: var(--Blue);
    webkit-box-shadow: 1px, 2px, 4px, rgba(0,0,0,.3);
    box-shadow: 1px, 2px, 4px, rgba(0,0,0,.3);
}

.menu li {
    white-space: nowrap;
}

.menu li a {

}


#site-wrapper {
    width: 100%;
    height: 100%;
}

.grid-wrapper {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
    grid-template-rows: repeat(auto-fit);

    gap: 1px;

    max-width: 100%;
    margin: 20px auto 0px;
    padding: 20px;

    border: 0px solid #999999;
}

.grid-box {
    aspect-ratio: 1/1;
}

.grid-wrapper .grid-box .grid-item {
    width: 100%;
    aspect-ratio: 1/1;
    max-width: 100%;

	-webkit-transition: max-height 1.8s;
	-moz-transition: max-height 1.8s;
	transition: max-height 1.8s;
    perspective: 1000px;
}

.grid-box:nth-child(1) .grid-item {
}
.grid-box:nth-child(1) .grid-item .box-front {
    background-color: #ff8800;
}
.grid-box:nth-child(2) .grid-item {
}
.grid-box:nth-child(2) .grid-item .box-front {
    background-color: #fbff00;
}
.grid-box:nth-child(3) .grid-item {
}
.grid-box:nth-child(3) .grid-item .box-front {
    background-color: #5ff707;
}
.grid-box:nth-child(4) .grid-item {
}
.grid-box:nth-child(4) .grid-item .box-front {
    background-color: #07f8bc;
}
.grid-box:nth-child(5) .grid-item {
}
.grid-box:nth-child(5) .grid-item .box-front {
    background-color: #0ccbec;
}
.grid-box:nth-child(6) .grid-item {
}
.grid-box:nth-child(6) .grid-item .box-front {
    background-color: #0363f3;
}
.grid-box:nth-child(7) .grid-item {
}
.grid-box:nth-child(7) .grid-item .box-front {
    background-color: #1506f3;
}
.grid-box:nth-child(8) .grid-item {
}
.grid-box:nth-child(8) .grid-item .box-front {
    background-color: #6509f8;
}
.grid-box:nth-child(9) .grid-item {
}
.grid-box:nth-child(9) .grid-item .box-front {
    background-color: #af02ff;
}
.grid-box:nth-child(10) .grid-item {
}
.grid-box:nth-child(10) .grid-item .box-front {
    background-color: #f8078c;
}
.grid-box:nth-child(11) .grid-item {
}
.grid-box:nth-child(11) .grid-item .box-front {
    background-color: #d40000;
}

.grid-item:hover {
    position: absolute;
    xwidth: 350px !important;
    max-width: 16% !important;
    transform: translate( -20px, -20px );

    filter: drop-shadow(0 0 0.75rem #000000);

    z-index: 100;
}

.grid-item-abs {
    position: absolute;
    width: 300px !important;
    max-width: 300px !important;
    transform: translate( -50%, -50% );

    filter: drop-shadow(0 0 0.75rem #000000);

    z-index: 100;
}

.box-container {
    position: relative;
    width: 100%;
    height: 100%;

    transform-style: preserve-3d;
    transition: transform 0.5s;
    z-index: -200;
}

.box-container.flip {
    transform-style: preserve-3d;
    transform: rotateY(180deg);
}

.box-container img {
    width: 100%;
    aspect-ratio: 1/1;
}

.box-front, .box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;

    padding: 0px;
    z-index: -250;
}

.box-back {
    background-color: #524d42;
    transform-style: preserve-3d;
    transform: rotateY(180deg);
}

.box-circle {
    border: 3px solid #000000;
    border-radius: 50%;
    background-color: #ffffff;
    width: 100%;
    height: 100%;
}

.box-square {
    border: 3px solid #000000;
    background-color: #ffffffb7;
    width: 100%;
    height: 100%;
}

.label {
    position: absolute;
    bottom: 0;

    border-radius: 4px;
    background-color: rgba(255, 255, 255, .90);
    
    padding: 4px;
    margin: 5%;
    width: 90%;
    min-height: 20%;
}

.label a {
    position: relative;
    display: inline-block;

    border: 1px solid var(--LGrey);
    border-radius: 4px;

    text-decoration: none;
    color: var(--Text);

    padding: 4px;
    width: 100%
}

.label a:hover {
    border: 1px solid var(--Red);
}

.label p {
    margin: 2px auto;
    width: 65%;
}

.label p.title {
    font-size: large;
    font-weight: bold;
    text-align: center;
}

.label p.description {
    font-size: medium;
    text-align: center;
}

.label p.year {
    font-size: small;
    text-align: center;
}

.label span {
    position: absolute;
    top: 0;
    right: 0;

    font-size: small;

    width: 10%;
    height: 100%;
}

.label a:hover span {
    background-color: #c3dfff;
    color: var(--Link);
}

.label span p {
    position: absolute;
    top: 0;
    right: 0;

    font-size: smaller;
    writing-mode: vertical-rl;
    text-orientation: sideways-right;
    text-align: center;
    text-decoration: none;
    letter-spacing: 3px;

    transform: rotate(180deg);
    transform: translate( -40%, 0% );

    height: 100%;
}


@media only screen and (min-width: 2064px) {
    
    .grid-item:hover {
        position: absolute;
        xwidth: 400px !important;
        max-width: 14% !important;
    }
}


@media only screen and (max-width: 2063px) {
    
    .grid-item:hover {
        position: absolute;
        xwidth: 400px !important;
        max-width: 16% !important;
    }
}

@media only screen and (max-width: 1812px) {
    
    .grid-item:hover {
        position: absolute;
        xwidth: 400px !important;
        max-width: 18% !important;
    }
}


@media only screen and (max-width: 1561px) {
    
    .grid-item:hover {
        position: absolute;
        xwidth: 400px !important;
        max-width: 22% !important;
    }
}

/* Medium devices (landscape tablets, 1315px and up) */
@media only screen and (max-width: 1310px) {
    .grid-item-abs {
        width: 28% !important;
        max-width: 28% !important;
    }
    
    .grid-item:hover {
        position: absolute;
        xwidth: 400px !important;
        max-width: 28% !important;
    }
}

/* Small devices (portrait tablets and large phones, 1050px and up) */
@media only screen and (max-width: 1059px) {
    .grid-item-abs {
        width: 35% !important;
        max-width: 35% !important;
    }
    
    .grid-item:hover {
        position: absolute;
        xwidth: 400px !important;
        max-width: 36% !important;
    }
}

/* Small devices (phones, 810px and down) */
@media only screen and (max-width: 808px) {
    .grid-item-abs {
        width: 50% !important;
        max-width: 50% !important;
    }
    
    .grid-item:hover {
        position: absolute;
        xwidth: 400px !important;
        max-width: 53% !important;
    }

    .label {
        min-height: 15%;
    }
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 557px) {
    .grid-item-abs {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .grid-item:hover {
        position: absolute;
        xwidth: 550px !important;
        max-width: 100% !important;
    }

    .label {
        min-height: 10%;
    }
}