/*  --- BASICS --- */

@media all {
	
	.desktop {
		visibility: visible;
	}
	
	.mobile {
		visibility: hidden;
		display: none;
	}
	
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
		font-family: 'Varela Round', sans-serif;
	}
	
	#lens
	{
		position: relative;
		overflow: hidden;
		width: 100vw;
		height: 100vh;
	}
	
	body {
		position: absolute;
		top: 0;
		left: 0;
		overflow: hidden;
		transition: top 0.5s, left 0.5s;
		background-color: black;
	}
	
	#map {
		position: absolute;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		transition: top 0.5s, left 0.5s;
	}
	
	#map[area="home"] {
		top: 0vh;
		left: 0;
	}
	
	#map[area="about-me"] {
		top: 120vh;
		left: 0;
	}
	
	#map[area="skills"] {
		top: 220vh;
		left: 0;
	}
	
	#map[area="career"] {
		top: 120vh;
		left: 100vw;
	}
	
	#map[area="projects"] {
		top: 0;
		left: -120vw;
	}
	
	#map[area="contact"] {
		top: -120vh;
		left: 0;
	}
	
	#map[area="garden"] {
		top: 0;
		left: 120vw;
	}
	
	#map[area="secret-projects"] {
		top: 120vh;
		left: -120vw;
	}
	
	/*
	.body:hover & {
		transform: scale(2);
	}*/
	
	.section {
		min-height: 100vh;
		width: 100vw;
		position: absolute;
		padding: 0;
		margin: 0;
	}
	
	.content {
		height: 100vh;
		width: 100vw;
		display: flex;
	}
	
	.decoration {
		pointer-events: none;
		position: absolute;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		overflow: hidden;
	}
	
	.gap {
		pointer-events: none;
		position: absolute;
		top: 0;
		left: 0;
		overflow: hidden;
	}
	
	.gap-top {
		width: 100vw;
		height: 20vh;
	}
	
	.gap-side {
		width: 20vw;
		height: 100vh;
	}
	
	#navigation {
		display: none;
	}
	
	.grass {
		display: flex;
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.grass-small,
	.grass-big {
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		position: absolute;
		top: 0;
		left: 0;
		width: 8vh;
		height: 8vh;
		opacity: 0.7;
	}
	
	.grass-small {
		background-image: url("../img/home/grassSmall.gif");
	}
	
	.grass-big {
		background-image: url("../img/home/grassBig.gif");
	}
}

/*  --- HOME --- */

@media all {

	/* Content */
	
	#home {
		background-color: #9fd593;
	}
	
	#home .content {
		display: flex;
		width: 100%;
		height: 100%;
	}
	
	#home .overlap-container {
		display: flex;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		pointer-events: none;
	}
	
	#home .home-text {
		text-align: center;
		margin: auto;
		pointer-events: all;
		opacity: 0;
		transition: opacity 2s 3s;
		position: relative;
		width: 90%;
		margin-right: 10%;
		display: flex;
		justify-content: center;
	}
	
	#map.start #home .home-text {
		opacity: 1;
	}
	
	#home .home-text p {
		font-size: 18pt;
		font-weight: 600;
		color: #0000006f;
		position: absolute;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.25s;
		
		-webkit-user-select: none;  /* Chrome all / Safari all */
		-moz-user-select: none;     /* Firefox all */
		-ms-user-select: none;      /* IE 10+ */
		user-select: none;          /* Likely future */   
	}
	
	#home .home-text p[active="true"] {
		opacity: 1;
		transition: opacity 0.5s 0.25s;
		
		-webkit-user-select: all;   /* Chrome all / Safari all */
		-moz-user-select: all;      /* Firefox all */
		-ms-user-select: all;       /* IE 10+ */
		user-select: all;           /* Likely future */   
	}
	
	#home .cookie-text {
		text-align: center;
		opacity: 0;
		margin: auto;
		pointer-events: all;
		transition: opacity 1s;
		pointer-events: none;
	}
	
	#map.nocookie #home .cookie-text {
		opacity: 1;
		pointer-events: all;
	}
	
	#home .navigation {
		opacity: 0;
		transition: opacity 1s;
	}
	
	#map.start #home .navigation {
		opacity: 1;
	}
	
	#home .cookie-text h1 {
		font-size: 22pt;
		font-weight: 600;
		color: #0000006f;
		margin-bottom: 20px;
	}
	
	#home .cookie-text p {
		font-size: 12pt;
		font-weight: 600;
		color: #0000006f;
		margin-bottom: 20px;
	}
	
	#home .cookie-text a {
		color: #0000008f;
	}
	#home .cookie-text a:focus,
	#home .cookie-text a:hover {
		color: #000000af;
	}
	
	#home .cookie-text button {
		padding: 5px 30px;
		cursor: pointer;
		background-color: #e9e9ed;
		border: solid;
		border-color: #676774;
		border-width: 1px;
		border-radius: 5px;
		position: relative;
		z-index: 1;
	}
	
	#home .cookie-text button:hover {
		background-color: #d0d0d7;
	}
	
	#home .cookie-text button:active {
		background-color: #b1b1b9;
	}
	
	#home .links {
		text-align: center;
		margin: auto 10px 8vh auto;
		pointer-events: all;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	
	#home .links a {
		font-size: 16pt;
		font-weight: 600;
		color: #0000006f;
		text-align: right;
	}
	#home .links a:focus,
	#home .links a:hover {
		color: #000000af;
	}
	
	#home .copyright {
		text-align: center;
		margin: auto auto 8vh 10px;
		pointer-events: all;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	
	#home .copyright p {
		font-size: 12pt;
		font-weight: 600;
		color: #0000006f;
		text-align: left;
	}
	
	/* Decoration */
	
	#home .decoration {
		overflow: inherit;
	}
	
	#home .decoration .top {
		height: 20%;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	#home .decoration .top-wall {
		height: 100%;
		width:140%;
		background-image: url("../img/home/caveWall.png");
		background-position: center;
		background-repeat: repeat-x;
		background-size: auto 100%;
		position: relative;
		-webkit-clip-path: polygon(98% 0, 94% 30%, 90% 100%, 0 100%, 0 0);
		clip-path: polygon(98% 0, 94% 30%, 90% 100%, 0 100%, 0 0);
	}
	
	#home .decoration .cave-entrance {
		height: 100%;
		background-image: url("../img/home/caveEntrance.png");
		background-position: center;
		background-repeat: no-repeat;
		background-size: auto 100%;
		position: relative;
	}
	
	#home .decoration .house-field {
		height: 30%;
		margin-top: 20vh;
		margin-left: 40%;
		margin-right: 20%;
	}
	
	@media only screen and (max-width: 1725px) {
	  
		#home .decoration .house-field {
			height: 25%;
			margin-top: 35vh;
		}
	}
	
	#home .decoration .house {
		width: 100%;
		height: 100%;
	}
	
	#home .decoration .house-back,
	#home .decoration .me,
	#home .decoration .me2,
	#home .decoration .house-front {
		width: 100%;
		height: 100%;
		background-position: right;
		background-repeat: no-repeat;
		background-size: contain;
	}
	
	#home .decoration .house-back {
		background-image: url("../img/home/houseBack.png");
	}
	
	#home .decoration .house-front {
		display: flex;
		background-image: url("../img/home/houseFront.png");
	}
	
	#home .decoration .house-front button {
		width: 8vh;
		height: 8vh;
		margin: auto;
		margin-right: auto;
		margin-bottom: auto;
		margin-right: 45vh;
		margin-bottom: 9vh;
		border: none;
		background-color: transparent;
		cursor: pointer;
		pointer-events: all;
		display: none
	}
	
	#home .decoration .house-front button.show {
		display: block;
	}
	
	
	@media only screen and (max-width: 1725px) {
	  
		#home .decoration .house-front button {
			width: 7vh;
			height: 7vh;
			margin-right: 37.4vh;
			margin-bottom: 7.5vh;
		}
	}
	@media only screen and (max-aspect-ratio: 864/734) {
		
		#home .decoration .house-front button {
			width: 7vw;
			height: 7vw;
			margin-right: 31.4vw;
		}
	}
	
	#home .grass1 {
		margin-top: 25vh;
		margin-left: 25vw;
	}
	
	#home .grass2 {
		margin-top: 70vh;
		margin-left: 35vw;
	}
	
	#home .grass3 {
		margin-top: 73vh;
		margin-left: 38vw;
	}
	
	#home .grass4 {
		margin-top: 60vh;
		margin-left: 80vw;
	}
}

/*  --- ABOUT ME --- */

