style.css

@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
    font-family: 'gang-of-three';
    src: url('fonts/go3v2.ttf') format('truetype');
}

@font-face {
    font-family: 'lemon-milk';
    src: url('fonts/LEMONMILK-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'helvetica-neue';
    src: url('fonts/HelveticaNeueBlack.otf') format('opentype');
}

:root {


    --background-color: white;

    --text-color: black;
    --text-color-semi-transparent: rgba(0, 0, 0, 0.5);
    --text-color-transparent: rgba(0, 0, 0, 0);
    --select-color: var(--surface-low-color);

    --primary-color: #2481eb;
    --primary-overlay: brightness(0) saturate(100%) invert(40%) sepia(26%) saturate(5343%) hue-rotate(197deg) brightness(99%) contrast(87%);
    --primary-text-color: white;

    --secondary-color: rgb(159, 187, 236);
    --secondary-text-color: black;

    --surface-low-color: hsl(208, 60%, 95%);
    --surface-color: hsl(215, 28%, 87%);
    --surface-higher-color: hsl(216, 24%, 70%);
    --surface-high-color: hsl(216, 21%, 59%);
    --surface-highest-color: hsl(216, 20%, 47%);

    --outline-color: rgba(0, 0, 0, 0.75);
    --outline-alpha: 0.75;

    --surface-text-color: black;

    --hover-background-color: rgba(0, 0, 0, 0.1);
    --click-background-color: rgba(0, 0, 0, 0.2);

    --dark-hover-background-color: rgba(255, 255, 255, 0.1);
    --dark-click-background-color: rgba(255, 255, 255, 0.2);
    --dark-backdrop-color: rgba(0, 0, 0, 0.75);

    --box-shadow: 0px 1px 3.33px rgba(0, 0, 0, 0.33);

    --dark-primary-color: #6eb9f5;
    --dark-outline-color: rgba(255, 255, 255, 0.75);
    --dark-primary-overlay: brightness(0) saturate(100%) invert(72%) sepia(14%) saturate(3999%) hue-rotate(180deg) brightness(103%) contrast(92%);

    --white-overlay: invert(0%);
    --black-overlay: invert(100%);


    --hover-brightness: brightness(115%);
    --click-brightness: brightness(130%);

    --hover-brightness-inverse: brightness(85%);
    --click-brightness-inverse: brightness(70%);

    --hover-brightness-inverse-value: 85%;
    --click-brightness-inverse-value: 70%;

    --dark-hover-brightness: brightness(85%);
    --dark-click-brightness: brightness(70%);



    --border: var(--border-size) solid var(--outline-color);

    --page-width: 1200px;
    --scroll-bar-size: 10px;


    --page-padding: 20px;

    --text-margin: 10px;

    --toolbar-height: 80px;
    --toolbar-small-height: 60px;

    --tab-height: 52px;
    --tab-small-height: 41px;

    --arrow-height: 50px;

    --button-padding-vertical: 10px;
    --button-padding-horizontal: 20px;
    --button-padding: var(--button-padding-vertical) var(--button-padding-horizontal);
    --button-padding-with-outline: 9px 19px;

    --chip-corner-radius: 7.5px;
    --chip-padding: 8px 14px;

    --container-margin: 15px;
    --container-small-margin: 5px;

    --border-size: 1px;
    --border-radius: 10px;

    --middle-space: 30px;
    --big-space: 50px;

    --semibold: 500;

    --transition-speed: 100ms;
    --transition-fast-speed: 50ms;


}

#icon-moon {
    display: flex;
}

#icon-sun {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root {

        --background-color: rgb(11, 17, 22);
        --select-color: white;
        --text-color: white;
        --text-color-semi-transparent: rgba(255, 255, 255, 0.5);
        --text-color-transparent: rgba(255, 255, 255, 0);

        --primary-color: #6eb9f5;
        --primary-overlay: brightness(0) saturate(100%) invert(72%) sepia(14%) saturate(3999%) hue-rotate(180deg) brightness(103%) contrast(92%);

        --primary-text-color: black;

        --secondary-color: rgb(78, 88, 117);
        --secondary-text-color: white;

        --surface-low-color: rgb(26, 31, 36);
        --surface-color: rgb(31, 37, 43);
        --surface-higher-color: rgb(48, 58, 66);
        --surface-high-color: rgb(53, 70, 85);
        --surface-highest-color: rgb(61, 83, 100);

        --outline-color: rgba(255, 255, 255, 0.75);

        --surface-text-color: white;

        --white-overlay: invert(98%) sepia(0%) saturate(879%) hue-rotate(159deg) brightness(111%) contrast(100%);
        --black-overlay: invert(0%);

        --hover-brightness: brightness(85%);
        --click-brightness: brightness(70%);

        --hover-brightness-inverse: brightness(115%);
        --click-brightness-inverse: brightness(130%);

        --hover-brightness-inverse-value: 115%;
        --click-brightness-inverse-value: 130%;

        --hover-background-color: rgba(255, 255, 255, 0.1);
        --click-background-color: rgba(255, 255, 255, 0.2);
    }


    #icon-moon {
        display: none;
    }

    #icon-sun {
        display: flex;
    }
}


* {
    -webkit-tap-highlight-color: transparent;
}

.tooltip {
    position: relative;
    z-index: 99999 !important;
}

.tooltiptext {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s;
    z-index: 99999 !important;
    top: 100%;

    margin-top: 5px;

    font-size: medium !important;
    visibility: hidden;
    background-color: var(--text-color);
    color: var(--primary-text-color);

    padding: var(--text-margin) var(--container-margin);
    border-radius: 5px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.tooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent var(--text-color) transparent;
}

