@font-face {
    font-family: 'interregular';
    src: url('/fonts/inter-regular-webfont.woff2') format('woff2'),
         url('/fonts/inter-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

*{
	margin: 0;
	padding: 0;
	border: 0;
}

html{
	 background-color: #E75EB8;
}

body{
	height: 100vh;
	width: 100vw;
	background-color: #FFFAF2;
	color: #111;
	font-size: 1.6rem;
	font-family: 'Inter', sans-serif;
	/* transition: all ease .2s; */
}

textarea::selection {
	background-color: rgba(231, 94, 183, 0.3);
}

a{
	color: #111;
	transition: all ease .2s;
}

a:hover{
	text-decoration: none;
}

textarea{
	position: fixed;
	display: block;
	top: 0px;
	right: 0px;
	left: 0px;
 	bottom: 40px;
	resize: none;
	background-color: transparent;

	padding: 40px;
	transition: all .2s ease;
	outline: none;

	font-family: 'Inter', sans-serif;
	font-size: 1.6rem;
	line-height: 140%;

	caret-color: #E75EB8;

	transition: all ease .2s;
}


#paper.normal{
	padding: 40px 5%;
}
#paper.tight{
	padding: 40px 20%;
}

#paper.tighter{
	padding: 40px 30%;
}


header{
	height: 50px;
	position: fixed;
	left: 0; right: 0; top: 0;
}

/*--- Footer Actions ---*/
footer{
	background: #FFFAF2;
	display: flex;
	padding: 0;
	gap: 0;
	justify-content: space-between;
	z-index: 300;
	position: absolute;
	bottom: 0; right: 0; left: 0;
	height: 40px;
	border-top: 1px solid rgba(17, 17, 17, 0.10);

	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;  

} 
footer span{
	cursor: pointer;
}
footer div div{
	cursor: normal;
}

/*--- Footer Actions Left --*/
.footer-actions-left{
	display: flex;
	gap: 0px;
	align-items: center;
	justify-content: center;
}

.copyWriting .copied{
 display: none;
}
.copyWriting.active .copied{
	display: block;
}
.copyWriting.active .copy{
	display: none;
}


/*--- Footer Actions Right --*/
.footer-actions-right{
	display: flex;
	gap: 0px;
	align-items: center;
	justify-content: center;

}


/*-- About Content --*/
.about-content{
	color: #111;
	background-color: #FFFAF2;
	position: fixed;
	z-index: 150;
	top: 0; right: 0; bottom: 0; left: 0;
	display: flex;
	flex-flow: column;
	padding: 5vw;
	justify-content: center;
	align-items: flex-start;
	transform: scale(0);
	opacity: 0;
	transition: all ease .2s;
	text-align: left;
	transition: all ease .2s;
}

.about-content p{
	max-width: 670px;
	width: 100%;
	margin: 0 auto 40px auto;
}

.about-content.open{
	transform: scale(1);
	opacity: 1;
}

/*-- Logo N --*/
a.logo{
	z-index: 200;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 40px;
	font-weight: bold;
	text-decoration: none;
}

a.logo:hover .hover{
	display: block;
}


a.logo img{
	width: 100%;
	height: auto;
}

a.logo.active img,
a.logo.active svg,
a.logo.active:hover img{
	display: none;
}

/*-- Navigation Elements --*/
.icon-button{
	z-index: 100;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	color: #111;
	text-decoration: none;
	opacity: .7;
	transition: all ease .2s;
	padding: 0;
	border-right: 1px solid rgba(17, 17, 17, 0.10);
	transform: scale(1);
}

.icon-button:hover{
	opacity: 1;
}

.icon-button svg{
	width: 75%;
	height: auto;
	transition: all ease .2s;
	transform: scale(1);
}

.icon-button:active svg{
   transform: scale(.90);
}

.text-button {
	color: rgba(17, 17, 17, 0.10);
	font-size: 16px;
	font-weight: bold;
	height: 40px;
	display: flex;
	align-items: center;
	justify-items: center;
	text-decoration: none;
	transition: all ease .2s;
	padding: 0 10px;
	border-left: 1px solid rgba(17, 17, 17, 0.10);
}
.text-button:hover{
	color: rgba(17, 17, 17, 0.60);
}

	.icon-button.light-dark{
		left: 40px;	
	}

	.clearWriting{
		right: 40px;	
	}

	.icon-button.light-dark .sun{
		display: none;
	}

	.icon-button.light-dark .moon{
		opacity: .6;
	}
	.icon-button.light-dark:hover .moon{
		opacity: 1;
	}
	.icon-button.light-dark.active .moon{
		display: none;
	}

	.icon-button.light-dark.active .sun{
		display: block;
	}

	.icon-button.about{
		display: block;
		z-index: 200;
		top: 40px;
		bottom: auto;
		right: 40px;	
	}

	.text-button.about .close{
		display: none;
	}

	.text-button.about.active .close{
		display: block;
	}

	.text-button.about.active .info{
		display: none;
	}


body.dark{
	background-color: #111;
	color: #FFFAF2;
}
body.dark .icon-button.content-width path{
	stroke: rgba(255, 250, 242, 0.3);
}
body.dark .icon-button.content-width:hbver path{
	stroke: rgba(255, 250, 242, 0.8);
}

body.dark footer{
	border-color: rgba(255, 250, 242, 0.1);
	background-color: #111;
}
body.dark footer span{
	color: rgba(255, 250, 242, 0.3);
}
body.dark footer span:hover{
	color: rgba(255, 250, 242, 0.8);
}

body.dark #pageInfo{
	color: rgba(255, 250, 242, 0.3);
}
body.dark #pageInfo:hover{
	color: rgba(255, 250, 242, 0.8);
}

body.dark span{
	color: #FFFAF2;
}

body.dark a{
	color: #FFFAF2;
}

body.dark span.logo .default{
	fill: #FFFAF2;
}

body a.logo .default-white{
	display: none;
}

body.dark a.logo .default-white{
	display: block;
}

body.dark textarea{
	color: #FFFAF2;
}

body.dark .about-content{
	background-color: #111;
	color: #FFFAF2;
}


body.dark .icon-button{
	border-color: rgba(255, 250, 242, 0.1);
}

body.dark .text-button {
	border-color: rgba(255, 250, 242, 0.1);
}

#pageInfo{
	z-index: 100;
	display: flex;
	gap: 12px;
	margin-left: 12px;
	transition: all ease .2s;
	font-size: 16px;
	font-weight: bold;
	color: rgba(17, 17, 17, 0.10);
}
#pageInfo:hover{
	color: rgba(17, 17, 17, 0.60);
}

#countChars span,
#countWords span{
	font-weight: normal;
}

#countWords{
}


@media only screen and (max-width: 600px) {

	.about-content p{
		font-size: 1.2rem;
		margin-bottom: 20px;
	}

  textarea {
	padding-top: 10px;
	bottom: 85px;
  }

  a.logo{
  	right: 20px;
  	top: 20px;
  }

  #pageInfo{
	position: absolute;
	bottom: 43px;
	left: 5px;
  }


	footer{
		display: flex;
		padding: 0;
		gap: 0;
		z-index: 600;
		justify-content: space-between;
		position: absolute;
		border-radius: 20px;
		bottom: 20px; right: 10px; left: 10px;
		height: 40px;
		border: 1px solid rgba(17, 17, 17, 0.10);
		
	} 


}

/* Portrait and Landscape */
@media only screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) and (pointer:none), (pointer: coarse) {

	
    body {
        height: -webkit-fill-available;
    }    

}

@media screen and (max-width: 479px) {
  .menu a{
      font-size: 32px;
  }
}