@media all {
	
	/* Gap */
	
	#about-me .gap {
		top: 100vh;
		background-image: linear-gradient(#403423, #605744);
	}
	
	#about-me .inner-gap {
		width: 100%;
		height: 100%;
		background-image: url("../img/about/gap.png");
		background-position: center;
		background-repeat: repeat-x;
		background-size: auto 100%;
	}
	
	/* Content */
	
	#about-me {
		background-color: #685533;
		top: -120vh;
	}
	
	#about-me .about-me-text {
		margin: 30vh auto;
		width: 40%;
		max-width: 800px;
	}
	
	#about-me .about-me-text p {
		text-align: justify;
		font-size: 16pt;
		color: #bdb89a;
		z-index: 2;
		position: relative;
	}
	
	/* Petorio */
	
	#about-me .petorio {
		margin-right: 12vh;
	}
	
	#about-me .petorio .pic1 {
		background-image: url("../img/about/logoPetorioGray.png");
	}
	
	#about-me .petorio .pic2 {
		background-image: url("../img/about/logoPetorio.png");
	}

	/* Navigation */

	#about-me .nav-button.nav-west {
		margin-left: 10vh;
		margin-right: -10vh;
		height: 15vh;
		display: flex;
    justify-content: flex-start;
    align-items: center;
	}

	#about-me .nav-button.nav-east {
		margin-right: 10vh;
		margin-left: -10vh;
		height: 15vh;
		display: flex;
    justify-content: flex-end;
    align-items: center;
	}
	
	/* Decoration */

	
	#about-me .entrance.entrance-top.desktop {
		margin-top: 0;
		position: absolute;
		transform: scale(2, -0.6);
		opacity: 0.2;
	}
	
	#about-me .entrance.entrance-left.desktop {
		margin-top: 0;
    position: absolute;
    opacity: 0.2;
    margin-left: 0;
    width: 10vw;
    height: 100%;
    transform: rotate(90deg) scale(4, 3);
    background-position: left;
	}
	
	#about-me .top, #about-me .bottom, #about-me .left, #about-me .right {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 10%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	#about-me .top-inner, #about-me .top-outer, #about-me .bottom-inner, #about-me .bottom-outer {
		background-position: center;
		background-repeat: repeat-x;
		background-size: auto 100%;
		height: 100%;
	}
	
	#about-me .left-inner, #about-me .left-outer, #about-me .right-inner, #about-me .right-outer {
		background-position: center;
		background-repeat: repeat-y;
		background-size: 100% auto;
		width: 100%;
	}
	
	#about-me .left-outer, #about-me .top-outer, #about-me .right-outer, #about-me .bottom-outer {
		position: relative;
		z-index: 1;
	}
	
	/* Top */
	
	#about-me .top {
		width: 100%;
		height: 10vh;
		flex-direction: column;
	}
	
	#about-me .top-inner {
		width: 100%;
		background-image: url("../img/about/topInnerWall.png");
	}
	
	#about-me .top-outer {
		width: 100%;
		background-image: url("../img/about/topOuterWall.png");
	}
	
	/* Bottom */
	
	#about-me .bottom {
		width: 100%;
		height: 10vh;
		flex-direction: column;
		margin-top: 90vh;
	}
	
	#about-me .bottom-inner {
		width: 100%;
		background-image: url("../img/about/bottomInnerWall.png");
	}
	
	#about-me .bottom-outer {
		width: 100%;
		background-image: url("../img/about/bottomOuterWall.png");
	}
	
	/* Left */
	
	#about-me .left {
		width: 10vh;
		height: 100%;
		flex-direction: row;
	}
	
	#about-me .left-inner {
		height: 100%;
		background-image: url("../img/about/leftInnerWall.png");
	}
	
	#about-me .left-outer {
		height: 100%;
		background-image: url("../img/about/leftOuterWall.png");
	}
	
	/* Right */
	
	#about-me .right {
		width: 10vh;
		height: 100%;
		flex-direction: row;
		margin-left: calc(100vw - 10vh);
	}
	
	#about-me .right-inner {
		height: 100%;
		background-image: url("../img/about/rightInnerWall.png");
	}
	
	#about-me .right-outer {
		height: 100%;
		background-image: url("../img/about/rightOuterWall.png");
	}
	
	/* Entrance */
	
	#about-me .entrance {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 30vh;
		margin-top: 70vh;
		
		background-image: url("../img/about/caveLight.png");
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
	}
	
	/* Fireplaces */
	
	#about-me .fireplaces {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		pointer-events: none;
		display: flex;
		justify-content: space-between;
	}
	
	#about-me .fireplaces.mobile {
		display: none;
	}
	
	#about-me .fireplace {
		height: 40vh;
		width: 40vh;
		display: block;
		padding: 0;
		border: 0;
		pointer-events: all;
		background-image: url("../img/about/fireBackOut.png");
		background-size: contain;
		background-repeat: no-repeat;
		margin: 15vh max(15vh, 10vw);
		display: flex;
		max-width: 23vw;
		max-height: 23vw;
	}
	
	#about-me .fireplace.active {
		background-image: url("../img/about/fireBack.png");
	}
	
	#about-me .fire {
		width: 30%;
		height: 30%;
		margin: 26% auto;
		cursor: pointer;
		background-color: transparent;
		border: none;
		padding: 0;
	}
	
	/* Presskits */
	
	
	#about-me .fire .inner {
		width: 100%;
		height: 100%;
		background-position: top;
		background-repeat: no-repeat;
		background-size: contain;
	}
	
	#about-me .fire .pic1 {
		opacity: 0;
		background-image: url("../img/about/fire.gif");
		/*transition: all 0.25s;*/
	}
	
	#about-me .fireplace.active .fire .pic1 {
		opacity: 1;
	}
	
	#about-me .fire .pic2 {
		opacity: 1;
		margin-top: -80%;
	}
	
}

/*  --- SKILLS --- */

@media all {
	
	/* Content */
	
	#skills {
		background-color: #685533;
		top: -220vh;
	}
	
	#skills .skills-container {
		display: flex;
    flex-direction: column;
    justify-content: space-between;
		margin: 20vh auto;
		width: 60%;
		max-width: 1200px;
		width: min(1200px, 50vw);
    height: min(500px, 45vh);
		
	}
	
	#skills .skills-text {
		text-align: center;
		justify-content: center;
		align-items: center;
		display: flex;
	}
	
	#skills .skills-text p {
		font-size: 18pt;
		font-weight: 600;
		color: #bdb89a;
		position: absolute;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.25s;
		
		-webkit-user-select: none;  /* Chrome all / Safari all */
		-moz-user-select: none;     /* Firefox all */
		-ms-user-select: none;      /* IE 10+ */
		user-select: none;          /* Likely future */ 
		margin-top: -10vh;  
	}

	#skills .skills-text p[active="true"] {
		opacity: 1;
		transition: opacity 0.5s 0.25s;
		
		-webkit-user-select: all;   /* Chrome all / Safari all */
		-moz-user-select: all;      /* Firefox all */
		-ms-user-select: all;       /* IE 10+ */
		user-select: all;           /* Likely future */   
	}

	#skills .skills-grid {
		display: grid;
		gap: 10px;
		width: 100%;
		grid-template-columns: repeat( 3, 1fr);
		margin-top: 30px;
		gap: 5vh;
	}

	#skills .skill-container {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		cursor: pointer;
		transition: transform 0.2s;
		background-color: transparent;
    border: none;
	}

	#skills .skill-container:hover,
	#skills .skill-container:focus {
		transform: scale(1.1);
	}

	#skills .skill-image {
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		background-image: var(--careerImage);
		color: #bdb89a;
		font-size: 1.5vw;
    margin-bottom: 1vw;
	}

	#skills .skill-rating {
		display: flex;
		gap: 5px;
		justify-content: center;
		align-items: center;
	}

	#skills .skill-rating-bar {
		width: min(15px, 0.8vw);
		height: min(35px, 1.5vw);
		background-color: #858380;
		opacity: 0.5;
		border-radius: 5px;
	}

	#skills .skill-rating-bar.full {
		width: min(20px, 1vw);
		height: min(40px, 2vw);
		background-color: #dfdccb;
		opacity: 1;
	}
	
	/* Decoration */
	
	#skills .top, #skills .bottom, #skills .left, #skills .right {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 10%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	#skills .top-inner, #skills .top-outer, #skills .bottom-inner, #skills .bottom-outer {
		background-position: center;
		background-repeat: repeat-x;
		background-size: auto 100%;
		height: 100%;
	}
	
	#skills .left-inner, #skills .left-outer, #skills .right-inner, #skills .right-outer {
		background-position: center;
		background-repeat: repeat-y;
		background-size: 100% auto;
		width: 100%;
	}
	
	#skills .left-outer, #skills .top-outer, #skills .right-outer, #skills .bottom-outer {
		position: relative;
		z-index: 1;
	}
	
	/* Top */
	
	#skills .top {
		width: 100%;
		height: 10vh;
		flex-direction: column;
	}
	
	#skills .top-inner {
		width: 100%;
		background-image: url("../img/about/topInnerWall.png");
	}
	
	#skills .top-outer {
		width: 100%;
		background-image: url("../img/about/topOuterWall.png");
	}
	
	/* Bottom */
	
	#skills .bottom {
		width: 100%;
		height: 10vh;
		flex-direction: column;
		margin-top: 90vh;
	}
	
	#skills .bottom-inner {
		width: 100%;
		background-image: url("../img/about/bottomInnerWall.png");
	}
	
	#skills .bottom-outer {
		width: 100%;
		background-image: url("../img/about/bottomOuterWall.png");
	}
	
	/* Left */
	
	#skills .left {
		width: 10vh;
		height: 100%;
		flex-direction: row;
	}
	
	#skills .left-inner {
		height: 100%;
		background-image: url("../img/about/leftInnerWall.png");
	}
	
	#skills .left-outer {
		height: 100%;
		background-image: url("../img/about/leftOuterWall.png");
	}
	
	/* Right */
	
	#skills .right {
		width: 10vh;
		height: 100%;
		flex-direction: row;
		margin-left: calc(100vw - 10vh);
	}
	
	#skills .right-inner {
		height: 100%;
		background-image: url("../img/about/rightInnerWall.png");
	}
	
	#skills .right-outer {
		height: 100%;
		background-image: url("../img/about/rightOuterWall.png");
	}
	
	/* Entrance */
	
	#skills .entrance {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 30vh;
		margin-top: 75vh;
		
		background-image: url("../img/about/caveLight.png");
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
		opacity: 0.3;
		transform: scale(2, 1);
		background-position: bottom;
	}
	
}