.tooltiptext ul {
    padding-left: 20px !important;
    text-align: left !important;
}

div:not(.main-content, .main-scroll-area) {
    font-size: 0px;
}

li,
ul {
    font-size: medium;
}

div.list {
    display: flex;
    gap: var(--container-margin);
    flex-wrap: wrap;
    margin-top: var(--container-margin);
    margin-bottom: var(--container-margin);
}

html,
body,
div {
    scroll-behavior: smooth;
}

dialog {
    opacity: 0;
    transform: scale(0.9, 0.9);
    transition:
        transform var(--transition-speed) cubic-bezier(0.075, 0.82, 0.165, 1),
        opacity var(--transition-speed) cubic-bezier(0.075, 0.82, 0.165, 1);

}

dialog:open {
    background-color: var(--background-color);
    border-radius: var(--border-radius);
    border: none;
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    color: var(--text-color);
    opacity: 1;
    transform: scale(1, 1);
}

@starting-style {
    dialog:open {
        opacity: 0;
        transform: scale(0.9, 0.9);
    }
}

dialog::backdrop {
    opacity: 0;
    transition:
        display var(--transition-speed) allow-discrete,
        overlay var(--transition-speed) allow-discrete,
        opacity var(--transition-speed) cubic-bezier(0.075, 0.82, 0.165, 1);
}

dialog:open::backdrop {
    opacity: 1;
    background-color: var(--dark-backdrop-color);
}

@starting-style {
    dialog:open::backdrop {
        opacity: 0;
    }
}

body {
    background-color: var(--surface-color);
    color: var(--text-color);

    height: 100%;
    width: 100%;
    position: fixed;

    padding: 0;
    margin: 0;

    font-family: 'Rubik', sans-serif;

    overflow: hidden;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

@media (min-width: 547px) {

    ::-webkit-scrollbar {
        width: var(--scroll-bar-size);
        height: var(--scroll-bar-size);

        background-color: var(--surface-color);

        box-shadow: var(--box-shadow);
    }

    ::-webkit-scrollbar-thumb {
        min-height: var(--scroll-bar-size);

        background-color: var(--surface-higher-color);
        border-radius: var(--scroll-bar-size);

        box-shadow: var(--box-shadow);
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--surface-high-color);
    }

    ::-webkit-scrollbar-thumb:active {
        background-color: var(--surface-highest-color);
    }

}

p {
    font-size: medium;
}

p,
h1,
h2,
h3,
h4 {
    margin: 0px;
    padding: var(--container-small-margin);
}

h1 {
    font-size: xx-large;
}

h2 {
    font-size: x-large;
}

h3 {
    margin-bottom: var(--text-margin);
    margin-top: var(--big-space);
    font-weight: var(--semibold);
    font-size: x-large;
}

h4 {
    margin-top: var(--text-margin);
    font-weight: var(--semibold);
    font-size: large !important;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    width: fit-content;
    height: fit-content;
}

a:visited {
    color: var(--secondary-color);
}

a:hover {
    text-decoration: underline;
}

.margin-on-size {
    margin-right: 25px;
}

ul {
    margin-top: 0px;
    margin-bottom: 0px;
}

img,
iframe {
    border: 0px;
    border-radius: var(--border-radius);
}

div {
    align-self: flex-start;
}

.notbold {
    font-weight: normal
}


button,
.button,
.primary {
    cursor: pointer;

    margin-bottom: 0px !important;

    width: fit-content;

    border-radius: 9999px;

    text-align: center;
    text-decoration: none !important;
    display: inline-block;

    font-size: medium;
}

button img,
.button img,
.primary img {
    height: 20px !important;
    width: auto;
    margin-top: -5px;
    margin-bottom: -5px;
    margin-right: -5px;
    margin-left: 5px;
}

.button.dark {
    border-color: var(--dark-outline-color) !important;
    color: var(--dark-primary-color) !important;
}

.button.dark>img {
    filter: var(--dark-primary-overlay);
}

.button img {
    filter: var(--primary-overlay);
}

.primary img {
    filter: var(--white-overlay);
}


.button.singular,
.primary.singular,
button.singular {
    margin-top: var(--container-margin) !important;
    margin-bottom: var(--container-margin) !important;
}

.floating-button {
    bottom: 0px;
    margin-right: var(--container-margin);
    margin-bottom: var(--container-margin);
    z-index: 9999;
    position: absolute;
    right: 0px;
}

button,
.button {
    transition: background-color var(--transition-speed);
    background-color: transparent;
    border: var(--border);
    color: var(--primary-color) !important;
    padding: var(--button-padding-with-outline);
}

.dialog-header {
    display: flex;
    flex-direction: row;

    width: 100%;
    margin-bottom: var(--container-margin);
    align-items: center;
}

.dialog-header>img {
    height: 40px !important;
    width: 40px !important;
    margin-left: var(--container-small-margin) !important;
    margin-right: var(--text-margin) !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;

}

.dialog-header>h3 {
    margin-bottom: 0px !important;
    margin-top: 0px !important;
}

.dialog-header>button {

    border: none;
    margin-left: auto !important;
    padding: var(--button-padding-vertical);
    margin-bottom: 0px !important;
    margin-top: 0px !important;
    margin-right: 0px !important;
    width: 50px;
    height: 50px;

}

.dialog-header>button>img {
    height: 30px !important;
    width: 30px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    filter: var(--black-overlay);

}

dialog>.cards.vertical>a {
    width: 100% !important;

}

dialog>.cards.vertical>a>div {
    justify-content: flex-start !important;
}

