:root {
    --background: #faf9f7;
    --highlight-background: #e6e3d6;
    --text: #333;
}

:root body.dark {
    --background: #0f0f0f;
    --text: #f0f0f0;
    --highlight-background: #000000;
}

* {
    box-sizing: border-box;
}

body {
    background: var(--background);
	transition: background .3s ease;
    padding: 0;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen-Sans, Ubuntu, Cantarell,
        "Helvetica Neue", sans-serif;
    color: var(--text);
}

.card {
    background: var(--highlight-background);
	transition: background .3s ease;
    padding: 25px;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    text-align: center;
}

.galerie {
    padding: 0 25px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 15px;
    flex-direction: row;
    align-items: flex-start;

}

.gdesc-inner {
	background: var(--highlight-background);
	color: var(--text);
}

.gslide-desc a {
	display: inline-flex;
}

.logo {
    width: 180px;
    margin-bottom: 15px;
}

.logo.logo-dark {
    display: none;
}
body:not(.dark) .logo.logo-light {
    display: inline-block;
}
body.dark .logo.logo-dark {
    display: inline-block;
}
body.dark .logo.logo-light {
    display: none;
}

img {
    width: 100%;
}

main img:hover {
    opacity: 0.8;
}

nav ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}

nav ul li {
    display: inline-block;
    margin: 0;
    margin-right: 15px;
    padding: 0;
}

nav ul li:last-child {
    margin-right: 0;
}

a {
    font-weight: 700;
    text-decoration: none;
    color: var(--text);
}

a:hover {
    text-decoration: underline;
}

footer {
    padding: 35px 0;
}

footer,
header {
    text-align: center;
    background: var(--highlight-background);
}

header {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 150px;
    background: var(--highlight-background);
	transition: background .3s ease;
    margin-bottom: 15px;
}

input {
    border: 0;
    background: var(--background);
    padding: 9px;
    border-radius: 4px;
    color: inherit;
}

button {
    background: #1d1d1b;
    color: #fff;
    border: 0;
    padding: 9px 16px;
    border-radius: 4px;
    cursor: pointer;
}

header>div,
footer>div {
    max-width: 600px;
    margin: 0 auto;
}

.vbox-child img {
    max-height: 90vh;
}

.error {
    background: #ce6161;
    padding: 15px;
    color: #fff;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    border-radius: 4px;
    margin-bottom: 15px;
}

.front-img-main {
    justify-content: center;
    display: flex;
    align-items: center;
}

.front-img {
    max-width: 600px;
    max-height: 440px;
    object-fit: contain;
}

@media(max-width: 600px) {
    .galerie {
        grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
    }

    footer {
        padding: 15px;
    }

    body header {
        padding: 15px;
        height: 240px;
    }
}

@media(max-width: 450px) {
    body header .logo {
        width: 120px;
        margin-bottom: 8px;
    }

    body header {
        height: 210px;
    }
}

.venobox {
    position: relative;
}

.toolbar {
    display: none;
    z-index: 10;
}

.toolbar > a {
    padding: 8px;
    border-radius: 4px;
    background: var(--background);
    color: var(--text);
    border: solid 1px var(--highlight-background);
}

div:hover>.toolbar,
.toolbar:hover {
    display: flex;
}

.toolbar .delete {
    color: red;
}

.toolbar {
    position: absolute;
    bottom: 15px;
    left: 15px;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

.velz-developer-notice {
    gap: 8px;
    margin-top: 8px;
}
.velz-developer-notice > a:hover {
    opacity: 0.8;
}

.velz-developer-notice, .velz-developer-notice > a {
    font-size: 13px;
    opacity: 0.9;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

h1 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 1.5rem;
}

a {
	display: flex;
	gap: 5px;
}

a.lightbox {
	cursor: zoom-in;
}

.gg-sun {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs,1));
  width: 24px;
  height: 24px;
  background:
    linear-gradient(to bottom,
        currentColor 4px,transparent 0)
        no-repeat 5px -6px/2px 6px,
    linear-gradient(to bottom,
        currentColor 4px,transparent 0)
        no-repeat 5px 14px/2px 6px,
    linear-gradient(to bottom,
        currentColor 4px,transparent 0)
        no-repeat -8px 5px/6px 2px,
    linear-gradient(to bottom,
        currentColor 4px,transparent 0)
        no-repeat 14px 5px/6px 2px;
  border-radius: 100px;
  box-shadow: inset 0 0 0 2px;
  border: 6px solid transparent
}
.gg-sun::after,
.gg-sun::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 24px;
  height: 2px;
  border-right: 4px solid;
  border-left: 4px solid;
  left: -6px;
  top: 5px
}
.gg-sun::before {
  transform: rotate(-45deg)
}
.gg-sun::after {
  transform: rotate(45deg)
}

.gg-arrow-left-o {
    box-sizing: border-box;
    position: relative;
    display: block;
    width: 22px;
    height: 22px;
    border: 2px solid;
    transform: scale(var(--ggs,0.85));
    border-radius: 22px
}
.gg-arrow-left-o::after,
.gg-arrow-left-o::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    left: 4px
}
.gg-arrow-left-o::after {
    width: 6px;
    height: 6px;
    border-bottom: 2px solid;
    border-left: 2px solid;
    transform: rotate(45deg);
    bottom: 6px
}
.gg-arrow-left-o::before {
    width: 10px;
    height: 2px;
    bottom: 8px;
    background: currentColor
}

#logoutLink{
    cursor:pointer;
    position: absolute;
    left: 15px;
    top: 15px;
}

#downloadarea {
	display: flex;
	flex-direction: column;
	align-items: center;
    margin-bottom: 20px;
}

#downloadarea a{
    transition: 600ms;
    cursor: pointer;
    text-decoration: none;
    background: var(--highlight-background);
    padding: 20px;
}

#downloadarea a:hover{
    transition: 600ms;
    transform: scaleX(1.1) scaleY(1.1) !important;
}

#downloadarea span{
    color: red;
}

.glightbox-mobile .glightbox-container .gslide-desc a {
    color: var(--text) !important;
}

.galerie >div {
	   margin-bottom:3%;
	   break-inside: avoid;
	   -webkit-column-break-inside: avoid;
	   page-break-inside: avoid;
}