/*  --- CAREER --- */

@media all {
	
	/* Content */
	
	#career {
		background-color: #685533;
		top: -120vh;
		left: -100vw;
		background-image: url("../img/career/careerGround.png");
		background-position: bottom;
		background-size: 100% 100%;
	}
	
	#career .career-container {
		display: flex;
    flex-direction: column;
    justify-content: space-between;
		margin: 20vh auto;
		width: 60%;
		max-width: 1200px;
		width: min(1200px, 50vw);
		
	}
	
	#career .career-text {
		text-align: center;
		justify-content: center;
		align-items: center;
		display: flex;
	}
	
	#career .career-text p {
		font-size: 18pt;
		font-weight: 600;
		color: #bdb89a;
		position: absolute;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.25s;
		
		-webkit-user-select: none;  /* Chrome all / Safari all */
		-moz-user-select: none;     /* Firefox all */
		-ms-user-select: none;      /* IE 10+ */
		user-select: none;          /* Likely future */   
	}

	#career .career-text p[active="true"] {
		opacity: 1;
		transition: opacity 0.5s 0.25s;
		
		-webkit-user-select: all;   /* Chrome all / Safari all */
		-moz-user-select: all;      /* Firefox all */
		-ms-user-select: all;       /* IE 10+ */
		user-select: all;           /* Likely future */   
	}

	#career .career-grid {
		display: grid;
		gap: 10px;
		width: 100%;
		grid-template-columns: repeat( 3, 1fr);
		margin-top: 30px;
	}

	#career .career-end {
		display: flex;
		margin-top: 30px;
		gap: 30px;
		width: 100%;
		justify-content: center;
		align-items: center;
	}

	#career .career-image-container {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#career .career-end .career-image-container {
		width: auto;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#career .career-image {
		height: min(20vh, 10vw);
		width: min(20vh, 10vw);
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		background-image: var(--careerImage);
		cursor: pointer;
		transition: transform 0.5s;
		background-color: transparent;
    border: none;
	}

	#career .career-image:hover,
	#career .career-image:focus {
		transform: scale(1.1);
	}
	

	/* Navigation */

	#career .nav-button.nav-west {
		margin-left: 10vh;
		margin-right: -10vh;
		height: 15vh;
		display: flex;
    justify-content: flex-start;
    align-items: center;
	}

	#career .nav-button.nav-east {
		margin-right: 10vh;
		margin-left: -10vh;
		height: 15vh;
		display: flex;
    justify-content: flex-end;
    align-items: center;
	}

	/* Decoration */
	
	#career .top, #career .bottom, #career .left, #career .right {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 10%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	#career .top-inner, #career .top-outer, #career .bottom-inner, #career .bottom-outer {
		background-position: center;
		background-repeat: repeat-x;
		background-size: auto 100%;
		height: 100%;
	}
	
	#career .left-inner, #career .left-outer, #career .right-inner, #career .right-outer {
		background-position: center;
		background-repeat: repeat-y;
		background-size: 100% auto;
		width: 100%;
	}
	
	#career .left-outer, #career .top-outer, #career .right-outer, #career .bottom-outer {
		position: relative;
		z-index: 1;
	}
	
	/* Top */
	
	#career .top {
		width: 100%;
		height: 10vh;
		flex-direction: column;
	}
	
	#career .top-inner {
		width: 100%;
		background-image: url("../img/about/topInnerWall.png");
	}
	
	#career .top-outer {
		width: 100%;
		background-image: url("../img/about/topOuterWall.png");
	}
	
	/* Bottom */
	
	#career .bottom {
		width: 100%;
		height: 10vh;
		flex-direction: column;
		margin-top: 90vh;
	}
	
	#career .bottom-inner {
		width: 100%;
		background-image: url("../img/about/bottomInnerWall.png");
	}
	
	#career .bottom-outer {
		width: 100%;
		background-image: url("../img/about/bottomOuterWall.png");
	}
	
	/* Left */
	
	#career .left {
		width: 10vh;
		height: 100%;
		flex-direction: row;
	}
	
	#career .left-inner {
		height: 100%;
		background-image: url("../img/about/leftInnerWall.png");
	}
	
	#career .left-outer {
		height: 100%;
		background-image: url("../img/about/leftOuterWall.png");
	}
	
	/* Right */
	
	#career .right {
		width: 10vh;
		height: 100%;
		flex-direction: row;
		margin-left: calc(100vw - 10vh);
	}
	
	#career .right-inner {
		height: 100%;
		background-image: url("../img/about/rightInnerWall.png");
	}
	
	#career .right-outer {
		height: 100%;
		background-image: url("../img/about/rightOuterWall.png");
	}
	
	/* Entrance */
	
	#career .entrance {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 30vh;
		margin-top: 70vh;
		
		background-image: url("../img/about/caveLight.png");
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
	}
	
}


/*  --- PROJECTS --- */

