/*****************************************
Variables
*****************************************/
*{
	background-clip: padding-box; /* tranparent background behind border gaps */
}

:root{
	--distance: 5px;
	--distance-2: calc(var(--distance) * 2);
	--distance-3: calc(var(--distance) * 3);
	--distance-4: calc(var(--distance) * 4);
	--distance-5: calc(var(--distance) * 5);
	
	--color-white: #FAF9F6;
	--color-black: #343231;
	--color-gray: #555555; /* clicked link */
	--color-yellow: #FBF8CC; /* footer, section, textarea, main-container, speech-bubble, update-nav, lightbox */
	--color-orange: #FDE4CF; /* body, section>section */
	--color-red: #FFCFD2; /* nav, scrollbar */
	--color-pink: #F1C0E8; /* nav button */
	--color-violet: #CFBAF0; /* header, section headline */
	--color-blue: #A3C4F3; /* border, tab-selected, scrollbar */
	--color-light-blue: #90DBF4; /* scrollbar-hover */
	--color-turquoise: #8EECF5; /* unused */
	--color-green: #98F5E1; /* unused */
	--color-light-green: #B9FBC0; /* block-button, inline-button */

	--border-color: var(--color-blue);
	--font-color: var(--color-black);

	--font-size: 16px;
	
	--base-width: 1024px; /* can be changed via js */
	--base-height: 768px; /*  can be changed via js */
	--footer-height: var(--distance-5);
	--header-height: var(--distance-5);
	--title-height: var(--distance-5);
	--content-height: calc(var(--base-height) - var(--header-height) - var(--title-height) - (var(--distance) * 2));
	

	/* the following values can be overridden via settings js */
	--background-image: url("../img/background-body.png"); 
	--sepia-value: 0.75; 
	--sepia-filter: sepia(var(--sepia-value));
	--hover-effect: scale(1.2) rotate(5deg);
	--hover-effect-header: scale(1.2);
	--background-animation: moveBackground 240s linear infinite;
	--mops-slide-in-animation: slideInMops 2s ease-out forwards;
	--fade-in-animation: fadeInOpacity 1s ease-in 1; 
	--slide-in-animation: slideInAnimation 0.5s ease 0s 1 normal forwards; 
	--slide-out-animation: slideOutAnimation 0.5s ease 0s 1 normal forwards; 
	--opacity-animation: opacity 0.5s ease; 
	--marquee-animation: marquee 15s linear infinite;
	/* reset values for js */
	--base-width-const: 1024px;
	--base-height-const: 768px;
}



/*****************************************
Font faces
*****************************************/
@font-face {
	font-family: 'Power Clear';
	src: url('../font/powerclear.ttf') format('truetype');
}



/*****************************************
HTML Tags - Basics
*****************************************/
body{
	font-family: "Power Clear";
	font-size: var(--font-size);
	line-height: calc(var(--font-size) + var(--distance));
	color: var(--font-color);

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

	margin: 0;
    overflow-x: hidden; /* trims off overhanging areas */
}
body::before {
	content: "";
    position: fixed;
    inset: 0;

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

    -webkit-mask: var(--background-image) repeat;
    mask: var(--background-image) repeat;

	pointer-events: none;
}

header{
	background-color: var(--color-violet);
	height: var(--header-height);
	font-size: 18px;
	font-weight: bold;
	
	padding-left: var(--distance-2);
	
	border-bottom: var(--distance) var(--border-color) double;
}

nav{
	background-color: var(--color-red);
	text-align: center;
	
	border-radius: 0 var(--distance-4) 0 0;
	
	height: var(--header-height);
	display: flex;
	align-items: center; /* center content */
	justify-content: center; /* center content */
	
	border-bottom: var(--distance) var(--border-color) double;

	position: relative;
	z-index: 2;
}
nav > ul > li{
    border-left: var(--distance) var(--border-color) double;
    border-right: var(--distance) var(--border-color) double;
    margin-left: calc(var(--distance) *-1); /* no duplicate borders */
	flex: 1; /* everything in one line */
    text-align: center;
}
nav > ul > li > a{
	/* vertical centering / horizontal left */
	display: flex; 
	align-items: center;
	justify-content: flex-start;
}
footer > ul, .horizontal-list > ul, .horizontal-ul{
	display: flex; /* horizontal list */
	justify-content: center; /* center list */
	flex-wrap: wrap; /* multiple lines */
	gap: var(--distance-4);     /* gap between elements */
	list-style: none; /* No dots in front of list */
	padding: 0;
}
nav ul{
	display: flex; /* every li same size */
	flex-wrap: wrap;
    width: 100%; /* full size */
    list-style: none;
    padding: 0;
    margin: 0;
}

