* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --col-bg: #FFF;
    --col-main: #000;
    --text-size: clamp(20px, calc(20px + (30 - 20) * ((100vw - 420px) / (1800 - 420))), 28px);
}
*::selection {
    background-color: var(--col-main);
    color: var(--col-bg);
}
@font-face {
    font-family: 'DS';
    src: url('../fonts/default_sans-bold-webfont.woff2') format('woff2'),
         url('../fonts/default_sans-bold-webfont.woff') format('woff'),
         url('../fonts/default_sans-bold-webfont.ttf') format('truetype'),
         url('../fonts/default_sans-bold-webfont.svg#default_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}



html {
    -webkit-text-size-adjust: 100%;
}
body {
    position: relative;
    padding: calc(var(--text-size)/4);
    font-family: 'DS', sans-serif;
    font-size: var(--text-size);
    line-height: 1.2;
    font-weight: normal;
    font-feature-settings: "liga", "dlig", "kern" 1;
    font-kerning: normal;
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--col-main);
	background-color: var(--col-bg);
	cursor: url('../static/hand-cursor.png'), grab;
}
body.home {
    display: flex;
    flex-direction: column;
    position: fixed;
    width: 100%;
    height: 100%;
	padding: 0;
}

h1, h2 {
    font-size: var(--text-size);
    font-weight: normal;
}
p {
	margin-bottom: calc(var(--text-size)*1.2);
}
h3, h4, h5, h6, .text-S {
    font-size: calc(var(--text-size)*0.66);
	font-weight: normal;
}

a {
    color: inherit;
    text-decoration: none;
	cursor: pointer;
    cursor: url('../static/hand-cursor-hover.png'), pointer;
}

header {
	margin-bottom: calc(var(--text-size)*1.2);
	width: 100%;
}
.home header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    padding: calc(var(--text-size)/4); 
}
nav a {
	margin-right: calc(var(--text-size)/2);
}
nav a:last-child {
	margin-right: 0;
}

.link-moriz span:nth-child(1) {
	color: #f285a5; /* pink */
}
.link-moriz span:nth-child(2) {
	color: #00a14a; /* green */
}
.link-moriz span:nth-child(3) {
	color: #969696; /* gray */
}
.link-moriz span:nth-child(4) {
	color: #00adef; /* blue */
}
.link-moriz span:nth-child(5) {
	color: #d12229; /* red */
}

/* ! match link-moriz colours also with js/main.js file */

.link-info {
	color: #f285a5;
}
.link-info:hover,
.link-info.current {
	color: #00adef;
}
.link-shop {
	color: #00a14a;
}
.link-shop:hover {
	color: #d12229;
}

.about main {
	max-width: 1000px;
}

.swiper {
    flex: 1;
    width: 100%;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.swiper-slide {
    background-color: var(--col-bg);
}
.swiper-slide figure {
    width: 100%;
    height: 100%;
}
.swiper-slide figure[data-margin="true"] {
    padding: calc(var(--text-size)*4) 0;
}
.swiper-slide img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.swiper-slide figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: calc(var(--text-size)/4) calc(var(--text-size)*4);
    text-align: center;
}
.swiper-prev,
.swiper-next {
	position: absolute;
	z-index: 1;
	top: 0;
	height: 100%;
}
.swiper-prev {
	left: 0;
	width: 33.33%;
}
.swiper-next {
	right: 0;
	width: 66.66%;
}

.base {
	position: relative;
}
.base:before {
	content: attr(data-content);
	position: absolute;
	color: #fff;
    mix-blend-mode: difference;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}
.overlay {
	mix-blend-mode: saturation;
}


.spiral {
    position: absolute;
    z-index: 3;
    bottom: calc(var(--text-size)/4);
    right: calc(var(--text-size)/4);
    width: calc(var(--text-size)*3);
    mix-blend-mode: multiply;
    animation: none;
    --current-rotation: 0deg;
    /* animation: rotate360 1s linear infinite; */
}
@keyframes rotate360 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes rotateBack {
    from {
        transform: rotate(var(--current-rotation));
    }
    to {
        transform: rotate(0deg);
    }
}

.bg {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    width: calc(var(--text-size)*2);
    height: 100%;
    mix-blend-mode: multiply;
    animation: elastic 3s ease 1;
    transform-origin: center top;
	pointer-events: none;
}
@keyframes elastic {
  0% {
    transform: scaleY(0);
  }
  10% {
    transform: scaleY(0.5);
  }
  20% {
    transform: scaleY(0.2);
  }
  30% {
    transform: scaleY(0.8);
  }
  40% {
    transform: scaleY(0.2);
  }
  50% {
    transform: scaleY(0.8);
  }
  60% {
      transform: scaleY(0.5);
  }
  70% {
    transform: scaleY(1.1);
  }
  80% {
      transform: scaleY(0.9);
  }
  100% {
    transform: scaleY(1);
  }
}



@media all and (min-width: 900px) {

	header {
		display: flex;
		align-items: start;
		justify-content: space-between;
	}
	.bg {
		width: calc(var(--text-size)*4);
	}

}