@media all {

	/* Gap */
	
	#projects .gap {
		left: -20vw;
		background-color: #9fd593;
		z-index: -1;
	}
	
	/* Content */
	
	#projects {
		background-color: #9fd593;
		left: 120vw;
	}
	
	#projects .content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	#projects .projects-text {
		text-align: center;
		margin: auto;
	}
	
	#projects .projects-text p {
		font-size: 18pt;
		font-weight: 600;
		color: #0000006f;
	}
	
	/* Plood Path */
	
	#projects .blood-path {
		width: 100vw;
		height: 5vh;
		margin-top: 3vh;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	#projects .blood-path-inner {
		width: 3vh;
		height: 100%;
		margin-left: 34vh;
		cursor: pointer;
		background: transparent;
		border: 0;
		background-image: url("../img/projects/bloodPath.png");
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		filter: drop-shadow(0px 0px 0.1rem #faa0);
	}
	
	#projects .blood-path-inner:hover,
	#projects .blood-path-inner:focus {
		filter: drop-shadow(0px 0px 0.5vh #faaf);
	}
	
	/* Chests */
	
	.projects .chest-area {
		width: 100vw;
		height: 30vh;
		margin-top: 10vh;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	
	.projects .chest {
		width: 40vh;
		height: 100%;
		margin: 0;
	}
	
	.chest .inner {
		width:100%;
		height: 100%;
		transition: all 0.2s;
	}
	
	.projects .chest:hover .inner,
	.projects .chest:focus-within .inner, 
	.projects .chest.open .inner {
		width: 110%;
		height: 110%;
		margin: -5% -5%;
	}
	
	.projects .chest-decor {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.projects .chest-top, .projects .chest-mid, .projects .chest-bot {
		width:100%;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	
	.projects .chest-top {
		background-image: url("../img/projects/chestTop.png");
		height: 23.9%;
		margin-top: auto;
		display: flex;
		transition: height 0.5s 0.2s;
		margin-bottom: -1px;
	}
	
	.projects .chest.open .chest-top {
		height: 10%;
		transition: height 0.5s;
	}
	
	.projects .chest-top p {
		font-family: 'Cinzel', serif;
		color: #564a36;
		position: relative;
		margin: auto;
		font-size: 3.5vh;
		top: 0%;
		transition: transform 0.5s 0.2s, top 0.2s 0.2s, font-size 0.2s;
		font-weight: 600;
	}
	
	.projects .chest:hover .chest-top p,
	.projects .chest:focus-within .chest-top p,
	.projects .chest.open .chest-top p {
		font-size: 3.85vh;
	}
	
	.projects .chest.open .chest-top p {
		transition: transform 0.5s, top 1s, font-size 0.2s;
		transform: scale(1, 0.4);
		top: -30%;
	}
	
	.projects .chest-mid {
		background-image: url("../img/projects/chestMiddle.png");
		height: 0%;
		transition: height 0.5s 0.2s;
		margin-bottom: -1px;
	}
	
	.projects .chest.open .chest-mid {
		height: 29%;
		transition: height 0.5s;
	}
	
	.projects .chest-bot {
		background-image: url("../img/projects/chestBottom.png");
		height: 47.1%;
	}
	
	.projects .chest-button {
		position: relative;
		top: -100%;
		width: 60%;
		height: 80%;
		margin: auto;
		cursor: pointer;
		display: block;
		padding: 0;
		background: transparent;
		border: 0;
	}
	
	.projects .chest[project="web"], .projects .chest[project="other"] {
		height: 80%;
		width: 32vh;
	}
	
	.projects .chest[project="web"] p, .projects .chest[project="other"] p {
		font-size: 2.8vh;
	}
	
	.projects .chest[project="web"]:hover .chest-top p,
	.projects .chest[project="web"]:focus-within .chest-top p,
	.projects .chest[project="web"].open .chest-top p,
	.projects .chest[project="other"]:hover .chest-top p,
	.projects .chest[project="other"]:focus-within .chest-top p,
	.projects .chest[project="other"].open .chest-top p {
		font-size: 3.08vh;
	}
	
	@media only screen and (max-width: 1600px) and (min-height: 600px) {
	  
		
		.projects .chest {
			height: 80%;
			width: 32vh;
		}
		
		.projects .chest p {
			font-size: 2.8vh;
		}
		
		.projects .chest:hover .chest-top p,
		.projects .chest:focus-within .chest-top p,
		.projects .chest.open .chest-top p {
			font-size: 3.08vh;
		}
		
		.projects .chest[project="web"], .projects .chest[project="other"] {
			height: 64%;
			width: 25.6vh;
			margin: 0 -5%;
		}
		
		.projects .chest[project="web"] p, .projects .chest[project="other"] p {
			font-size: 2.24vh;
		}
		
		.projects .chest[project="web"]:hover .chest-top p,
		.projects .chest[project="web"]:focus-within .chest-top p,
		.projects .chest[project="web"].open .chest-top p,
		.projects .chest[project="other"]:hover .chest-top p,
		.projects .chest[project="other"]:focus-within .chest-top p,
		.projects .chest[project="other"].open .chest-top p {
			font-size: 2.464vh;
		}
	}
	
	/* Paper */
	
	#paper {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		overflow: hidden;
		pointer-events: none;
		opacity: 0;
		transition: all 0s 0.5s;
		z-index: 5;
	}
	
	#paper.open {
		pointer-events: all;
		opacity: 1;
		transition: all 0s 0s;
	}
	
	
	#paper .paper-background {
		width: 100%;
		height: 100%;
		background-color: #00000000;
		position: absolute;
		z-index: 5;
		transition: all 0.5s;
		overflow-y: scroll;
	}
	
	#paper.open .paper-background {
		pointer-events: all;
		background-color: #000000aa;
	}
	
	#paper .paper-front {
		max-width: 1200px;
		width: 80%;
		min-height: 100%;
		margin:  100vh auto 10vh auto;
		background-color: #dedbb3;
		position: relative;
		z-index: 5;
		border-radius: 3vh;
		transition: all 0.5s;
		padding-bottom: 10vh;
		overflow: hidden;
	}
	
	#paper.open .paper-front {
		margin-top:  10vh;
	}
	
	#paper .exit {
		height: 10vh;
		width: 100%;
		display: flex;
	}
	
	#paper .exit-button {
		height: 9vh;
		width: 9vh;
		margin: 0;
		margin-left: auto;
		background-color: #ff000040;
		border-radius: 0 3vh 0 3vh;
		border: 0;
		font-size: 4vh;
		font-family: 'Varela Round', sans-serif;
		cursor: pointer;
		color: #00000040;
		transition: all 0.1s;
	}
	
	#paper .exit-button:hover,
	#paper .exit-button:focus {
		height: 10vh;
		width: 10vh;
		background-color: #ff000060;
		color: #00000060;
	}
	
	#paper .paper-content {
		display: none;
	}
	
	#paper .paper-content.open {
		display: block;
	}
	
	#paper h1 {
		padding-left: 20px;
		padding-right: 20px;
		text-align: center;
		font-size: 50pt;
		font-family: 'Cinzel', serif;
		color: #00000050;
	}
	
	#paper .soon {
		font-size: 25pt;
	}
	
	#paper .content-description {
		margin: 50px 15%;
		font-size: 16pt;
		color: #000000bb;
		text-align: left;
	}
	
	/* Paper Content */
	
	#paper p,
	#paper ul,
	#paper h2	{
		padding-left: 5%;
		padding-right: 5%;
		font-size: 12pt;
		margin: 30px 0;
	}
	
	#paper ul	{
		padding-left: 60px;
		margin-top: 10px;
	}
	
	#paper h2	{
		font-size: 16pt;
		margin-bottom: 10px;
	}
	
	#paper a {
		color: #fa5c5c;
	}
	
	#paper a:focus,
	#paper a:hover {
		color: #e34343;
	}
	
	#paper .banner {
		width: 100%;
		display: block;
	}

	#paper .career-img {
		height: min(200px, 20vw);
		display: block;
    margin: auto;

	}
	
	#paper .project-video {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	#paper .project-video .cookie-holder {
		width: min(60vw, 800px);
		height: min(33.75vw, 450px);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-color: black;
		color: white;
	}
	
	#paper .project-video .cookie-holder p {
		text-align: center;
	}
	
	#paper .project-video .cookie-holder p a {
		color: #fa5c5c;
	}
	
	#paper .project-video .cookie-holder p a:focus,
	#paper .project-video .cookie-holder p a:hover {
		color: #e34343;
	}
	
	#paper .project-video .cookie-holder button {
		cursor: pointer;
		background-color: #e9e9ed;
		border: solid;
		border-color: #676774;
		border-width: 1px;
		border-radius: 5px;
		position: relative;
		width: 14%;
		height: 7%;
		z-index: 1;
	}
	
	#paper .project-video .cookie-holder button:hover {
		background-color: #d0d0d7;
	}
	
	#paper .project-video .cookie-holder button:active {
		background-color: #b1b1b9;
	}
	
	#paper .project-video iframe {
		margin: 0 auto;
		width: min(60vw, 800px);
		height: min(33.75vw, 450px);
	}
	
	#paper .project-description {
		display: flex;
		justify-content: center;
		padding: 5% 8%;
	}
	
	#paper .project-text {
		width: 70%;
	}
	
	#paper .sidebar {
		width: 30%;
	}
	
	#paper .sidebar button {
		width: 90%;
		display: block;
		margin: 10px auto;
		cursor: pointer;
		background-color: transparent;
		border: none;
		
	}
	
	#paper .sidebar img {
		width: 100%;
		display: block;
		pointer-events: none;
	}
	
	#paper .paper-scroll-up {
		display: block;
		height: 5vh;
		width: 20vh;
		background-color: #666;
		margin: 0 auto;
		margin-bottom: 1vh;
		padding: 0;
		border: 0;
		border-radius: 0 0 1vh 1vh;
		cursor: pointer;
		background-image: url("../img/projects/scrollTop.png");
		background-position: bottom;
		background-repeat: no-repeat;
		background-size: contain;
		border-style: solid;
		border-color: #888;
		border-width: 0.5vh;
		border-top-style: none;
		transition: all 0.2s;
	}
	
	#paper .paper-scroll-up:hover {
		height: 6vh;
		margin-bottom: 0vh;
	}

	#paper .paper-content[project="career"] {
		border-top: 10vh;
		border-bottom: 10vh;
		border-style: solid;
		border-color: #c7c094;
		margin-top: -10vh;
		margin-bottom: -10vh;
	}
	
	#paper .paper-chapter {
		height: auto;
		max-height: 0px;
		overflow: hidden;
		transition: max-height 3s cubic-bezier(0, 1.10, 0, 1) 0s;
		position: relative;
	}
	
	#paper .paper-chapter.open {
		max-height: 4000px;
		transition: max-height 2s cubic-bezier(1, 1.05, 0, 0) 0s;
	}

	#paper .paper-chapter.always-open {
		max-height: inherit;
	}
	
	#paper .paper-chapter.slow {
		transition: max-height 2s cubic-bezier(0, 1.05, 0, 1) 0.3s;
	}
	
	#paper .project-buttons {
		display: flex;
		justify-content: center;
		margin: 1% 1% 1% 1%;
	}
	
	#paper .project-button {
		width: 33%;
		height: auto;
		display: inline-block;
		background-color: #0004;
		margin: 0 1%;
		border: 0;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		border-radius: 2vh;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: all 0.3s;
		
		filter: drop-shadow(5px 5px 0.5rem #0005);
		/*border-style: solid;
		border-width: 5px;
		border-top-color: #fff0;
		border-left-color: #fff0;
		border-bottom-color: #fff0;
		border-right-color: #fff0;
		background-size: calc(100% + 10px) calc(100% + 10px);*/
		background-repeat: no-repeat;
	}
	
	#paper .project-button:hover,
	#paper .project-button:focus {
		/*border-top-color: #fffa;
		border-left-color: #fffa;
		border-bottom-color: #fff6;
		border-right-color: #fff6;*/
		margin-top: -1%;
		margin-bottom: 1%;
	}
	
	
	#paper .project-button.open {
		margin-top: 11%;
		margin-bottom: -11%;
	}
	
	#paper .project-button.open:focus {
		margin-top: 10%;
		margin-bottom: -10%;
	}
	
	#paper .project-button.open:hover {
		margin-top: 8%;
		margin-bottom: -8%;
	}
	
	#paper .project-button .dummy {
		margin-top: 56.25%;
	}
	
	#paper .project-button .dimmer {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		background-image: linear-gradient(#0000, #000c);
		transition: all 0.3s;
	}
	
	#paper .project-button.open .dimmer {
		opacity: 1;
	}
	
	/* B.i.t.Lock */
	
	#paper .paper-chapter[project="bitlock"] .project-content{
		color: white;
	}
	
	/* Eternal Duty */
	
	#paper .paper-chapter[project="eternal-duty"] .project-content{
		color: white;
	}
	
	/* Subjet */
	
	#paper .paper-chapter[project="subjet"] .project-content{
		background-color: #827145ff;
		color: white;
	}
	
	/* Tower Bauer */
	
	#paper .paper-chapter[project="tower-bauer"] .project-content{
		background-color: black;
		color: white;
	}
	
	/* Xellerate */
	
	#paper .paper-chapter[project="xellerate"] .project-content{
		background-repeat: repeat;
		background-size: auto;
		color: black;
	}
	
	#paper .paper-chapter[project="xellerate"] .project-text {
		background-color: white;
	}
	
	#paper .paper-chapter[project="xellerate"] a {
		color: #327345;
	}
	
	#paper .paper-chapter[project="xellerate"] a:focus,
	#paper .paper-chapter[project="xellerate"] a:hover {
		color: #81b791;
	}
	
	/* Hofbauer Games */
	
	#paper .paper-chapter[project="hofbauer-games"] .project-content{
		color: #ddd;
	}
	
	/* RirCAT */
	
	#paper .paper-chapter[project="rircat"] .project-content{
		background-color: #f2eded;
		color: black;
	}
	
	#paper .paper-chapter[project="rircat"] a {
		color: #3d8ee5;
	}
	
	#paper .paper-chapter[project="rircat"] a:focus,
	#paper .paper-chapter[project="rircat"] a:hover {
		color: #5ca9fa;
	}

	/* Rudy Games */
	
	#paper .paper-chapter[project="rudy-games"] .project-content{
		color: #ddd;
	}

	#paper .paper-chapter[project="rudy-games"] .project-description{
		background-color: #1d1d1d;
	}

	/* Skills */

	#paper .skill-rating {
		display: flex;
		gap: 5px;
		justify-content: center;
		align-items: center;
	}

	#paper .skill-rating-bar {
		width: min(15px, 2vw);
		height: min(35px, 4.5vw);
		background-color: #98967b;
		opacity: 0.5;
		border-radius: 5px;
	}

	#paper .skill-rating-bar.full {
		width: min(20px, 2.5vw);
		height: min(40px, 5vw);
		background-color: #554f46;
		opacity: 1;
	}
	
	/* Decoration */
	
	#projects .decoration {
		overflow: inherit;
	}
	
	#projects .top, #projects .bottom, #projects .left, #projects .right {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 10%;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 2;
	}
	
	#projects .top-inner, #projects .bottom-inner {
		background-position: center;
		background-repeat: repeat-x;
		background-size: auto 100%;
		height: 100%;
	}
	
	#projects .left-inner, #projects .right-inner {
		background-position: center;
		background-repeat: repeat-y;
		background-size: 100% auto;
		width: 100%;
	}
	
	/* Top */
	
	#projects .top {
		width: 100%;
		height: 30vh;
		flex-direction: column;
		margin-top: -10vh;
	}
	
	#projects .top-inner {
		width: 100%;
		background-image: url("../img/projects/topTrees.png");
	}
	
	/* Bottom */
	
	#projects .bottom {
		width: 100%;
		height: 30vh;
		flex-direction: column;
		margin-top: 90vh;
	}
	
	#projects .bottom-inner {
		width: 100%;
		background-image: url("../img/projects/topTrees.png");
	}
	
	/* Right */
	
	#projects .right {
		width: 40vh;
		height: 100%;
		flex-direction: row;
		margin-left: calc(100vw - 15vh);
	}
	
	#projects .right-inner {
		height: 100%;
		background-image: url("../img/projects/sideTrees.png");
	}
	
	#projects .grass1 {
		margin-top: 18vh;
		margin-left: 25vw;
	}
	
	#projects .grass2 {
		margin-top: 50vh;
		margin-left: 78vw;
	}
	
	#projects .grass3 {
		margin-top: 54vh;
		margin-left: 81vw;
	}
	
	#projects .grass4 {
		margin-top: 80vh;
		margin-left: 38vw;
	}
}