dialog>.cards.vertical>a>div>img {
    border-radius: 50% !important;
}

button:hover,
.button:hover {
    background-color: var(--hover-background-color) !important;
}

button.dark:active,
.button.dark:active {
    background-color: var(--dark-click-background-color) !important;
}

button.dark:hover,
.button.dark:hover {
    background-color: var(--dark-hover-background-color);
}

button:active,
.button:active {
    background-color: var(--click-background-color) !important;
}

.primary,
.secondary {
    transition: filter var(--transition-speed);
    border: none;
    padding: var(--button-padding);
}

.primary {
    background-color: var(--primary-color) !important;
    color: var(--primary-text-color) !important;
}

.secondary {
    background-color: var(--secondary-color) !important;
    color: var(--secondary-text-color) !important;
}

.primary:hover,
.secondary:hover,
button.owl-next:hover,
button.owl-prev:hover {
    filter: var(--hover-brightness);
}

.primary:active,
.secondary:active,
button.owl-next:active,
button.owl-prev:active {
    filter: var(--click-brightness);
}

.chip-group {
    display: flex;
    margin: 0;
    padding: 0;
    overflow: hidden;
    flex-wrap: wrap;

}

.chip-group>a,
.chip-group>button {
    transition: all var(--transition-speed);
    border: var(--border);
    color: var(--outline-color) !important;
    border-radius: var(--chip-corner-radius);
    margin: var(--container-small-margin) !important;
    display: block;
    text-align: center;
    padding: var(--chip-padding) !important;
    text-decoration: none;
    font-size: small !important;
}

.chip-group>a {
    height: 15px;

}

.chip-group>button {
    height: 33px;
}

.chip-group img {
    margin-left: calc(var(--container-small-margin) * -1) !important;
    margin-right: var(--text-margin);
    opacity: var(--outline-alpha);
    border-radius: 0px !important;
    height: 15px !important;
    width: auto !important;
    vertical-align: middle;
    filter: var(--black-overlay);

}

.chip-group>a img {
    margin-bottom: 1px !important;
}

.chip-group>button img {
    translate: 0px -1px;
}

.chip-group>a:hover {
    background-color: var(--hover-background-color);
}

.chip-group>a:active {
    background-color: var(--click-background-color);
}

.toolbar {
    padding-left: var(--container-margin);
    padding-right: var(--container-margin);
    height: var(--toolbar-height);
}

.toolbar>h1 {
    color: var(--primary-color) !important;
}

.toolbar:hover {
    text-decoration: none !important;
}

#logo {
    filter: var(--primary-overlay);
}

.toolbar img {
    width: auto;
    height: 50px;
    margin-right: 20px;
}

.layout-horizontal {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.banner-foreground {
    display: flex !important;
    position: absolute;
    z-index: 10;
    height: 100% !important;
    min-width: 0px !important;
    align-items: stretch !important;
    justify-content: space-evenly !important;
}

.banner-foreground>div.image-container {

    display: flex !important;
    margin-left: 25px;
    margin-right: 100px;
    align-self: stretch;
    min-width: 0px;
    height: calc(100% - 100px);

    animation-name: floatFromRight;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);

}

.img-group {
    flex: 1;
    display: flex;
    align-content: space-evenly;
}



.img-group>img:nth-child(2) {
    flex: 3;
    width: 1% !important;
    display: flex;
    object-fit: cover;
    border-radius: 0px;
    z-index: 2;
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.66);
}

.img-group>img,
.img-group>img:last-child {
    flex: 2;
    width: 1% !important;
    display: flex;
    object-fit: cover;
    border-radius: 0px;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.66);

}

@keyframes floatFromRight {
    0% {
        transform: translate(125px, 0px);
        opacity: 0;
    }

    100% {
        transform: translate(0px, 0px);
        opacity: 1;
    }
}

@keyframes floatFromLeft {
    0% {
        transform: translate(-125px, 0px);
        opacity: 0;
    }

    100% {
        transform: translate(0px, 0px);
        opacity: 1;
    }
}

.banner-foreground>div.image-container>img {


    min-width: 0px;
    width: unset !important;
    object-fit: contain;
}

.banner-foreground.jesus>div.image-container>img {
    object-position: bottom;
}