main{
	padding: var(--distance-2);
	margin-bottom: var(--distance-2);
}

footer{
	width: 100%;
	
	background-color: var(--color-yellow);

	border-top: 1px black solid;
	
	line-height: var(--footer-height);
	
	padding: var(--distance);
	
	position: fixed;
    bottom: 0;
    left: 0;
    z-index: 67; /* below settings */
}
footer li, .horizontal-list li, .horizontal-ul li{
	list-style-image: none; /* No dots in front of list */
}

section{
	display: block;
	
	background-color: var(--color-orange);
	
	border: 1px var(--border-color) solid;
	border-radius: var(--distance-2);
	margin: var(--distance-2);
	padding: var(--distance-2);
	padding-bottom: var(--distance);
	
	filter: drop-shadow(3px 3px 5px var(--color-black));
}
section > section, section > div > div > section{
	background-color: var(--color-yellow); /* diffent bg-colors for stacked sections */
}
section > section > section, section > section > div > div > section{
	background-color: var(--color-orange); /* diffent bg-colors for stacked sections - yellow orange yellow - Currently only 3 stacks supported, more would be messy anyways */
}
section > img, section > p > img, section > p > a > img{
	max-width: 70%;
	max-height: 200px;
}

iframe{
	border: 0;
	min-height: 768px;
}


/*****************************************
HTML Tags - Headlines
*****************************************/
h1, h2, h3, p{
	margin: 0;
}
h1{
	font-size: 32px;
}
h2{
	font-size: 20px;
	line-height: 24px;
}
h3{
	font-size: 18px;
	line-height: 22px;
}



/*****************************************
HTML Tags - a / Links
*****************************************/
a{
	display: inline-block;
	color: var(--font-color);
}
a:clicked{
	color: var(--color-gray);
}
a > img:hover{
	transform: scale(1) !important; /* fix double scaling of img and a*/
}


/*****************************************
HTML Tags - img / Images
*****************************************/
img{
	max-width: 80%;
	max-height: 80%;
	filter: var(--sepia-filter);
}

img, a{
    transition: transform 0.3s ease;
}
img:hover, a:hover{
    transform: var(--hover-effect); /* 20 % zoom + small rotate */
	z-index: 999;
	filter: unset; /* hover removes sepia filter */
}



/*****************************************
HTML Tags - Tables
*****************************************/
table{
	width: 100%;
	border-collapse: collapse;
}

table td {
    border-right: 1px dotted var(--border-color);
    border-bottom: 1px dotted var(--border-color);
	padding-left: var(--distance);
}
table td:last-child {
    border-right: none; /* only inner borders */
}
table tr:last-child td {
    border-bottom: none; /* only inner borders */
}
table td:first-child {    
	font-weight: bold; /* left column bold */
}



/*****************************************
HTML Tags - Other
*****************************************/
textarea{
	background-color: var(--color-yellow);
	width: 100%;
}

ul{
	margin: 0;
}

li{
	list-style-image: url("../img/smileys/cd.gif");
}



/*****************************************
Custom cursors
*****************************************/
body{
	cursor: url('../cursor/Normal.cur'), default;
}

p,
input,
textarea,
[contenteditable="true"] {
    cursor: url('../cursor/Text.cur'), text;
}

button,
.block-button,
.inline-button,
label,
input[type="radio"],
input[type="checkbox"],
input[type="range"]{
	cursor: url('../cursor/Link.cur'), pointer;
}

img{
	cursor: url('../cursor/Normal.cur'), default;
}

a, a img{
	cursor: url('../cursor/Link.cur'), pointer;
}

.isDisabled{
	cursor: url('../cursor/NotAllowed.cur'), not-allowed;
}

.draggable{
	cursor: url('../cursor/Move_2.cur'), grab;
}