/*  --- SECRET-PROJECTS --- */

@media all {

	/* Gap */
	
	#secret-projects .gap {
		top: 100vh;
		background-image: linear-gradient(#847474, #9fd593);
		z-index: -1;
	}
	
	/* Content */
	
	#secret-projects {
		left: 120vw;
		top: -120vh;
	}
	
	#secret-projects .content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	#secret-projects .projects-text {
		text-align: center;
		margin: auto;   
		padding-bottom: 10vh;
	}
	
	#secret-projects .projects-text p {
		font-size: 18pt;
		font-weight: 600;
		color: #0000006f;
	}
	
	/* Chest */
	
	#secret-projects .chest-area {
		margin-top: 20vh;
	}

	#paper .paper-chapter .project-content {
		background-position: top;
		background-repeat: repeat-y;
		background-size: 100% auto;
	}
	
	/* Split Prophecy */
	
	#paper .paper-chapter[project="split-prophecy"] .project-content{
		color: #515040;
	}
	
	#paper .paper-chapter[project="split-prophecy"] a {
		color: #ce3232;
	}
	
	#paper .paper-chapter[project="split-prophecy"] a:focus,
	#paper .paper-chapter[project="split-prophecy"] a:hover {
		color: #b92727;
	}
	
	/* Decoration */
	
	#secret-projects .decoration {
		overflow: inherit;
	}
	
	#secret-projects .decoration .background {
		background-color: #847474;
		background-image: url("../img/projects/secretGround.png");
		background-position: bottom;
		background-size: cover;
		width: 100%;
		height: 100%;
		z-index: -1;
		position: relative;
	}
	
	#secret-projects .top, #secret-projects .bottom, #secret-projects .left, #secret-projects .right {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 10%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	#secret-projects .top-inner, #secret-projects .bottom-inner {
		background-position: center;
		background-repeat: repeat-x;
		background-size: auto 100%;
		height: 100%;
	}
	
	#secret-projects .left-inner, #secret-projects .right-inner {
		background-position: top;
		background-repeat: repeat-y;
		background-size: 100% auto;
		width: 100%;
	}
	
	/* Top */
	
	#secret-projects .top {
		width: 100%;
		height: 30vh;
		flex-direction: column;
		margin-top: -5vh;
	}
	
	#secret-projects .top-inner {
		width: 100%;
		background-image: url("../img/projects/topDeadTrees.png");
	}
	
	/* Left */
	
	#secret-projects .left {
		width: 40vh;
		height: 120%;
		flex-direction: row;
		margin-left: -5vh;
	}
	
	#secret-projects .left-inner {
		height: 100%;
		background-image: url("../img/projects/sideDeadTrees.png");
	}
	
	/* Right */
	
	#secret-projects .right {
		width: 40vh;
		height: 120%;
		flex-direction: row;
		margin-left: calc(100vw - 25vh);
	}
	
	#secret-projects .right-inner {
		height: 100%;
		background-image: url("../img/projects/sideDeadTrees.png");
	}
}

