/**
 * Śrubki reaktywacja
 * (c) kamilbaranski.com
 */

/**
 * boxmodel.css
 */

html {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

*, ::after, ::before {
	box-sizing: inherit;
	-webkit-box-sizing: inherit;
}

/**
 * moontime.css
 */

@font-face {
	font-family: MoonTime;
	/* src: url("../fonts/MoonTime-Regular.otf") format("opentype"); */
	src: url("../fonts/MoonTime.c.otf") format("opentype");
}

/**
 * body.css
 */

body {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	min-height: 100vh;
	align-items: center;
	margin: 0px;
	font-family: Lato, sans-serif;
	align-content: center;
}

a:link, a:visited, a:hover, a:active {
	color: black;
	text-decoration: none;
}

.nowrap {
	white-space: nowrap;
}

/**
 * background.css
 */

.background {
	display: block;
	margin: 0px;
	padding: 0px;
	left: 0px;
	top: 0px;
	width: 100vw;
	height: 100vh;
	position: fixed;
	transition:1s;
}

.background__allImages {
	width: calc(100vw + 582px);
	height: 100vh;
	display: flex;
	flex-wrap: wrap;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}

.background__image {
	opacity: 0.3;
	transition: opacity 0.3s;
}

.background__image:hover {
	opacity: 1;
}

.background--contactVisible {
	left:100%;
	transition: 2s;
}

/**
 * box.css
 */

.box {
	box-shadow: 0px 0px 40px #000f;
	background-color: #d0d0d088;
	/* padding: 20px; */
	border-radius: 15px;
}

/**
 * main.css
 */

.main {
	max-width: 800px;
	z-index: 2;
	margin: 130px 10px 50px 10px;
	transition: 3s;
	transform-style: preserve-3d;
	/* animation: turnAround 2s reverse 1; */
}

.main:hover:not(.main--contactVisible) {
	transform: scale(1.1);
	box-shadow: 0px 0px 80px #000c;
	transition: 0.5s;
}

.main--contactVisible {
	/* transform: scale(1.1) rotateY(180deg); */
	transform: scale(1.1) rotateY(560deg) rotateX(-365deg) rotateZ(-2deg);
	/* animation: turnAround 2s forwards 1; */
}

/* @keyframes turnAround {
	from {
		transform: scale(1.1) rotateY(0deg);
	}
	50% {
		transform: scale(0.8) rotateY(90deg);
	}
	to {
		transform: scale(1.1) rotateY(180deg);
	}
} */

@media (max-width:560px) {
	.main:hover:not(.main--contactVisible) {
		transform: scale(1.03);
	}
	.main--contactVisible {
		transform: scale(1.03) rotateY(560deg) rotateX(-365deg) rotateZ(-2deg);
	}
}

/**
 * header.css
 */

.header {
	margin-bottom: 40px;
	transform-style: preserve-3d;
}

.header__title {
	text-align: center;
	font-family: MoonTime;
	font-size: 180px;
	color: white;
	text-shadow: 0px 0px 40px hsl(55, 100%, 40%), -1px -1px 0 orange, 1px -1px 0 orange, -1px 1px 0 orange, 1px 1px 0 orange;
	margin: 0px 10px 30px 10px;
	line-height: 50%;
	transform: translateZ(40px);
}

@media (max-width: 500px) {
	.header__title {
		font-size: calc(100vw / 2.7);
	}
}

.header__additionalCaption {
	font-family: Bangers;
	margin-top: 0px;
	margin-right: 15%;
	text-align: right;
	font-size: 40px;
	color: white;
	text-shadow: 0px 0px 20px hsl(85, 100%, 40%), -1px -1px 0 hsl(100, 100%, 70%), 1px -1px 0 hsl(100, 100%, 70%), -1px 1px 0 hsl(100, 100%, 70%), 1px 1px 0 hsl(100, 100%, 70%);
}

/**
 * imageContainer.css
 */
 
.imageContainer {
	position: relative;
	display: inline-block;
	height: 0;
	padding-bottom: 90%;
	width: 100%;
	overflow: hidden;
}

.imageContainer__image {
	width: 100%;
	height: 100%;
	max-width: 800px;
	object-fit: cover;
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	object-fit: cover;
	object-position: 25% 25%;
	cx: 0;
}

/**
 * socialmedia.css
 */

.socialmedia {
	list-style-type: none;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	margin: 10px;
	padding: 10px;
}

.socialmedia a {
	background-color: inherit;
}

.socialmedia__button {
	background-color: inherit;
	border: none;
	padding: 0px;
	outline: 0px;
}

.socialmedia__image {
	width: 64px;
	height: 64px;
	margin: 15px;
	box-shadow: 3px 3px 4px #0007, 0px 0px 30px white;
	transition: 0.1s;
	border-radius: 10%;
	filter: contrast(0.8);
}

.socialmedia__image:hover {
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 2px #000, 0px 0px 20px white;
	filter: contrast(1.2);
}

.socialmedia__image:active {
	transform: scale(0.90);
	filter: contrast(1.2) brightness(1.1)
}

@media (max-width: 700px) {
	.socialmedia__image {
		width: calc(100vw / 11.5);
		height: calc(100vw / 11.5);
		margin: calc(100vw / 55);
	}
}

/**
 * footer.css
 */

.footer {
	text-align: center;
	color: #999;
}

.footer__paragraph {
	background-color: #fff3;
	margin: auto;
	width: max-content;
	padding: 10px;
	border-radius: 20px;
	box-shadow: 0px 0px 20px #fff5;
}

.footer a {
	color: inherit;
}

/**
 * contact.css
 */

.contact {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #eeee;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	transform: rotateY(180deg) translateZ(32px);
	backface-visibility: hidden;
	font-size: 19px;
	transform-style: preserve-3d;
}

.contact__srubkaIcon {
	width:96px;
	height:96px;
	transform: translateZ(0px);
	opacity: 0.15;
	margin-bottom:80px;
}

.contact__list {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: auto;
}

.contact__listItem {
	margin: 15px;
}

/**
 * cube.css
 */

.cube {
	perspective: 5000px;
	perspective-origin: 500% 300%;
}

.cube:hover:not(.main--contactVisible) {
	perspective: 3000px;
}

.cube__smallWall {
	background: #fffd;
	position: absolute;
	box-shadow:3px 3px 30px white;
}

.cube__horizontal {
	width: calc(100% - 30px);
	height: 32px;
	left: 15px;
}

.cube__vertical {
	height: calc(100% - 20px);
	width: 32px;
	top: 10px;	
}

.cube__top {
	top: 0px;
	transform: rotateX(-90deg) translateZ(-16px) translateY(16px);
}

.cube__bottom {
	transform: rotateX(90deg) translateZ(16px) translateY(-16px)
}

.cube__left {
	transform: rotateY(-90deg) translateZ(16px) translateX(-16px);
}

.cube__right {
	transform: rotateY(-90deg) translateZ(-16px) translateX(-16px);
	right:0px;
}