/*****************************************
Keyframes (animations)
*****************************************/
@keyframes moveBackground {
    from {
        background-position: 0 0;
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
    }
    to {
        background-position: -1000px -1000px;
		-webkit-mask-position: -1000px -1000px;
		mask-position: -1000px -1000px;
    }
}

@keyframes slideInMops {
    from {
        transform: translate(100%, 100%);
    }
    to {
        transform: translate(0, 0);
    }
}

@keyframes crt-scanline-flicker {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.92;
    }
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes slideInAnimation {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideOutAnimation {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

@keyframes marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100%);
	}
}


/*****************************************
Div ids - header
*****************************************/
#page-header{
	display: flex;
    justify-content: space-between;
    align-items: center;

	position: relative;
	z-index: 2;
}

#header-buttons{
	font-weight: bold;
}
#header-buttons > button{
	background-color: transparent;
	border: 0;
}

#bg-video {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	min-width: 100%;
	min-height: 100%;
	z-index: -1;
}



/*****************************************
Div ids - container
*****************************************/
#wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

#main-container{
	margin-top: var(--distance-3);
	
	border: calc(var(--distance)) var(--border-color) double;

	/*
	border: calc(var(--distance-5)) solid transparent;
	border-image-source: url("../img/border.jpg");
	border-image-slice: 23 33 50 36;
	border-image-width: 50px 50px 50px 50px;
	border-image-outset: 0px 0px 0px 0px;
	border-image-repeat: stretch stretch; 
	*/

	background-color: var(--color-yellow);
	background-repeat: repeat;
	
	width: var(--base-width);
	height: var(--base-height);
	
	border-radius: 0 var(--distance-5) 0 var(--distance-5);
	position: relative;
	overflow: hidden;

}
#main-container::before {
	content: "";
    position: absolute;
    inset: 0;

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

    -webkit-mask: url('../img/background.png') repeat;
    mask: url('../img/background.png') repeat;

	pointer-events: none;

	animation: var(--background-animation);
	overflow: hidden;
}

#left-container, #right-container {
    flex: 1;
    overflow: hidden;
	margin-top: var(--distance-5);
}



/*****************************************
Div ids - content
*****************************************/
#main-content {
	/*background-image: url(../img/pastel-rainbow.png);*/
	background-position-y: bottom;
    background-position-x: right;
	background-repeat: no-repeat;

	height: var(--content-height);
	overflow: auto;
	overflow-x: hidden;

	position: relative;

	background:
		linear-gradient(
			150deg,
			transparent calc(100% - 12rem),
			var(--color-red) calc(100% - 12rem) calc(100% - 10rem),
			var(--color-orange) calc(100% - 10rem) calc(100% - 8rem),
			var(--color-yellow) calc(100% - 8rem) calc(100% - 6rem),
			var(--color-green) calc(100% - 6rem) calc(100% - 4rem),
			var(--color-blue) calc(100% - 4rem) calc(100% - 2rem),
			var(--color-violet) calc(100% - 2rem) 100%
		);

}

/*****************************************
Div ids - settings
*****************************************/
#settings > a{
	display: contents; /* fixes zoom glitch */
}

#settings-mops {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 69; 

    animation: var(--mops-slide-in-animation);
}



/*****************************************
Speech bubble
*****************************************/
.speech-bubble {
	position: relative;
	background: var(--color-yellow);
	border-radius: var(--distance-2);
	width: 200px;
	min-height: 100px;
	border: var(--distance) var(--border-color) double;
	padding: var(--distance);

	opacity: 1;
	transition: var(--opacity-animation);
	transform: translateY(0);
}

.speech-bubble:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: var(--distance-5) solid transparent;
	border-top-color: var(--border-color);
	border-bottom: 0;
	border-right: 0;
	margin-left: calc(var(--distance-5) * -1);
	margin-bottom: calc(var(--distance-5) * -1);
}

#speech-bubble {
    position: fixed;
    bottom: 140px;
    right: var(--distance);
    z-index: 69;
}

.speech-bubble.hidden {
    opacity: 0;
    pointer-events: none;
}