/*  --- CONTACT --- */

@media all {

	/* Gap */
	
	#contact .gap {
		top: -20vh;
		background-image: linear-gradient(#9fd593, #858291);
	}
	
	/* Content */
	
	#contact {
		background-color: #777484;
		background-image: url("../img/contact/ground.png");
		background-position: bottom;
		background-size: cover;
		top: 120vh;
	}
	
	#contact .contact-field {
		height: 80vh;
		width: 100vh;
		margin: auto auto 0 auto;
		/*background-color: #00000020;*/
		position: relative;
	}
	
	#contact a p {
		text-align: center;
		width: 300%;
		margin-left: -100%;
		margin-top: -50%;
		opacity: 0;
		padding-bottom: 40%;
	}
	
	#contact a {
		text-decoration: none;
		color: white;
		opacity: 0.8;
	}
	
	#contact a,
	#contact a p {
		transition: all 0.2s 0s;
	}
	
	#contact a:focus,
	#contact a:focus p,
	#contact a:hover,
	#contact a:hover p {
		opacity: 1;
	}
	
	/* Lights */
	
	#contact .contact {
		width: 100%;
		height: 100%;
	}
	
	
	#contact .contact-container {
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		pointer-events: none;
	}
	
	#contact .contact-container button,
	#contact .contact-container a {
		pointer-events: all;
	}
	
	#contact .button-container {
		width: 100%;
		height: 100%;
		display: flex;
		position: absolute;
		top: 0;
	}
	
	#contact .contact-left, #contact .contact-top-left,
	#contact .contact-top, #contact .contact-top-right,
	#contact .contact-right, #contact .contact-bottom {
		height: 80vh;
		width: 100vh;
		position: relative;
		opacity: 0.2;
		transition: all 0.5s 0s;
		z-index: 2;
	}
	
	#contact[button="on"] .contact-left, #contact[button="on"] .contact-top-left,
	#contact[button="on"] .contact-top, #contact[button="on"] .contact-top-right,
	#contact[button="on"] .contact-right, #contact[button="on"] .contact-bottom {
		opacity: 1;
		transition: all 1s 0.7s;
	}
	
	#contact[button="on"][custom="true"] .contact-left, #contact[button="on"][custom="true"] .contact-top-left,
	#contact[button="on"][custom="true"] .contact-top, #contact[button="on"][custom="true"] .contact-top-right,
	#contact[button="on"][custom="true"] .contact-right, #contact[button="on"][custom="true"] .contact-bottom {
		opacity: 1;
		transition: all 1s 0.1s;
	}
	
	#contact .light-left,
	#contact .light-top-left,
	#contact .light-top,
	#contact .light-top-right,
	#contact .light-right,
	#contact .light-bottom	{
		background-repeat: no-repeat;
		background-size: contain;
	}
	
	#contact .button-left,
	#contact .button-top-left,
	#contact .button-top,
	#contact .button-top-right,
	#contact .button-right,
	#contact .button-bottom,
	#contact .button-machine	{
		cursor: pointer;
		background-color: transparent;
		border: 0;
		padding: 0;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}
	
	/* Left */
	
	#contact .contact-left {
		height: 45%;
		width: 50%;
		margin: 30% 0 0 0;
		
		-webkit-clip-path: polygon(0% 50%, 0% 50%, 0% 50%, 100% 50%, 0% 50%);
		clip-path: polygon(0% 50%, 0% 50%, 0% 50%, 100% 50%, 0% 50%);
	}
	
	#contact[button="on"] .contact-left {
		-webkit-clip-path: polygon(0% 0, 0% 100%, 100% 100%, 100% 50%, 100% 0);
		clip-path: polygon(0% 0, 0% 100%, 100% 100%, 100% 50%, 100% 0);
	}
	
	#contact .light-left {
		width: 70%;
		height: 100%;
		margin-left: auto;
		background-image: url("../img/contact/lightLeft.png");
		background-position: right;
	}
	
	#contact .button-left {
		width: 20%;
		height: 30%;
		margin: auto auto auto 10%;
		background-image: url("../img/contact/logo_1.png");
	}
	
	#contact .contact-left a {
		color: #fc9595;
	}
	
	#contact .contact-left a p {
		margin-top: -20%;
	}
	
	/* Top Left */
	
	#contact .contact-top-left {
		height: 60%;
		width: 50%;
		margin: auto 0 0 0;
		
		-webkit-clip-path: polygon(0 0, 0 0, 0 0%, 100% 100%);
		clip-path: polygon(0 0, 0 0, 0 0%, 100% 100%);
	}
	
	#contact[button="on"] .contact-top-left {
		-webkit-clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
		clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
	}
	
	#contact .light-top-left {
		width: 60%;
		height: 60%;
		margin-top: auto;
		margin-left: auto;
		background-image: url("../img/contact/lightTopLeft.png");
		background-position: right bottom;
	}
	
	#contact .button-top-left {
		width: 20%;
		height: 20%;
		margin: 30% 0 0 35%;
		background-image: url("../img/contact/logo_2.png");
	}
	
	#contact .contact-top-left a {
		color: #c3c47d;
	}
	
	#contact .contact-top-left a p {
		margin-top: -40%;
	}
	
	/* Top */
	
	#contact .contact-top {
		height: 60%;
		width: 40%;
		margin: auto auto 0 auto;
		
		-webkit-clip-path: polygon(50% 0%, 50% 0, 50% 0, 50% 100%, 50% 0);
		clip-path: polygon(50% 0%, 50% 0, 50% 0, 50% 100%, 50% 0);
	}
	
	#contact[button="on"] .contact-top {
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 0 100%);
		clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 0 100%);
	}
	
	#contact .light-top {
		width: 100%;
		height: 70%;
		margin-top: auto;
		background-image: url("../img/contact/lightTop.png");
		background-position: bottom;
	}
	
	#contact .button-top {
		width: 25%;
		height: 20%;
		margin: 15% auto 0 auto;
		background-image: url("../img/contact/logo_3.png");
	}
	
	#contact .contact-top a {
		color: #9cd497;
	}
	
	#contact .contact-top a p {
		margin-top: -20%;
		opacity: 0.8;
	}
	
	#contact .contact-top a:focus p,
	#contact .contact-top a:hover p {
		opacity: 1;
	}
	
	/* Top Right */
	
	#contact .contact-top-right {
		height: 60%;
		width: 50%;
		margin: auto 0 0 auto;
		
		-webkit-clip-path: polygon(100% 0, 100% 0, 100% 0%, 0 100%);
		clip-path: polygon(100% 0, 100% 0, 100% 0%, 0 100%);
	}
	
	#contact[button="on"] .contact-top-right {
		-webkit-clip-path: polygon(0% 0, 100% 0, 100% 100%, 0 100%);
		clip-path: polygon(0% 0, 100% 0, 100% 100%, 0 100%);
	}
	
	#contact .light-top-right {
		width: 60%;
		height: 60%;
		margin-top: auto;
		background-image: url("../img/contact/lightTopRight.png");
		background-position: left bottom;
	}
	
	#contact .button-top-right {
		width: 20%;
		height: 20%;
		margin: 30% 35% 0 auto;
		background-image: url("../img/contact/logo_4.png");
	}
	
	#contact .contact-top-right a {
		color: #81afcd;
	}
	
	#contact .contact-top-right a p {
		margin-top: -30%;
	}
	
	/* Right */
	
	#contact .contact-right {
		height: 45%;
		width: 50%;
		margin: 30% 0 0 auto;
		
		-webkit-clip-path: polygon(100% 50%, 100% 50%, 100% 50%, 0 50%, 100% 50%);
		clip-path: polygon(100% 50%, 100% 50%, 100% 50%, 0 50%, 100% 50%);
	}
	
	#contact[button="on"] .contact-right {
		-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 50%, 0 0);
		clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 50%, 0 0);
	}
	
	#contact .light-right {
		width: 70%;
		height: 100%;
		background-image: url("../img/contact/lightRight.png");
		background-position: left;
	}
	
	#contact .button-right {
		width: 20%;
		height: 30%;
		margin: auto 10% auto auto;
		background-image: url("../img/contact/logo_5.png");
	}
	
	#contact .contact-right a {
		color: #c798e4;
	}
	
	#contact .contact-right a p {
		margin-top: -40%;
	}
	
	/* Bottom */
	
	#contact .contact-bottom {
		transition: all 0.5s 0s;
	}
	
	#contact[button="on"] .contact-bottom {
		opacity: 1;
		transition: all 1s 0.5s;
	}
	
	#contact[button="on"][custom="true"] .contact-bottom {
		opacity: 1;
		transition: all 1s 0s;
	}
	
	#contact .contact-bottom {
		height: 40%;
		width: 40%;
		margin: 48% auto 0 auto;
		z-index: 5;
		
		-webkit-clip-path: polygon(50% 0%, 50% 0, 50% 0, 50% 100%, 50% 0);
		clip-path: polygon(50% 0%, 50% 0, 50% 0, 50% 100%, 50% 0);
	}
	
	#contact[button="on"] .contact-bottom {
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 0 100%);
		clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 0 100%);
	}
	
	#contact .light-bottom {
		width: 100%;
		height: 80%;
		background-image: url("../img/contact/whiteLight.png");
		background-position: bottom;
	}
	
	/* Machine */
	
	#contact .contact-machine {
		height: 80vh;
		width: 100vh;
		position: relative;
		display: flex;
	}
	
	#contact .button-machine {
		width: 20%;
		height: 20%;
		margin: auto auto 0 auto;
		background-image: url("../img/contact/machine.png");
		z-index: 6;
		transition: all 0.2s;
	}
	
	#contact .button-machine:focus {
		width: 21%;
		height: 21%;
	}
	
	#contact .button-machine:hover {
		width: 22%;
		height: 22%;
	}
	
	/* Crystal */
	
	#contact .contact-crystal {
		height: 80vh;
		width: 100vh;
		position: relative;
		display: flex;
	}
	
	#contact .crystal {
		width: 20%;
		height: 20%;
		margin: 40% auto 0 auto;
		background-image: url("../img/contact/crystal.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		z-index: 3;
	}
	
	/* Media */
	
	@media only screen and (max-width: 1600px) {
		#contact .contact-field,
		#contact .contact-machine,
		#contact .contact-crystal {
			height: 64vh;
			width: 80vh;
		}
	}
	
	/* Decoration */
	
	#contact .decoration {
		overflow: inherit;
		overflow-x: clip;
	}
	
	#contact .top, #contact .bottom, #contact .left, #contact .right {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 10%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	#contact .top-inner, #contact .bottom-inner {
		background-position: center;
		background-repeat: repeat-x;
		background-size: auto 100%;
		height: 100%;
	}
	
	#contact .left-inner, #contact .right-inner {
		background-position: center;
		background-repeat: repeat-y;
		background-size: 100% auto;
		width: 100%;
	}
	
	#contact .shadows {
		opacity: 0.06;
	}
	
	/* Top */
	
	#contact .top {
		width: 100%;
		height: 60vh;
		flex-direction: column;
		margin-top: -28vh;
	}
	
	#contact .top-inner {
		width: 500%;
		display: flex;
		justify-content: space-between;
	}
	
	#contact .top-inner-left, #contact .top-inner-right {
		height: 100%;
		width: 49%;
		display: flex;
	}
	
	#contact .end-left, #contact .end-right {
		height: 100%;
		width: 60vh;
		background-repeat: no-repeat;
		background-size: contain;
	}
	
	#contact .end-left {
		background-image: url("../img/contact/topPillarsRightEnd.png");
		background-position: left;
	}

	#contact .pillars .end-left {
		background-image: url("../img/contact/topPillarsRightEnd.png");
		z-index: 2;
	}
	
	#contact .shadows .end-left {
		background-image: url("../img/contact/topPillarsRightEndShadow.png");
		z-index: 1;
	}
	
	#contact .end-right {
		background-image: url("../img/contact/topPillarsLeftEnd.png");
		background-position: right;
	}

	#contact .pillars .end-right {
		background-image: url("../img/contact/topPillarsLeftEnd.png");
		z-index: 2;
	}
	
	#contact .shadows .end-right {
		background-image: url("../img/contact/topPillarsLeftEndShadow.png");
		z-index: 1;
	}
	
	#contact .loop-left, #contact .loop-right {
		height: 100%;
		width: 100%;
		background-repeat: repeat-x;
		background-size: contain;
	}
	
	#contact .pillars .loop-left, #contact .pillars .loop-right {
		background-image: url("../img/contact/topPillars.png");
		z-index: 2;
	}
	
	#contact .shadows .loop-left, #contact .shadows .loop-right {
		background-image: url("../img/contact/topPillarsShadow.png");
		z-index: 1;
	}
	
	#contact .loop-left {
		background-position: right;
	}
	
	#contact .loop-right {
		background-position: left;
	}
	
	/* Bottom */
	
	#contact .bottom {
		width: 100%;
		height: 60vh;
		flex-direction: column;
		margin-top: 87vh;
	}
	
	#contact .bottom-inner {
		width: 100%;
		background-image: url("../img/contact/topPillars.png");
		z-index: 4;
	}
	
	/* Left */
	
	#contact .left {
		width: 60vh;
		height: 100%;
		flex-direction: row;
		margin-left: -33vh;
	}
	
	#contact .left-inner {
		height: 100%;
	}
	
	#contact .pillars .left-inner {
		background-image: url("../img/contact/sidePillars.png");
		z-index: 3;
	}
	
	#contact .shadows .left-inner {
		background-image: url("../img/contact/sidePillarsShadow.png");
		z-index: 1;
	}
	
	/* Right */
	
	#contact .right {
		width: 60vh;
		height: 100%;
		flex-direction: row;
		margin-left: calc(100vw - 15vh);
	}
	
	#contact .right-inner {
		height: 100%;
		background-image: url("../img/contact/sidePillars.png");
		z-index: 3;
	}
}

