.hideBody{
	display: none;
}

/*body{*/
	/*background-image: url("bg.png");*/
	/*background-size: fill;*/
	/*background-repeat: no-repeat;*/
/*}*/

@font-face {
  font-family: "Tonka-VF";
  src: url("fonts/Tonka_Beta_06VF.ttf") format("TrueType")
}

@font-face {
  font-family: "Lilian-Ampersand";
  src: url("fonts/Lilian-Ampersand-beta-0321-Regular.ttf") format("TrueType")
}

@font-face {
  font-family: "Door";
  src: url("fonts/gardenVF.ttf") format("TrueType")
}

@font-face {
  font-family: "Key";
  src: url("fonts/gardenkeyVF.ttf") format("TrueType")
}

:root{
	--col1: #7b8a9f;
/*	--col1: #ad83a2;*/
	--col2: #52667f;
	--colS: #7b8a9f;
}

.overlay_info{
	z-index: 1;
	background-color: rgba(232,232,236,0.94);
	transition: 1s background-color, 1s opacity;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	/*backdrop-filter: blur(5px);*/
	opacity: 0;
    display: none;
}

.overlay_info.visibleInfo{
	opacity: 1;
    z-index: 20000;
}

.overlay_text{
	padding: 0vh 22vw;
	overflow-y: scroll;
    height: 100vh;
}
.new_title{
	animation: float 3s ease-in-out infinite;
	display: flex;
    align-items: center;
    justify-content: center;
}
.new_title svg{
	fill: var(--col1);
	height: 90vh;
	filter: drop-shadow(0px 0px 2px var(--col1));
}
.down{
	height: 10vh;
}
.title{
  background-color: var(--col1); /* defines the background color of the image */
  mask: url(secret_type_garden_titling.svg) no-repeat center / contain;
  -webkit-mask: url(secret_type_garden_titling.svg) no-repeat center / contain;
  height: 40vh;
  animation: float 3s ease-in-out infinite;
  display: none;
}

.description{
	font-family: "Lilian-Ampersand";
	text-align: center;
    font-size: 1.55em;
    padding-top: 1vh;
    color: var(--col1);
    text-shadow: 0px 0px 2px var(--col1);
    padding-bottom: 5vh;
}

.door_cont{
	width: 30px;
    display: none;
    height: 10px;
}

.door{
	font-family: "Door";
    font-variation-settings: 'wght' 0;
    transition: 1s font-variation-settings;
    animation: float 4s ease-in-out infinite;
    position: absolute;
    font-size: 10em;
    position: fixed;
    bottom: 0;
    left: 0;
    color: var(--col1);
    text-shadow: 0px 0px 2px var(--col1);
    z-index: 20010;
    cursor: pointer;
    display: none;
}

.door:hover{
    font-variation-settings: 'wght' 200;
}

a{
	display: inline-block;
	text-decoration: none;
	color: var(--col2);
	text-shadow: 0px 0px 2px var(--col2);
	white-space: nowrap;
    margin: 0px 0.2em;
}


@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-10px);
	}
	100% {
		transform: translatey(0px);
	}
}
@keyframes float2 {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(2px);
	}
	100% {
		transform: translatey(0px);
	}
}

@keyframes float3 {
	0% {
		transform: translatey(0px) rotate(5deg);

	}
	50% {
		transform: translatey(-2px) rotate(-5deg);

	}
	100% {
		transform: translatey(0px) rotate(5deg);
	}
}

@keyframes key {
	0% {
		transform: translatey(0px);
		font-variation-settings: "wght" 0;
	}
	50% {
		transform: translatey(-2px);
		font-variation-settings: "wght" 700;
	}
	100% {
		transform: translatey(0px);
		font-variation-settings: "wght" 0;
	}
}

.word{
	display: inline-block;
}
.letters .letter{
	display: inline-block;
	animation: float3 5s ease-in-out infinite;
}

a .letter{
	display: inline-block;
	animation: float2 5s ease-in-out infinite;
}

p{
	margin: 5px 0px;
}

h4{
	font-size: 0.8em;
}

.nav{
	position: fixed;
    bottom: 0;
    right: 0;
    font-size: 0.8em;
    margin: 20px;
    text-align: right;
    /* background: beige; */
    /* margin-top: 20px; */
    max-width: 14vw;
    animation: float 4s ease-in-out infinite;
}
a .letter, .letters .letter{
    animation-play-state: paused;
}