/*****************************************
Classes - nav
*****************************************/
.nav-button{	
	display: flex;

	height: var(--header-height);
	width: calc(100px - var(--distance));
	padding-left: var(--distance);
	
	background-color: var(--color-pink);

	overflow: clip;
}
.nav-button > a{
	text-decoration: none;
	font-weight: bold;
	text-align: left;
	/* link on the whole li element, not only on a text */
	display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

.update-nav{
	background-color: var(--color-yellow);
	
	padding-left: 0;
	padding-right: 0;
	
	height: var(--distance-5);
	line-height: var(--distance-5);

	display: flex;
    align-items: center;
}

.update-nav, .header-img{
	border-bottom: var(--distance) var(--border-color) double;
}

.nav-flex-width > ul > li{
	width: unset;
	padding-right: var(--distance);
}
.nav-secondary > ul > li > a{
	display: flex;
}


/*****************************************
Classes - header
*****************************************/
.header-img{
	height: 150px;
	position: relative;
	overflow: hidden; /*fix header img size */	
}

.header-img img{
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: cover; /* fits image to size without changing ratios */
	object-position: right; /* centers image cutout */
}

.header-img > img{
	transform-origin: right center;
}
.header-img > img:hover{
	transform: var(--hover-effect-header); /* 20 % zoom */
}




/*****************************************
Classes - sections
*****************************************/
.section-headline{
	background-color: var(--color-violet);
	margin: calc(var(--distance-2)*-1);
	margin-bottom: var(--distance);
	padding-left: var(--distance);
	border-bottom: 1px var(--border-color) solid;
	border-radius: var(--distance-2) var(--distance-2) 0 0;
}

.section-image{
	padding-right: var(--distance-2);
}
.section-image img{
	max-width: 100%;
}

.section-full-size-img{
	background-color: transparent;
	border: 0;
	padding-top: 0;
	padding-bottom: 0;
	margin-bottom: calc(var(--distance) * -1);
}
.section-full-size-img > img{
	width: 100%;
	max-width: 100%;
	position: relative;
}



/*****************************************
Classes - tabs
*****************************************/
.tab-selected{
	background-color: var(--color-blue);
}


/*****************************************
Classes - scrollbar
*****************************************/
.scrollbar {
    scrollbar-color: var(--color-blue) var(--color-red);
    scrollbar-width: thin;
}

.scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.scrollbar::-webkit-scrollbar-track {
    background: var(--color-red);
}

.scrollbar::-webkit-scrollbar-thumb {
    background: var(--color-blue);
    border-radius: 999px;
}

.scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--color-light-blue);
}



/*****************************************
Classes - marquee
*****************************************/
.marquee {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	box-sizing: border-box;
}

.marquee > span, .marquee > a {
	display: inline-block;
	padding-left: 100%;
	animation: var(--marquee-animation);
	text-decoration: none;
}
.marquee:hover > span, .marquee:hover > a {
	animation-play-state: paused; /* pause on hover */
}


/*****************************************
Classes - Background images
*****************************************/
.headline-bg, .header-bg, .table-bg{
	background-position: 99%;
    background-repeat: no-repeat;
	image-rendering: pixelated; /* pixelated upscaling */
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
}

.header-bg{
	background-size: calc(var(--header-height) + var(--distance));
}

.headline-bg{
	background-size: 30px;
}
.headline-bg h2{
	max-width: 85%;
}

/* main menu backgrounds */
.bg-root {
    background-image: url("../img/smileys/frog.gif");
}
.bg-projects {
    background-image: url("../img/smileys/scroll.gif");
}
.bg-likes {
    background-image: url("../img/smileys/heart.gif");
}
.bg-lifegoals {
    background-image: url("../img/smileys/lifepreserver.gif");
}
.bg-rabbit-holes {
    background-image: url("../img/smileys/rabbit.gif");
}
.bg-fun {
    background-image: url("../img/smileys/sun.gif");
}
.bg-external {
    background-image: url("../img/smileys/esckey.gif");
}
.bg-book {
    background-image: url("../img/smileys/book.gif");
}
.bg-blog {
    background-image: url("../img/smileys/pencil.gif");
}
.bg-cv {
    background-image: url("../img/smileys/document.gif");
}