/*  --- GARDEN --- */

@media all {

	#garden {
		background-color: #9fd593;
		left: -120vw;
		pointer-events: none;
	}
	
	/* Gap */
	
	#garden .gap {
		left: 100vw;
		background-color: #9fd593;
		z-index: -1;
	}
	
	/* Content */
	
	#garden .flowers {
		width: calc(65% - 55vh);
		height: 70%;
		margin: 20vh 0 0 15vh;
		display: grid;
		grid-template-columns: repeat( auto-fit, min(15vh, 8vw) );
		grid-template-rows: repeat( auto-fit, min(15vh, 8vw) );
		grid-gap: 2vh;
		pointer-events: all;
	}
	
	@media (max-aspect-ratio: 3/2) {
		
		#garden .flowers {
			width: 66%;
			grid-template-columns: repeat( auto-fit, min(20vh, 15vw) );
			grid-template-rows: repeat( auto-fit, min(20vh, 15vw) );
		}
	}
	
	#garden .flower {
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		text-decoration: none;
		cursor: pointer;
	}
	
	#garden .flower-inner {
		height: 40%;
		width: 80%;
		margin: auto;
		border-radius: 15px;
		display: flex;
		-webkit-clip-path: polygon(50% 0%, 50% 0, 50% 0, 50% 100%, 50% 0);
		clip-path: polygon(50% 0%, 50% 0, 50% 0, 50% 100%, 50% 0);
		transition: all 0.5s;
	}
	
	#garden .flower:hover .flower-inner,
	#garden .flower:focus .flower-inner {
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 0 100%);
		clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 0 100%);
	}
	
	#garden .flower-inner p {
		margin: auto;
		font-size: max(2vh, 10pt);
	}
	
	/* Decoration */
	
	#garden .decoration {
		overflow: inherit;
	}
	
	#garden .top, #garden .bottom, #garden .left, #garden .right {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 10%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	#garden .top {
		overflow: hidden;
	}
	
	#garden .top-inner, #garden .bottom-inner {
		background-position: center;
		background-repeat: repeat-x;
		background-size: auto 100%;
		height: 100%;
		z-index: 2;
	}
	
	#garden .top-inner,
	#garden .river {
		margin-left: 30%;
	}
	
	#garden .left-inner,
	#garden .left-start,
	#garden .right-inner,
	#garden .right-start {
		background-position: center;
		background-repeat: repeat-y;
		background-size: 100% auto;
		width: 100%;
		z-index: 2;
	}
	
	/* Top */
	
	#garden .top {
		width: 100%;
		height: 20vh;
		flex-direction: column;
	}
	
	#garden .top-inner {
		width: 140%;
		background-image: url("../img/home/caveWall.png");
		display: flex;
		justify-content: center;
	}
	
	/* Bottom */
	
	#garden .bottom {
		width: 100%;
		height: 30vh;
		flex-direction: column;
		margin-top: 90vh;
	}
	
	#garden .bottom-inner {
		width: 100%;
		background-image: url("../img/garden/topNiceTrees.png");
	}
	
	/* Left */
	
	#garden .left {
		width: 13vh;
		height: 88vh;
		flex-direction: column;
		margin-left: 2vh;
		margin-top: 15vh;
		overflow:hidden;
	}
	
	#garden .left-start {
		height: 26vh;
		background-image: url("../img/garden/fenceStart.png");
		background-position: top;
	}
	
	#garden .left-inner {
		height: 100%;
		background-image: url("../img/garden/fence.png");
		background-position: top;
	}
	
	/* Water */
	
	#garden .waterfall {
		height: 100%;
		width: 41.6vh;
		background-image: url("../img/garden/waterfall.png");
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	#garden .main-wave {
		height: 100%;
		width: 25vh;
	}
	
	#garden .main-wave-wave {
		height: 100%;
		width: 100%;
		background-image: url("../img/garden/mainWave.gif");
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
		z-index: 3;
		-webkit-mask-image: linear-gradient(to top, transparent 30%, black 100%);
		mask-image: linear-gradient(to top, transparent 30%, black 100%);
	}
	
	#garden .foam {
		height: 100%;
		width: 100%;
		background-image: url("../img/garden/foam.gif");
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 4;
		-webkit-mask-image: linear-gradient(to top, transparent 0%, black 60%);
		mask-image: linear-gradient(to top, transparent 0%, black 60%);
	}
	
	#garden .side-wave {
		height: 100%;
		width: 10vh;
		background-image: url("../img/garden/sideWave.gif");
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
		z-index: 3;
	}
	
	#garden .dummy-wave {
		height: 100%;
		width: 10vh;
	}
	
	#garden .river {
		margin-top: 10vh;
		height: 90vh;
		display: flex;
		justify-content: center;
	}
	
	#garden .river-inner {
		width: 70vh;
		height: 100%;
		background-image: url("../img/garden/river.png");
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
		z-index: 1;
	}
	
	#garden .fish {
		height: 15vh;
		width: 100%;
		background-image: url("../img/garden/fish.gif");
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		position: absolute;
		top: 0;
		z-index: 2;
		margin-left: 3vh;
		margin-top: 58vh;
	}
	
	#garden .waves {
		display: flex;
		height: 100%;
		width: 100%;
	}
	
	#garden .wave-small,
	#garden .wave-big {
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 20%, transparent 50%);
		mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 20%, transparent 50%);
	}
	
	#garden .wave-small {
		background-image: url("../img/garden/waveSmall.gif");
	}
	
	#garden .wave-big {
		background-image: url("../img/garden/waveBig.gif");
	}
	
	#garden .wave1 {
		margin-top: 5%;
		margin-left: 12%;
		width: 20vh;
		height: 20vh;
		transform: rotate(60deg);
	}
	
	#garden .wave2 {
		margin-top: 20%;
		margin-left: 36%;
		width: 20vh;
		height: 20vh;
		transform: rotate(0deg);
	}
	
	#garden .wave3 {
		margin-top: 2%;
		margin-left: 55%;
		width: 20vh;
		height: 20vh;
		transform: rotate(-30deg);
	}
	
	#garden .wave4 {
		margin-top: 89%;
		margin-left: 24%;
		width: 20vh;
		height: 20vh;
		transform: rotate(15deg);
	}
	
	#garden .wave5 {
		margin-top: 98%;
		margin-left: 40%;
		width: 20vh;
		height: 20vh;
		transform: rotate(15deg);
	}
	
	@media (max-aspect-ratio: 3/2) {
		
		#garden .waterfall {
			display: none;
		}
		
		#garden .river {
			display: none;
		}
		
		#garden .fish {
			display: none;
		}
	}
	
	#garden .grass1 {
		margin-top: 13vh;
		margin-left: 25vw;
	}
	
	#garden .grass2 {
		margin-top: 30vh;
		margin-left: 78vw;
	}
	
	#garden .grass3 {
		margin-top: 34vh;
		margin-left: 81vw;
	}
}

