@media (prefers-color-scheme: light) {
    :root {
    --main-color: 0,89,76;
    --main-bg-color: 255, 243, 233;
    --main-alt-color: 166,255,241;
    --main-accent-alt-color: 229,171,110;
    --main-text-color: 2, 15, 20;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
    --main-color: 166,255,241;
    --main-bg-color: 2, 15, 20;
    --main-alt-color: 0,89,76;
    --main-accent-alt-color: 229,171,110;
    --main-text-color: 255, 243, 233;
    }
}

.fadein {
    opacity: 0;
    -moz-transition: opacity 0.7s;
    -webkit-transition: opacity 0.7s;
    -o-transition: opacity 0.7s;
    transition: opacity 0.7s;
}

body.fadein.loaded {
    opacity: 1;
}

html, body {
    margin: 0;
    padding: 0;
    background: rgb(var(--main-bg-color))
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Teko', Teko, sans-serif;
    color: rgb(var(--main-color));
}

a {
    color: rgb(var(--main-text-color));
}

p {
    font-family: 'Maitree', Maitree, serif;
    font-size: larger;
    text-align: justify;
    color: rgb(var(--main-text-color));
}

.summary {
    margin: 2em;
}

.grid {
    margin: 2em;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(24rem, 0.5fr));
    gap: 2rem;
}

@media only screen and (min-width: 1921px) {
    .grid, .summary {
        max-width: 1920px;
        align-content: center;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

.card-detail-overlay {
    display: none;
    background: rgba(var(--main-color), 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: fixed;
    overflow-y: scroll;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}

.card-detail {
    margin: 2rem;
    padding: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    background: rgb(var(--main-bg-color));
}

.card-detail svg {
    flex-basis: 0;
    flex-grow: 5;
    min-inline-size: 60%;
}

.btn {
    transition: all 0.3s ease;
    opacity: 0.3;
    transform-origin:  50% 50%;
    transform-box: content-box;
}

.btn:hover {
    scale: 1.1;
    opacity: 0.9;
}

.btn:active {
    scale: 0.9;
    opacity: 0.2;
}

@media only screen and (max-width: 1023px) {
    .grid .card svg rect {
        display: none;
    }

    .grid .card:nth-child(odd) svg {
        border-radius: 10% 22.5%;
    }
    
    .grid .card:nth-child(even) svg {
        border-radius: 22.5% 10%;
    }

    .btn {
        transition: all 0.3s ease;
        opacity: 0.3;
        transform-origin:  50% 50%;
        transform-box: content-box;
        scale: 2;
    }

    .btn:hover {
        scale: 2.1;
        opacity: 0.9;
    }
    
    .btn:active {
        scale: 1.9;
        opacity: 0.2;
    }
    
}

@media only screen and (min-width: 1024px) {
    .grid .card svg {
        transform-origin: 50% 50%;
        transition: all 0.7s;
    }
    
    .grid .card svg:hover {
        scale: 1.1;
    }
    
    .grid .card svg g {
        filter: saturate(1.0);
        transition: all 0.7s;
    }
    .grid .card svg:hover g {
        filter: saturate(0.0);
    }
    
    .grid .card:nth-child(odd) svg image {
        mask: url(#imgMask);
    }
    
    .grid .card:nth-child(even) svg image {
        mask: url(#imgMaskAlt);
    }
    
    .grid .card svg rect {
        transition: all 0.7s;
        fill: url(#bg);
        fill-opacity: 0.0;
    }
    .grid .card svg:hover rect {
        fill-opacity: 0.65;
    }
    
    .grid .card:nth-child(odd) svg rect {
        mask: url(#imgMask);
    }
    
    .grid .card:nth-child(even) svg rect {
        mask: url(#imgMaskAlt);
    }

    .card-detail svg .btn {
        display: none;
    }

    .card-detail svg:hover .btn {
        display: block;
    }
}

.card-detail-desc {
    text-align: justify;
    flex-basis: 20rem;
    flex-grow: 1;
    background: rgb(var(--main-bg-color));
}

.corner-btn {
    display: block;
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 5rem;
    height: 5rem;
    overflow: visible;
}

.title-overlay {
    font-family: 'Teko', Teko, sans-serif;
    font-weight: 900;
    font-size: 1.5em;
    text-shadow: 0 0 0.8em rgb(var(--main-text-color));
}

.grad1 {
    stop-color: rgb(var(--main-alt-color));
}

.grad2 {
    stop-color: rgb(var(--main-accent-alt-color));
}

.main-color {
    fill: rgb(var(--main-color));
}

.main-alt-color {
    fill: rgb(var(--main-alt-color));
}

.main-accent-alt-color {
    fill: rgb(var(--main-accent-alt-color));
}

.main-bg-color {
    fill: rgb(var(--main-bg-color));
}

.main-text-color {
    fill: rgb(var(--main-text-color));
}

.main-stroke {
    fill: transparent;
    stroke: rgb(var(--main-color));
    stroke-width: 1.5;
    stroke-linecap: round;
}

.page-btn {
    transition: all 0.25s;
    opacity: 0.5;
    stroke: rgb(var(--main-bg-color));
    stroke-width: 0.66;
}

.page-btn:hover {
    opacity: 0.9;
}

.stop-scrolling {
    height: 100%;
    overflow: hidden;
}