/* headline backgrounds */
.bg-achievement {
    background-image: url("../img/smileys/star.gif");
}
.bg-audio {
    background-image: url("../img/smileys/note.gif");
}
.bg-clothing {
    background-image: url("../img/smileys/necktie.gif");
}
.bg-coding {
    background-image: url("../img/smileys/folder.gif");
}
.bg-collecting {
    background-image: url("../img/smileys/treasure.gif");
}
.bg-design {
    background-image: url("../img/bg-img/palette.svg");
}
.bg-education {
    background-image: url("../img/smileys/graduatescap.gif");
}
.bg-game {
    background-image: url("../img/smileys/dice.gif");
}
.bg-guide {
    background-image: url("../img/smileys/point.gif");
}
.bg-love {
    background-image: url("../img/smileys/candyheart.gif");
}
.bg-music {
    background-image: url("../img/smileys/note.gif");
}
.bg-server {
    background-image: url("../img/smileys/computer.gif");
}
.bg-spreadsheet {
    background-image: url("../img/smileys/calendar.gif");
}
.bg-video {
    background-image: url("../img/smileys/filmstrip.gif");
}
.bg-work {
    background-image: url("../img/smileys/toolbox.gif");
}
.bg-writing {
    background-image: url("../img/smileys/book.gif");
}

.table-bg{
	background-size: contain;
}
.table-bg-oversized{
	background-size: 15% auto;
}
.bg-enby{
	background-image: url("../img/enby.png");
}
.bg-pelipper{
	background-image: url("../img/likes/pelipper.png");
}
.bg-red{
	background-color: var(--color-red);
}
.bg-violet{
	background-color: var(--color-violet);
}


/*****************************************
Classes - Buttons
*****************************************/
.block-button{
	width: 80%;
	display: block;
    margin: 0 auto; /* center button */
	background-color: var(--color-light-green);
}

.inline-button{
	text-decoration: none;
	
	text-align: center;
	padding: var(--distance);

	border: 1px var(--border-color) solid;
	
	background-color: var(--color-light-green);
}

.button-size, .button-wall img{
	width: 88px;
	height: 31px;
	max-width: unset;
	max-height: unset;
}

.button-size-pb{
	width: 82px; /* 1px border + 5px padding */
	height: 25px;
}


/*****************************************
Classes - Columns
*****************************************/
.column-2{
	display: grid;
    grid-template-columns: 50% 50%; /* 2 colums */
}

/* smaller picture on left, text on right */
.column-2-smallbig{
	display: grid;
    grid-template-columns: 150px 1fr; /* 2 colums */
}

.column-3{
	display: grid;
    grid-template-columns: 25% 50% 25%; /* 3 colums */
}

.column-4{
	display: grid;
    grid-template-columns: 25% 25% 25% 25%; /* 5 colums */
}



/*****************************************
Classes - Display & Position
*****************************************/
.display-block{
	display: block;
}

.mobile-only{
	display: none;
}

.position-absolute{
	position: absolute;
}

.position-fixed{
	position: fixed;
}



/*****************************************
Classes - margin padding
*****************************************/
.mt-0{
	margin-top: 0;
}

.mt{
	margin-top: var(--distance);
}

.mt-2{
	margin-top: var(--distance-2);
}

.mt-3{
	margin-top: var(--distance-3);
}

.mb{
	margin-bottom: var(--distance);
}
.mb-3{
	margin-bottom: var(--distance-3);
}



/*****************************************
Classes - borders
*****************************************/
.border-corner{
	width: 200px;
    position: relative;
    padding: var(--distance-2);
}
.border-corner::before,
.border-corner::after {
    content: "";
    position: absolute;
    width: var(--distance-4);
    height: var(--distance-4);
}
/* Top left */
.border-corner::before {
    top: 0;
    left: 0;
    border-top: var(--distance) solid var(--border-color);
    border-left: var(--distance) solid var(--border-color);
}
/* Bottom right */
.border-corner::after {
    bottom: 0;
    right: 0;
    border-bottom: var(--distance) solid var(--border-color);
    border-right: var(--distance) solid var(--border-color);
}

.last-no-right-borders > li:last-child, nav > ul > li:last-child{
	border-right: 0;
}



/*****************************************
Classes - animations
*****************************************/
.fade-in {
	opacity: 1;
	animation: var(--fade-in-animation);
}

.slide-in{
	animation: var(--slide-in-animation);
}

.slide-out{
	animation: var(--slide-out-animation);
}