/*  --- NAVIGATION --- */

@media all {
	.navigation {
		display: grid;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		grid-template-columns: 1fr 4fr 1fr;
		grid-template-rows: 1fr 2fr 1fr;
		pointer-events: none;
	}

	.navigation .nav-button {
		transition: all 0.1s;
	}
	
	.navigation .nav-button p {
		font-size: 22pt;
		color: #0000004d;
		transition: all 0.1s;
	}
	
	.navigation .nav-button:focus p,
	.navigation .nav-button:hover p {
		color: #0000007d;
	}
	
	.navigation .nav-button:focus,
	.navigation .nav-button:hover {
		transform: scale(1.1);
	}

	.navigation .nav-button {
		text-align: center;
		padding: 0;
		cursor: pointer;
		background: transparent;
		border: 0;
	}
	
	.navigation .nav-content {
		display:flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}
	
	.nav-east .nav-content, .nav-west .nav-content {
		flex-direction: row;
	}
	
	.navigation .nav-content img {
		margin: 0;
		width: 46px;
		height: 46px;
	}
	
	.nav-north, .nav-east, .nav-south, .nav-west {
		pointer-events: all;
	}

	.nav-north, .nav-south {
		width: 30vw;
		margin: 0 auto;
	}
	
	.nav-east, .nav-west {
		height: 30vh;
		margin: auto 0;
	}
	
	/* NORTH */
	
	.nav-north {
		grid-column: 2 / 3;
		grid-row: 1 / 2;
	}
	
	
	.nav-north p {
		order: 2;
	}
	
	.nav-north img {
		order: 1;
	}

	/* EAST */
	
	.nav-east {
		grid-column: 3 / 4;
		grid-row: 2 / 3;
	}
	
	.nav-east p {
		order: 1;
	}
	
	.nav-east img {
		order: 2;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		transform: rotate(90deg);
	}

	/* SOUTH */
	
	.nav-south {
		grid-column: 2 / 3;
		grid-row: 3 / 4;
	}
	
	.nav-south p {
		order: 1;
	}
	
	.nav-south img {
		order: 2;
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		transform: rotate(180deg);
	}

	/* WEST */
	
	.nav-west {
		grid-column: 1 / 2;
		grid-row: 2 / 3;
	}
	
	.nav-west p {
		order: 2;
	}
	
	.nav-west img {
		order: 1;
		-webkit-transform: rotate(270deg);
		-moz-transform: rotate(270deg);
		-o-transform: rotate(270deg);
		-ms-transform: rotate(270deg);
		transform: rotate(270deg);
	}
	
	#map:not(.start) .navigation button {
		pointer-events: none;
	}
	
	/* SPECIFIC */
	
	#home .navigation, #projects .navigation, #garden .navigation
	{
		margin-top: 12vh;
		height: 88vh;
	}
	
	
	/* ------------------------------------- ### PREVIEW ### ------------------------------------- */
	
	#preview
	{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 10;
		background-color: #000000bb;
	}
	
	#preview.hidden
	{
		display: none;
	}
	
	#preview .preview-container
	{
		display: flex;
		justify-content: space-between;
		width: 80%;
		height: 100vh;
		margin: auto;
		align-items: center;
		position: relative;
		pointer-events: none;
	}
	
	#preview .click-space
	{
		width: 100vw;
		height: 100vh;
		position: absolute;
	}
	
	#preview .preview-image
	{
		height: 90%;
		width: 90%;
		display: table-column;
		display: flex;
		align-content: center;
		justify-content: center;
		margin: auto;
	}
	
	#preview .preview-image img
	{
		max-width: 100%;
		max-height: 100%;
		align-self: center;
		pointer-events: all;
	}
	
	
	#preview .arrow-container
	{
		height: 100vh;
		width: 15%;
		max-width: 100px;
		border: none;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 20% 60% 20%;
		gap: 0px 0px;
	}
	
	#preview .preview-arrow
	{
		height: 100%;
		width: 100%;
		border: none;
		background-color: transparent;
		font-size: 50pt;
		color: #bbbbbb;
		grid-area: 2 / 1 / 3 / 2;
		pointer-events: all;
	}
	
	#preview .preview-arrow:hover
	{
		color: #ffffff;
		font-size: 55pt;
		cursor: pointer;
		background-color: #ffffff11;
	}
	
	
	#preview .exit
	{
		border: none;
		background-color: #ff61615e;
		grid-area: 1 / 1 / 2 / 2;
		border-radius: 10%;
		padding: 0;
		width: 50px;
		height: 50px;
		left: calc(100% - 50px);
		position: relative;
		cursor: pointer;
		pointer-events: all;
	}

	#preview .exit:hover
	{
		background-color: #ff000088;
	}
	
	#preview .exit p
	{
		margin: auto;
		font-size: 300%;
		color: #fff7;
	}
	
	#preview .exit:hover p
	{
		color: #fffa;
	}
	
	@media only screen and (max-width: 1425px) {
	  
		#preview .preview-container
		{
			width: 100%;
		}
		
		#preview .preview-arrow
		{
			font-size: 6vw;
		}
		
		#preview .preview-arrow:hover
		{
			font-size: 6.5vw;
		}
		
		#preview .arrow-container
		{
			width: 20%;
		}
	}

	#preview .preview-image-container
	{
		height: 90%;
		width: 90%;
	}
	
	#preview .preview-text
	{
		color: white;
		margin: 0 15%;
		padding-top:20px;
		font-size: 16pt;
	}
	
}