.banner-foreground>div:not(.image-container) {

    margin-right: 25px;
    margin-left: 100px;
    align-self: center;
    color: white;
    min-width: 0px;

    animation-name: floatFromLeft;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.banner-foreground.jesus>div:not(.image-container) {

    margin-top: var(--container-margin);
    margin-bottom: var(--container-margin);
}

.banner-foreground.jesus>div.image-container {
    height: unset !important;
}

.banner-foreground>div {

    margin-top: 50px;

    margin-bottom: 50px;
}

.banner-foreground.jesus>div {

    margin-top: 0px;

    margin-bottom: 0px;
}

.banner-foreground h1 {
    font-size: 50px;
}

.banner-foreground h2 {

    font-size: 30px;
    font-weight: unset;

}

.banner-foreground h1,
.banner-foreground h2 {

    text-shadow: var(--box-shadow);

}

.vertical-image {
    width: 200px;
    max-width: 200px;
    margin-bottom: auto;
}

.vertical-image,
.large-image,
.medium-image {
    margin-right: 25px;

}

.large-image,
.medium-image {
    max-width: 300px;
    width: 300px;
    max-height: 300px;
    height: 300px;
    min-width: auto;
    border-radius: 25px;
    display: block;

    align-self: flex-start;
    object-fit: cover;
}

.medium-image {
    width: 200px;
    height: 200px;
    max-width: 200px;
    max-height: 200px;
}

.large-image-container>img:not(.large-image) {
    width: 300px;
    height: auto;
}

.large-image-container {

    font-size: 0;
    display: block;
    align-self: self-start;
}

.flex-flow {
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-self: center;
    justify-content: center;
}




.larger-image {
    display: flex !important;
    align-self: stretch !important;
    flex: 1;
    width: 0px;
    height: 400px;
    margin-right: 0;
}

.align-center {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    justify-content: center;
}

.arrow-container {
    display: block;
    width: 100%;
    height: 50px !important;
    position: relative;
    transition: background-color var(--transition-speed);
}

a.arrow-container>.circle {
    margin-left: auto;
    margin-right: auto;
    width: 60px;
    height: 60px;
    translate: 0px -5px;
    border-radius: 50%;
    background-color: transparent;
    transition: background-color var(--transition-speed);
}

a.arrow-container:hover>.circle {
    background-color: var(--hover-background-color);
}

a.arrow-container:active>.circle {
    background-color: var(--click-background-color);
}

.arrow {

    width: 50px;
    height: 50px;
    filter: var(--white-overlay);
    animation-name: floating;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    position: absolute;
    top: 0;
    left: calc(50% - 25px);
}

.arrow-bg {

    width: 50px;
    height: 50px;
    animation-name: pulsing;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    border-radius: 100%;
    position: absolute;
    top: 0;
    left: calc(50% - 25px);
    filter: blur(5px);
}

@keyframes pulsing {
    0% {
        transform: scale(0);
        background-color: var(--text-color-semi-transparent);

    }

    50% {
        transform: scale(1.25);
        background-color: var(--text-color-transparent);

    }
}

@keyframes floating {
    0% {
        transform: translate(0, -5px);
    }

    50% {
        transform: translate(0, 5px);
    }

    100% {
        transform: translate(0, -5px);
    }
}

.webbar {
    display: flex;
    background-color: var(--surface-color);
    max-width: 100vw !important;
    width: 100vw !important;
    box-shadow: var(--box-shadow);
    z-index: 100;

}

.bottombar {

    background-color: var(--surface-low-color);
}

.bottombar>div {
    margin: auto;
    max-width: var(--page-width);
    padding: var(--container-small-margin);
    color: var(--outline-color);

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bottombar>div>* {

    font-size: small !important;
}

.bottombar>div>a {

    text-wrap: balance;
    padding: var(--container-small-margin);
    max-lines: 2;
    text-align: right;

}

.webbar>div {

    margin: auto;
    display: flex;
    max-width: var(--page-width);
    width: unset !important;
    flex: 1;
    padding-left: calc(var(--toolbar-height) - var(--button-padding-vertical) + var(--text-margin));
}

#theme {
    display: flex;
    height: calc(var(--toolbar-height) - (var(--text-margin) + var(--button-padding-vertical))* 2);
    width: calc(var(--toolbar-height) - (var(--text-margin) + var(--button-padding-vertical)) * 2);
    padding: var(--button-padding-vertical);
    margin-left: var(--text-margin) !important;
    margin-top: var(--text-margin) !important;
    margin-bottom: var(--text-margin) !important;
    border-radius: 100%;
    transition: background-color, var(--transition-speed);
    margin-right: calc(var(--text-margin) * 2);

}

#theme:hover {
    background-color: var(--hover-background-color);
}

#theme:active {
    background-color: var(--click-background-color);
}



#icon-moon,
#icon-sun {

    flex: 1;
    height: auto;
    width: auto;
}

.main-content {

    margin: auto;
    max-width: var(--page-width);
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 20px !important;
    min-height: calc(100dvh - var(--toolbar-height) - var(--page-padding)*2 - var(--container-margin)*2);
}

.icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-right: 25px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.main-scroll-area {
    background-color: var(--background-color);
    overflow-y: scroll;
    height: calc(100dvh - var(--toolbar-height));
    width: 100%;
}

.banner {
    height: calc(100dvh - var(--toolbar-height) - var(--arrow-height));
    overflow: hidden;
    width: 100%;
}


.banner,
.banner>img {
    position: relative;
    border-radius: 0px;
}

.banner>img,
.banner.jesus>img {
    height: calc(100dvh - var(--toolbar-height) - var(--arrow-height) + 4vh);
    object-fit: cover;
    filter: brightness(50%) blur(1vh);
    margin-left: -3vh;
    margin-right: -3vh;
    margin-top: -3vh;
    margin-bottom: -3vh;
    width: calc(100vw + 4vh);
}

.banner.jesus>img {
    filter: brightness(80%) blur(0.5vh);

}


.direction-on-size-3,
.direction-on-size {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    min-width: 0px;
}

.tab-layout {
    align-self: stretch;
    flex: 1;
    justify-content: end;
}

.tab {
        transition: all 200ms;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    padding-left: var(--container-margin);
    padding-right: var(--container-margin);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: large;
    width: fit-content;
    min-height: 100%;
    background:
        linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
        linear-gradient(to right, var(--primary-color), var(--primary-color), var(--primary-color));
    background-size: 100% 2px, 0 2px;
    background-position: 100% 100%, 50% 100%;
    background-repeat: no-repeat;

    color: var(--tolbar-text-color) !important;
    text-decoration: none !important;
}


.tab.selected {
    background-size: 0 2px, 100% 2px;
    
    color: var(--primary-color) !important;

}

.tab.inside{
 
    color: var(--text-color) !important;
    background:
        linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
        linear-gradient(to right, var(--text-color), var(--text-color), var(--text-color));
    background-size: 100% 2px, 0 2px;
    background-position: 100% 100%, 50% 100%;
    background-repeat: no-repeat;
   background-size: 0 2px, 100% 2px;
}