/*****************************************
Classes - headline
*****************************************/
.headline{
	height: 24px;
	font-size: 24px;
	font-weight: bold;
	margin: 0;
	margin-bottom: var(--distance);
    border-bottom: 1px var(--border-color) dotted;
}



/*****************************************
Classes - headline
*****************************************/
.img-200px img{
	max-width: 200px;
	max-height: 200px;
}



/*****************************************
Classes - stamps
*****************************************/
.stamp {
  --r: 2px; /* control the radius */

  border: 2px solid var(--border-color);

  width: calc(99px - var(--r) - var(--r));
  height: calc(56px - var(--r) - var(--r));
  padding: var(--r);
  background: #b3b39c;
  mask: 
    radial-gradient(50% 50%,#0000 66%,#000 67%) round 
     var(--r) var(--r)/calc(2*var(--r)) calc(2*var(--r)), 
    conic-gradient(#000 0 0) content-box;
}

.stamp-background-image{
    background-size: cover;
    background-position: center;
}

.bg-stamp-music{
	background-image: url(../img/likes/currently_listening.webp)
}
.bg-stamp-game{
	background-image: url(../img/likes/currently_playing.webp)
}
.bg-stamp-watch{
	background-image: url(../img/likes/currently_watching.webp)
}



/*****************************************
Classes - Helper classes
*****************************************/
.always-on-top{
	z-index: 9001;
}

.center-me, .nav-secondary a{
	text-align: center;
	display: flex;
	align-items: center; /* center content */
	justify-content: center; /* center content */
}

.full-size{
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.grayscale { 
	filter: grayscale(100%); 
}

.height-100{
	height: 100%
}

.inline-img{
	height: var(--font-size);
	max-width: unset;
}

.list-distance{
	padding-left: var(--distance-5);
}

.mirror{
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}

.nowrap{
	white-space: nowrap;
}

.overflow-clip, .overflow-clip li{
	overflow: clip;
}

.sepia-filter {
    filter: var(--sepia-filter);
}

.x-small{
	font-size: x-small;
}




/*****************************************
Classes - disable stuff
*****************************************/
.isDisabled {
	color: currentColor;
	text-decoration: none;
	opacity: 0.5;
	filter: grayscale(1);
}
.isDisabled:hover, .isDisabled > img:hover{
	animation: none;
	transition: none;
	transform: none;
	filter: grayscale(1); /* overwrite sepia filter */
}

.no-animation{
	animation: none;
	transition: none;
	transform: none;
}
.no-animation:hover{
	animation: none;
	transition: none;
	transform: none;
}

.no-border{
	border: 0;
}

.no-border-bottom{
	border-bottom: 0;
}

.no-flex-wrap{
	flex-wrap: unset;
}

.no-hover{
	pointer-events: none;

}

.no-padding-top{
	padding-top: 0;
}

.no-pb-mb{
	padding-bottom: 0;
	margin-bottom: 0;
}

.no-round-borders{
	border-radius: 0;
}

.no-sepia-filter {
    filter: unset;
}

.no-fade-in{
	animation: unset;
}

.width-unset{
	width: unset;
}



/*****************************************
Pages - root
*****************************************/
.profile-txt > table > tbody > tr > td{
	width: 50%;
}

.socials > ul > li > a > img{
	width: var(--distance-5);
}

.profile-img-img{
	width: 200px;
}



/*****************************************
Lightbox
*****************************************/
dialog[open]{
	display: block;
}

.lightbox{
	text-align: center;
	align-items: center; /* center content */
	justify-content: center; /* center content */
	
	background-color: var(--color-yellow);
	
	border: 5px var(--border-color) double;
	
	padding: var(--distance-2);
	
	max-width: 80vw;
	max-height: 80vh;
}

.lightbox::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

.lightbox > img{
	filter: unset;
	max-width: 79vw; 
	max-height: 79vh; /* one smaller than lightbox size to remove scroll bar */
}
.lightbox > img:hover, #lightbox > a:hover{
	transform: unset !important;
}

.lightbox > a{
	text-decoration: none;
}

.lightbox .list-distance::before{
	content: "";
	display: block;
}

.lightbox:has(> ul) {
    text-align: left;
}



/*****************************************
Dress-Up
*****************************************/
.draggable{
	user-select: all;
	-moz-user-select: none;
	-webkit-user-drag: none;
	touch-action: none;
}
.dress-up-char{
	height: 560px;
}

.shirt1{ z-index: 100; top:  25px; }
.shirt2{ z-index: 101; top:  25px; left: 100px; }
.shirt3{ z-index: 102; top:  75px; }
.shirt4{ z-index: 103; top:  75px; left: 100px; }
.shirt5{ z-index: 104; top: 125px; }
.shirt6{ z-index: 105; top: 125px; left: 100px; }
.shirt7{ z-index: 106; top: 175px; }
.shirt8{ z-index: 107; top: 175px; left: 100px; }
.shirt9{ z-index: 108; top: 225px; }
.shirt10{ z-index: 109; top: 255px; left: 100px; }
/* pants always below tops */
.pants1{ z-index: 50; top:  25px; right: 0; }
.pants2{ z-index: 51; top:  75px; right: 0; }
.pants3{ z-index: 52; top:  125px; right: 0; }
.pants4{ z-index: 53; top:  175px; right: 0; }
/* skirts always above pants but below shirts */
.skirt1{ z-index: 71; top: 225px; right: 0; }
.skirt2{ z-index: 72; top: 275px; right: 0; }
.skirt3{ z-index: 73; top: 325px; right: 0; }
/* hats above all */
.hat1{ z-index: 150; top: 375px; right: 0; }
.hat2{ z-index: 151; top: 375px; right: 100px; }
.hat3{ z-index: 152; top: 425px; right: 0; }
.hat4{ z-index: 153; top: 425px; right: 100px; }
/* shoes always below everything else */
.shoe1{ z-index: 10; top: 525px; right: 0; }
.shoe2{ z-index: 11; top: 525px; right: 50px; }
.shoe3{ z-index: 12; top: 550px; right: 0; }
.shoe4{ z-index: 13; top: 550px; right: 50px; }
.shoe5{ z-index: 14; top: 575px; right: 0; }
.shoe6{ z-index: 15; top: 575px; right: 50px; }



/*****************************************
Mobile Styles
*****************************************/
@media (max-width: 1024px){
	nav{
		height: unset;
	}	
	nav > ul > li{
		flex: 1 1 25%; /* 3 entries per line */
		border-bottom: var(--distance) var(--border-color) double;
	}
	nav > ul > li:nth-child(3n) {
		border-right: none;
	}
	.main-nav > ul > li:nth-child(7n), .main-nav > ul > li:nth-child(8n), .main-nav > ul > li:nth-child(9n) {
		border-bottom: none;
	}	
	.nav-secondary{
		border-bottom: 0;
	}

	
	footer{
		height: unset;
		position: relative;
		width: unset;
		background-color: unset;
		border-top: var(--distance) double var(--border-color);

		z-index: 1;
	}
	footer > ul{	
		display: block;
	}
	
	#wrapper {
		display: block;
	}
	
	#main-container{	
		width: 90%;
		max-width: 90%;
		height: unset;
		margin: auto;
		margin-top: var(--distance-3);
	}
	
	#main-content{
		height: unset;
		padding-bottom: var(--distance-3);
	}
	#main-content:has(> .full-size) {
		overflow: clip;
	}
	
	#header-buttons{
		display: none;
	}

	#left-container, #right-container{
		display: none;
	}
	
	.nav-secondary > ul > li{
		border-bottom: var(--distance) double var(--border-color);
	}
	
	.headline{
		height: unset;
	}

	.section-full-size-img{
		margin: var(--distance-2);
    	padding: var(--distance-2);
	}
	
	.column-2, .column-3, .column-4, .column-2-smallbig{
		display: block;
	}

	.mobile-only{
		display: block;
	}

	.desktop-only{
		display: none;
	}

	.dress-up-left, .dress-up-right{
		height: 600px; /* specific boxes for the dress-up items */
		position: relative;
	}
}

/*****************************************
XXL Styles
*****************************************/
@media (min-width: 1440px){
	:root{
		--base-width-const: 70%;
		--base-width: 70%;
	}
}

/*****************************************
Support for none mobile devices with small height
*****************************************/
@media (min-width: 1024px){
	@media (max-height: 768px){
		:root{
			--base-height-const: 480px;
			--base-height: 480px;
		}
	}
}