@font-face {
    font-family: 'Avenir Book';
    src: url('Avenir-Book.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
	padding: 0;
	margin: 0;
	overflow-x: hidden;
}

.wrapper {
	background-color: #464739;
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.container {
	display: flex;
}

.media {
	width: 578px;
	height: 464px;
	position: relative;
}

.media-p3 {
	width: 437px;
	height: 528px;
	position: relative;
}

.media-p2 {
	width: 588px;
	height: 464px;
	position: relative;
}

.image {
	height: 100%;
	position: relative;
	left: 15px;
    top: -28px;
    transition: 0.5s;
    z-index: 100;
}

.text {
	width: 450px;
	height: 100%;
	margin-left: 60px;
	display: flex;
	flex-direction: column; 
  	transition: 2s;
	
}

.rect {
	width: 195px;
	height: 14px;
	background-color: #C44A5B;
	margin-right: 30px;
	margin-top: 40px;
}

.content {
	font-family: 'Avenir Book';
	font-size: 19px;
	line-height: 23px;
	color: #F3F4C1;
	margin-top: 30px;
	width: 100%;

}

.heading {
	z-index: 100;
	position: relative;
	left: -400px;
	transition: 2s;
}

.heading a {
	text-decoration: none;
	font-family: 'Playfair Display';
	font-style: italic;
	font-size: 150px;
	line-height: 150px;
	white-space: nowrap;
	color: #F3F4C1;
	letter-spacing: 0.05em;
}

.etnan a:hover {
	text-shadow: 0 0 40px #a8a411;
}

.glow-image {
	box-shadow: #33332a;
	opacity:100px;
}

.glow-image:hover {
	box-shadow: -12px 25px 0px #33332a;
}

.font-etel {
	font-size: 19px;
	line-height: 23px;
}

.font-index {
	font-size: 25px;
	line-height: 30px;
}

.font-year {
	font-size: 72px;
	line-height: 72px;
}

.dashed {
    --border-color: rgba(243, 244, 193, 0.21);
    --border-weight: 5px;
    --dash-size: 20px;
    --gap-size: 20px;
    width: 100%;
    height: 100%;
}

.puzzle-dashed {
	position: relative;
    left: 15px;
    top: -28px;
    display: flex;
    flex-direction: column;
}

.dashed:after {
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(90deg, var(--border-color) 100%, transparent 100%) top left no-repeat,
        linear-gradient(90deg, transparent calc(var(--gap-size) / 2), var(--border-color) calc(var(--gap-size) / 2), var(--border-color) calc(var(--gap-size) / 2 + var(--dash-size)), transparent calc(var(--gap-size) / 2 + var(--dash-size))) top center repeat-x,
        linear-gradient(90deg, var(--border-color) 100%, transparent 100%) top right no-repeat,
        
        linear-gradient(0deg, var(--border-color) 100%, transparent 100%) top left no-repeat,
        linear-gradient(0deg, transparent calc(var(--gap-size) / 2), var(--border-color) calc(var(--gap-size) / 2), var(--border-color) calc(var(--gap-size) / 2 + var(--dash-size)), transparent calc(var(--gap-size) / 2 + var(--dash-size))) center left repeat-y,
        linear-gradient(0deg, var(--border-color) 100%, transparent 100%) bottom left no-repeat,
        
        linear-gradient(90deg, var(--border-color) 100%, transparent 100%) bottom left no-repeat,
        linear-gradient(90deg, transparent calc(var(--gap-size) / 2), var(--border-color) calc(var(--gap-size) / 2), var(--border-color) calc(var(--gap-size) / 2 + var(--dash-size)), transparent calc(var(--gap-size) / 2 + var(--dash-size))) bottom center repeat-x,
        linear-gradient(90deg, var(--border-color) 100%, transparent 100%) bottom right no-repeat,
        
        linear-gradient(0deg, var(--border-color) 100%, transparent 100%) top right no-repeat,
        linear-gradient(0deg, transparent calc(var(--gap-size) / 2), var(--border-color) calc(var(--gap-size) / 2), var(--border-color) calc(var(--gap-size) / 2 + var(--dash-size)), transparent calc(var(--gap-size) / 2 + var(--dash-size))) center right repeat-y,
        linear-gradient(0deg, var(--border-color) 100%, transparent 100%) bottom right no-repeat;
    background-size: var(--dash-size) var(--border-weight), calc(var(--dash-size) + var(--gap-size)) var(--border-weight), var(--dash-size) var(--border-weight), var(--border-weight) var(--dash-size), var(--border-weight) calc(var(--dash-size) + var(--gap-size)), var(--border-weight) var(--dash-size);
}

.piece {
	z-index: 20;
	position: fixed;
	top: 0px;
	left: 0px;
}

.painting {
	height: 100%;
	display: none;
}

.solved-a {
	position: relative;
	top: 0;
	left: 0;
}

.next, .back {
	position: fixed;
	font-family: 'Avenir Book';
	font-size: 32px;
	text-decoration: none;
	color: #F3F4C1;
	transition: 0.3s;
	border-bottom: solid 8px transparent;
}

.next {
	right: 5%;
	bottom: 5%;
	display: none;
}

.back {
	left: 5%;
	bottom: 5%;
}

.next:hover, .back:hover {
	border-bottom: solid 8px #C44A5B;
}

.hidden-content {
	display: none;
}

.mini {
	display: none;
}

@media screen and (max-width: 768px) /* Mobile */ {
	.mini {
		display: flex;
	}

	.media {
		width: 289px;
		height: 232px;
		position: relative;
	}

	.media-p2 {
		width: 299px;
		height: 232px;
		position: relative;
	}

	.media-p3 {
		width: 218px;
		height: 264px;
		position: relative;
	}

	.font-etel {
		font-size: 9px;
		line-height: 11px;
	}

	.font-index {
		font-size: 12px;
		line-height: 15px;
	}

	.font-year {
		font-size: 36px;
		line-height: 36px;
	}

	.heading {
		left: -170px;
	}

	.heading a {
		font-size: 75px;
		line-height: 75px;
		letter-spacing: 0.025em;
	}

	.text {
		width: 225px;
		height: 100%;
		margin-left: 35px;
	}
}