.tab:hover {
    background-color: var(--surface-higher-color);
    box-shadow: var(--box-shadow);
    
}



.tab:active,
.tab.inside:active {
    color: var(--primary-color) !important;
    background-size: 0 2px, 75% 2px;
}

.tab.inside:active {
    

        background:
        linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
        linear-gradient(to right, var(--primary-color), var(--primary-color), var(--primary-color));
    background-size: 0 2px, 75% 2px;
    background-position: 100% 100%, 50% 100%;
    background-repeat: no-repeat;
       background-color: var(--surface-higher-color);
}



.navigationbar-div {
    display: none;
}

.include-my-head {
    margin-top: 34.55px !important;
}

.personal-border {
    font-size: medium !important;
    font-weight: 500;
    margin-top: var(--big-space);
    margin-bottom: var(--big-space);
    display: flex;
    align-items: center;
    text-align: center;
    width: 100%;
    color: var(--outline-color);
}

.personal-border::before,
.personal-border::after {
    content: "";
    flex: 1;
    border-bottom: 2px solid var(--outline-color);
}

.personal-border:not(:empty)::before {
    margin-right: .75em;
}

.personal-border:not(:empty)::after {
    margin-left: .75em;
}

.cards,
.image-cards {
    display: flex;
    justify-self: stretch;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: stretch;
    gap: var(--container-margin);
}

.cards.vertical {
    flex-direction: column !important;
}

.cards>a {
    display: flex;
    flex: 1;
    color: var(--text-color) !important;
    text-decoration: none !important;
    transition: filter var(--transition-speed);
}

.cards>a>div,
.cards>div,
.image-cards>div {
    align-items: center;
    display: flex;

    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    border-radius: var(--border-radius);
    flex: 1;
}

.cards>a>div,
.cards>div {

    background-color: var(--surface-low-color);

    padding: var(--container-margin);

}

.image-cards:not(.direction-on-size)>div {

    min-width: 333.33px;

}

.summary-container.center h2,
.summary-container.center p {
    color: var(--text-color);
    z-index: 3;
}

.cards div p {
    height: min-content;
    font-size: large;
    white-space: nowrap
}

.cards div img {
    margin-right: var(--container-margin);
    height: 35px;
    width: 35px;
    border-radius: 0px;
}

img {
    width: 400px;
    height: auto;
}

.indicator>img,
.white-icon {
    filter: var(--black-overlay);
}

.black-icon {
    filter: var(--white-overlay);
}

#me {
    cursor: pointer;
}


.summary-container {
    background-color: var(--surface-low-color);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    height: 300px;
    transition: border var(--transition-speed);


    border-radius: var(--border-radius);
    color: white;
    border: 0px solid white;
    box-sizing: border-box;

}

div:not(.image-cards)>div>.summary-container {

    margin-right: 7.5px !important;
    margin-left: 7.5px !important;


}

div.image-cards>div {
    flex: 1;
}

.owl-carousel,
.owl-carousel .summary-container {
    cursor: grab;

    width: auto;

}

.direction-on-size>.video-carousel {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
}


.owl-carousel .owl-item>.summary-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.featured-video {
    display: inline-block;
    position: relative;
}

.video-title {
    background-color: rgba(0, 0, 0, 0.65);
    border-radius: calc(var(--border-radius) / 2);
    color: white;
    font-weight: 500;
    left: 12px;
    margin: 0;
    padding: 6px 10px;
    position: absolute;
    top: 12px;
    pointer-events: none;
    z-index: 1;
    font-size: medium !important;
}

video{ 
    border-radius: var(--border-radius);   
    display: block;
    height: 300px;
    aspect-ratio: 16/9;
}



.image-cards .summary-container {

    width: 100%;
}

p.carousel-title {
    font-weight: 500;
    margin-top: 10px;
}

p.status {
    top: 10px;
    right: 10px;
    font-size: small;
    padding: var(--chip-padding) !important;


    height: min-content;
    width: fit-content !important;
    border-radius: var(--chip-corner-radius) !important;
    box-shadow: var(--box-shadow);
}

div.status-container {
    gap: 10px;
    display: flex;
    position: absolute;
    left: 5px;
    bottom: -5px;
    align-self: flex-end;
    z-index: 4;
    flex-direction: row;
}

.status.year {
    background: var(--surface-low-color);
    color: var(--text-color);
}

.status.wip {
    background: rgb(218, 132, 20) !important;
}

.status.maintained {

    background: rgb(16, 175, 64) !important;
}

.status.abandoned {

    background: rgb(155, 13, 160) !important;
}

.status.executed {

    background: rgb(0, 168, 190) !important;
}

.summary-container:visited {
    color: white;

}

img.background{
        transition: filter var(--transition-speed);
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(33%) blur(25px) ;
    z-index: 0;
    transform: scale(1.33);

}

a.summary-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid transparent;
    border-radius: var(--border-radius);
    pointer-events: none;
    z-index: 4;
    transition: border-width var(--transition-speed);
    transition: border var(--transition-speed);
}

a.summary-container:hover::before {
    border: 0 solid var(--select-color);
    border-width: 2.5px;
}

a.summary-container:hover {
    background-color: var(--select-color);


}

a.summary-container:hover img:not(.background) {
    filter: var(--hover-brightness-inverse);

}

a.summary-container.dark::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: var(--border-radius);
  pointer-events: none;
  z-index: 2;
}

a.summary-container:hover img.background{
  filter: brightness(calc(33% + (var(--hover-brightness-inverse-value) - 100%))) blur(25px);
}

a.summary-container:active::before {
    border: 0 solid var(--select-color);
    border-width: 5px;
}

a.summary-container:active {
    background-color: var(--select-color);


}

a.summary-container:active img:not(.background) {
    filter: var(--click-brightness-inverse);
}

a.summary-container:active img.background{
  filter: brightness(calc(33% + (var(--click-brightness-inverse-value) - 100%))) blur(25px);
}


.summary-container>img {
    border-radius: var(--border-radius);
    z-index: 1;
}

a.summary-container img{
    transition-property: scale, transform, filter;
    transition-duration: var(--transition-speed);
}

a.summary-container .img-group > img:not(.ignore):first-child,
a.summary-container .img-group > img:not(.ignore):last-child {

    scale: 1.06;
     z-index: 2;
}

a.summary-container:hover .img-group > img:not(.ignore):first-child,
a.summary-container:hover .img-group > img:not(.ignore):last-child {
    scale: 1.03;
}

a.summary-container:active .img-group > img:not(.ignore):first-child,
a.summary-container:active .img-group > img:not(.ignore):last-child {
    scale: 1;
}

a.summary-container:hover .img-group img:not(.ignore):first-child {
    transform: translateX(2.5px);
}

a.summary-container:active .img-group img:not(.ignore):first-child {

    transform: translateX(5px);
}

a.summary-container:hover .img-group img:not(.ignore):last-child {
    transform: translateX(-2.5px);
}

a.summary-container:active .img-group img:not(.ignore):last-child {

    transform: translateX(-5px);
}

a.summary-container .img-group > img:not(.ignore):nth-child(2){

    scale: 1.0;
}

a.summary-container .img-group > img:not(.ignore):nth-child(2),
a.summary-container > img:first-child,
a.summary-container > img:nth-child(3) {

    z-index: 3;
}


a.summary-container > img {

    scale: 1.02;

}

a.summary-container:hover .img-group > img:not(.ignore):nth-child(2){
    scale: 0.99;
}
a.summary-container:hover > img {
    scale: 1;
}

a.summary-container:active .img-group > img:not(.ignore):nth-child(2){
    scale: 0.98;
}
a.summary-container:active > img {
    scale: 0.98;

}



a.summary-container:hover>img {
    border-radius: 7.5px;

}

a.summary-container:active>img {
    border-radius: 5px;
}

.cards>a:hover {
    filter: var(--dark-hover-brightness);

}

.cards>a:active {
    filter: var(--dark-click-brightness);
}


.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {


    position: absolute;
    top: calc(50% - 47px / 2);

}

b {
    font-weight: 500;
}

.owl-carousel .owl-nav button.owl-prev span,
.owl-carousel .owl-nav button.owl-next span {
    margin-top: 0px !important;
    font-size: 40px !important;
    font-weight: 300;
    padding-left: 16.46px;
    padding-right: 16.46px;
    color: var(--secondary-text-color) !important;
    background-color: var(--secondary-color);

    border-radius: 100px;
    box-shadow: var(--box-shadow);

}

.summary-container>div:not(.img-group),
.summary-container>h2,
.summary-container>h3,
.summary-container>p {
    position: absolute;

    bottom: 0px;
    background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0));
    padding: var(--page-padding) var(--container-margin) var(--container-margin) var(--container-margin);
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    margin-bottom: 0px;
    box-sizing: border-box;
    width: 100%;
    z-index: 3;
}

.summary-container>h3 {
    text-align: center;
    font-size: large;
    padding-top: var(--big-space) !important;
    z-index: 3;
}

a.summary-container>img:last-child {
    position: absolute;
    width: 75px;
    height: auto;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.summary-container.jesus>p {


    padding-top: var(--big-space) !important;
}

.summary-container.center>div,
.summary-container.center>h2 {

    padding: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center !important;
    background: none !important;
}

.summary-container>h2 {
    width: 100%;
}


.summary-container p,
.summary-container h2 {

    text-align: center;

}

.summary-container h2 {

    text-shadow: var(--box-shadow);

}

.summary-container>img,
.summary-container iframe,
.summary-container>a {
    height: 100%;
    width: 100%;
}

.summary-container>img,
img.summary-container {
    object-fit: cover;
}

img.keep-aspect-ratio {
    object-fit: contain !important;
}

button.owl-prev {
    margin-left: -16.46px;
}


button.owl-next {
    right: 0px;
    margin-right: -16.46px;
}

button.owl-prev,
button.owl-next {

    transition: margin var(--transition-speed), filter var(--transition-speed);

}

.interactible-panel{
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    --padding-size: calc((100dvw - 100% - var(--scroll-bar-size))/2);
    --margin-size: calc(var(--padding-size)*-1);
    margin-left: var(--margin-size);
    margin-right: var(--margin-size);
    padding-left: var(--padding-size);
    padding-right: var(--padding-size);
    padding-top: var(--big-space);
    padding-bottom: var(--page-padding);
    overflow: hidden;
    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color var(--transition-speed);
    scale: 1;

}

a.interactible-panel:hover{
    cursor: pointer;
}

.interactible-panel:hover{
    text-decoration: none;

    background-color: var(--primary-text-color);
}

.interactible-panel:visited{
    color: var(--text-color);
}


.interactible-panel>*:first-child {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0px;
    opacity: 0;
    transition: opacity var(--transition-speed);
}

.interactible-panel>div.indicator {
    position: absolute;
    top: 0;
    
    width: calc(100% - var(--scroll-bar-size)) !important;
    max-width:  var(--page-width) !important;

    transition-property: transform;
    transition-duration: var(--transition-speed);
    object-fit: contain;
    object-position: 100% 100%;

    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 10px;
    height: 40px;
    transform: translate(-5px, 5px);
}



.interactible-panel>div.indicator>img {
    transition-property: opacity;
    transition-duration: var(--transition-speed);
    opacity: 0.33;
    width: 40px;

}

.interactible-panel>div.indicator>p {
    transition-property: opacity, transform;
    transition-duration: var(--transition-speed);
    text-align: end;
        transform: translate(10px, 0px);
    opacity: 0;
    align-self: center;
}


.interactible-panel>div {
    position: relative;
}

.interactible-panel>div>p.status {
    position: absolute;
    left: 5px;
    bottom: -5px;
    align-self: flex-end;
    z-index: 4;
}

.interactible-panel:hover>div.open.indicator {
  
    transform: translate(0px, 0px);
}

.interactible-panel:hover>div.more.indicator {
  
    transform: translate(0px, 5px);
}

.interactible-panel:hover>div.indicator>img {
    opacity: 0.67;
   
}

.interactible-panel:hover>div.indicator>p {
    opacity: 0.67;
            transform: translate(0px, 0px);
   
}

.interactible-panel>img:first-child {
    filter: blur(50px);
    scale: 1.25;
    object-fit: cover;   
    

}

.interactible-panel:hover>*:first-child{
    opacity: 0.33;
}


.interactible-panel>img:nth-child(2) {
    max-height: 200px;
    object-fit: contain;
}

.interactible-panel>*:nth-child(2) {
    align-self: center;
    margin-bottom: var(--page-padding);
    z-index: 1;
    border-radius: 0px;

}

.interactible-panel>h4:nth-child(2) {
    scale: 1.25;
    text-align: center;
    line-height: 95%;
    margin-left: var(--middle-space);
    margin-right: var(--middle-space);
}

.interactible-panel>div:nth-child(3)>*:first-child,
.interactible-panel .summary-container {

    width: 400px;


    aspect-ratio: 16 / 9;
} 

.interactible-panel>div:nth-child(3)>*:first-child{
    margin-right: var(--container-margin);
    align-self: unset;
    flex: unset !important;
    object-fit: cover;
    min-width: 400px;

}

.interactible-panel>div:nth-child(3)>img {
        background-color: var(--surface-color);
}

.interactible-panel>div>div:first-child:not(.owl-carousel) {
    border-radius: var(--border-radius);
    overflow: hidden;
}

.interactible-panel:hover>div:nth-child(3)>*:first-child {
    margin-right: var(--container-margin);
    box-shadow: var(--box-shadow);
}

.interactible-panel>div {

    z-index: 1;
}



@media (max-width: 1340px) {
    .webbar>div {

        padding-left: var(--text-margin);
    }

    @media (max-width: 1250px) {
        button.owl-prev {
            margin-left: -5px;
        }


        button.owl-next {
            margin-right: -5px;
        }


        @media (max-width: 1100px) {

            .banner-foreground h1 {
                font-size: 35px;
            }

            .banner-foreground h2 {
                font-size: 20px;
            }

            @media (max-width: 880px) {


                video{
                    height: unset !important;
                    width: 100% !important;
                }

                .image-cards.direction-on-size>div,
                .image-cards.direction-on-size>div>a>div {

                   width: 100% !important;

                }
                .main-content {
                    min-height: calc(100dvh - var(--toolbar-height) - var(--page-padding)*2 - var(--container-margin)*2 - var(--tab-height));
                }

                .webbar {

                    align-items: center;
                }

                .webbar>div {


                    padding-left: calc(var(--toolbar-height) - var(--button-padding-vertical) + var(--text-margin));
                }

                #theme {
                    height: var(--tab-small-height);

                }

                .include-my-head {
                    margin-top: 0px !important;
                }

                .large-image,
                .medium-image {

                    margin-right: auto;
                    margin-left: auto;
                }

                .large-image,
                .vertical-image,
                .medium-image {

                    margin-bottom: 15px;

                }

                .vertical-image {
                    margin-right: 0px !important;
                }



                .margin-on-size {
                    margin-right: 0px;
                    margin-bottom: 25px;
                }


                .large-image-container {
                    display: block;
                    align-self: center;
                }

                .interactible-panel > div:nth-child(3) > *:first-child {
                    align-self: center !important;
                    margin-right: 0px !important;
                    margin-top: var(--container-margin);
                }

                .interactible-panel > div:nth-child(3){
                    flex-direction: column-reverse !important;
                }

                .main-scroll-area {
                    height: calc(100dvh - var(--toolbar-height) - var(--tab-height));
                }

                .banner>img {
                    height: calc(100dvh - var(--toolbar-height) - var(--arrow-height) - var(--tab-height) + 4vh);
                }

                .banner {
                    height: calc(100dvh - var(--toolbar-height) - var(--arrow-height) - var(--tab-height));
                }

                .direction-on-size-3,
                .direction-on-size {
                    flex-direction: column;
                }

                .tab-layout {
                    margin-left: auto;
                    margin-right: auto;
                    height: var(--tab-height);
                    flex: unset;
                }

                .banner-foreground>div.image-container {
                    display: flex !important;

                    margin-left: var(--container-margin);
                    margin-right: var(--container-margin);
                    min-width: 0px !important;

                    justify-self: stretch !important;


                    flex: 0 1 auto;
                    overflow: auto;

                    height: auto !important;
                }


                .banner-foreground>div.image-container>img {

                    width: 100% !important;
                    height: auto !important;
                    min-height: 0px !important;
                    justify-self: stretch !important;

                }


                .banner-foreground>div:not(.image-container) {
                    margin-left: var(--container-margin);
                    margin-right: var(--container-margin);
                    margin-bottom: 0px;
                }

                .banner-foreground h1,
                .banner-foreground h2 {
                    text-align: center;
                }

                .banner-foreground>div {
                    display: flex;
                    flex-direction: column;
                }


                .banner-foreground a {
                    align-self: center;
                }

                @media (max-width: 546px) {

                    .dialog-header h3 {
                        font-size: large !important;
                    }

                    .cards div p {
                        font-size: medium !important;

                    }

                    .bottombar>div {
                        flex-direction: column;
                        align-items: start;
                    }

                    .main-content {
                        min-height: calc(100dvh - var(--toolbar-small-height) - var(--page-padding)*2 - var(--container-margin)*2 - var(--tab-small-height));
                    }

                    .webbar>div {


                        padding-left: var(--text-margin);
                    }

                    #theme {
                        margin-right: var(--text-margin) !important;
                        display: flex;
                        width: calc(var(--toolbar-small-height) - (var(--text-margin) + var(--button-padding-vertical)) * 2);
                        height: calc(var(--toolbar-small-height) - (var(--text-margin) + var(--button-padding-vertical)) * 2);
                    }

                    #icon-sun {

                        width: unset !important;
                        flex: 1 !important;

                    }

                    img {
                        width: 100%;

                        height: auto;
                    }

                    .interactible-panel>div>*:first-child,
                    .interactible-panel .summary-container {
                        width: 100% !important;
                        min-width: unset !important;
                        height: auto !important;
                    }

                    .interactible-panel>img:nth-child(2) {
                        width: 95% !important;
                        min-width: unset !important;
                   
                        height: auto !important;
                    }

                    .tab-layout {
                        display: none;
                    }

                    .banner-foreground.jesus {
                        justify-content: stretch !important;
                    }

                    .banner-foreground>div.image-container {
                        margin-bottom: 25px;
                        margin-top: 25px;

                    }


                    .banner-foreground.jesus>div.image-container {
                        margin-bottom: 0px;

                    }

                    .banner-foreground>div:not(.image-container) {
                        margin-top: 25px;

                    }


                    .banner-foreground.jesus>div:not(.image-container) {
                        flex: 1;
                        display: flex !important;
                        flex-direction: column;

                        justify-content: center !important;

                    }

                    .toolbar {
                        height: var(--toolbar-small-height) !important;
                    }

                    .toolbar>h1 {
                        font-size: x-large;
                    }

                    .toolbar>img {
                        width: auto;
                        height: 35px;
                        margin-right: 15px;
                    }

                    .navigationbar-div {
                        width: 100%;
                        max-width: 100%;
                        background-color: var(--surface-color);
                        display: flex;
                        justify-items: stretch;
                        height: var(--tab-small-height);
                    }

                    .floating-bottun {
                        bottom: var(--tab-small-height);
                    }

                    .large-image,
                    .medium-image {
                        aspect-ratio: 1/1;
                        width: 100%;
                        height: 100%;
                        min-width: 0px;
                        min-height: 0px;
                    }


                    .main-scroll-area {
                        height: calc(100dvh - var(--toolbar-small-height) - var(--tab-small-height));
                    }

                    .banner img {
                        height: calc(100dvh - var(--toolbar-small-height) - var(--tab-small-height) - var(--arrow-height) + 4vh);
                    }

                    .banner {
                        height: calc(100dvh - var(--toolbar-small-height) - var(--tab-small-height) - var(--arrow-height));
                    }

                    .tab {
                        display: flex;
                        font-size: 13px !important;
                        padding-left: 10px;
                        padding-right: 10px;
                        flex: 1;
                        text-wrap: wrap;
                    }

                    .direction-on-size-3 {
                        flex-direction: row;
                        position: relative;
                    }

                    .banner h1 {
                        font-size: 30px;
                    }

                    .banner h2 {
                        font-size: 20px;
                    }

                    .interactible-panel{
                        --padding-size: calc((100dvw - 100%)/2);
                        --margin-size: calc(var(--padding-size)*-1);
                        margin-left: var(--margin-size);
                        margin-right: var(--margin-size);
                        padding-left: var(--padding-size);
                        padding-right: var(--padding-size);
                    }
                }
            }
        }


    }

}

.zoomable-image {
    cursor: pointer;
}

.image-zoom-overlay {
    position: fixed;
    top: 0;
    left: 0;
    inset: 0;
    width: 100vw;
    height: 100vh;
    width: 100dvw;
    height: 100dvh;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--container-margin);
    background-color: rgba(0, 0, 0, 0.9);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-speed);
    padding: var(--container-margin);
    box-sizing: border-box;
    border-radius: 0;
    margin: 0;
}

.image-zoom-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.image-zoom-preview {
    max-width: min(95vw, 1600px);
    max-height: 85vh;
    width: auto;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
}

.image-zoom-close {
    position: absolute;
    top: var(--container-margin);
    right: var(--container-margin);
    border: none;
    margin-left: auto !important;
    padding: var(--button-padding-vertical);
    margin-bottom: 0px !important;
    margin-top: 0px !important;
    margin-right: 0px !important;
    width: 50px;
    height: 50px;
}

.image-zoom-close:hover {
    background-color: var(--dark-hover-background-color) !important;
}

.image-zoom-close:active {
    background-color: var(--dark-click-background-color) !important;
}

.image-zoom-close>img {
    height: 30px !important;
    width: 30px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;

}

.image-zoom-caption {
    color: white;
    text-align: center;
    max-width: min(95vw, 1000px);
    min-height: 1.5em;
}