@import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,100..900;1,100..900&display=swap');

body{
	background-color:#151515;
	font-family:"Saira", sans-serif;
	color: #eeeeee;
}
a, a:hover, a:visited{
	color:#726DA8;
}

input, input:focus, textarea, textarea:focus{
	background-color:#444;
	color:#dddddd;
	border-color:#1e1d25;
}
button,input[type="file"]::file-selector-button{
	background-color:#726DA8;
	border-color:#3d3a5a;
	border-radius:3px;
}
input[type="file"]::file-selector-button {
  display:none;
}

li:has(> input:checked)::first-line {
  color: rgba(255, 255, 255, 0.3);
  text-decoration: line-through;
}

 .tile{
	border: 3px solid black;
	margin:0.25em;
	padding:0.5em;
	border-radius:0.35em;
	position:absolute;
	background-color:#282828;
	border-color:#1e1d25;
}

hr{
	border-color:#726DA8;
}
blockquote{
	background-color:#333333;
	border-color:#1e1d25;
}
 .tile.modal .content{
	font-size:1.5rem;
	overflow-y:auto;
	max-height:90vh;
 }
 .tile .content img{
	max-width:48%;
	 max-height:80vh;
 }
 .tile .content{
	text-overflow:ellipsis;
	overflow-x:clip;
	overflow-y:clip;
	max-height:20em;
 }

.editform{
	overflow-y: auto;
	max-height:90vh;
}
 p{
	 
	 margin-bottom:1rem;
 }
 #title{
	 margin-left: 1rem;
 }
 #search{
	 margin-left:1rem;
	 max-width:100%;
	 gap:0.5rem;
	 display:flex;
 }
 #search input{
	 flex-grow:3;
 }
 #search button{
	 flex-grow:0;
	 flex-shrink:2;
 }
 #newtitle{
	 max-width:100%;
}
 #newfiles{
	 max-width:60%;
 }
ul{
	margin:0px;
}
 li{
	margin:0px;
 }
#newnotefield{
border: 3px solid grey;
	 padding:0.5em;
	 background-color:#222222;
	 margin:0.5em 0em;
	 border-radius:0.35em;
	 width:100%;
 }
 #noteslist{
	margin-left: -35px;
	margin-right: -35px;
	 overflow-x:clip;
	position: relative;
 }
 #modalback{
	display:none;
	 position:fixed;
	 width:100%;
	 left:0px;
	 top:0px;
	 height:100%;
	 background-color: rgba(0,0,0,0.25);
	 z-index:5;
 }
 textarea{
	 height:20em;
 }

.stepbackbutton, .blockquotebutton, .listitembutton, .checklistbutton{
	float:right;
}

#file_library{
	display:none;
	border: 3px solid #1e1d25;
	margin:0.25em;
	padding:0.5em;
	border-radius:0.35em;
	position:absolute;
	background-color:#282828;
	z-index:10;
}
#file_library img{
	max-height:8rem;
	display:inline-block;
	vertical-align:text-top;
	padding:0.5rem;
	cursor:pointer;
}
.libraryImageWrapper {
  display: inline-block;
  vertical-align: text-top;
  padding: 0.5rem;
	font-size:small;
}
.libraryImageDetails {
  display: inline-block;
  vertical-align: text-top;
}
.libraryImageDetail {
  display: block;
}
.libraryImageDelete{
	cursor:pointer;
}
 .previewimage img{
	 max-width:15em;
	max-height:10em;
 }
 .previewimagetitle{
	 display:block;
 }
 .previewimage{
	 display:inline-block;
 }
.editbutton{
	position:absolute;
	top:1em;
	 right:1em;
	 display:none;
	 font-size:xx-large;
 }
 h1,h2,h3,h4,h5,h6{
	font-family: "Saira",sans-serif;
	 margin-top:0.75em;
	 margin-bottom:0.5em;
 }
 h1{	font-size:150%;}
 h2{	font-size:140%;}
 h3{	font-size:130%;}
 h4{	font-size:120%;}
 h5{	font-size:110%;}
 div.modal{
	position:fixed;
	z-index:10;
	max-height:98%;
 }
 .modal .editbutton{
	display:block;
 }

 body form{
	 padding:0.5rem;
 }
 #newnotefield{
	 margin:0.5rem;
	 display:none;
 }
.pin{
position:absolute;
	 top:0.5rem;
	 right:0.5rem;
}
label.deletelabel{
	 display:inline-block;
		 margin-left:1rem;
 }
summary h1,summary h2, summary h3, summary h4, summary h5, summary h6{
	 display: inline-block;
 }

#newnotefield.libraryhalf{
	width:45% !important;
}

@media (orientation: landscape) {
 body{
	 max-width:65em;
 }
	 .tile{
		 width:30%;
		max-height:22em;
	 }
	 div.modal{
		 top:5%;
		 left:20%;
		 width:60%;
		 max-height:90%;
	 }
	div.modal.libraryhalf{
		width:30% !important;
	}
	#file_library{
		top:5%;
		left: 52%;
		width:28%;
		max-height:90%;
		overflow-y: scroll;
	}
 }

 @media (orientation:portrait){
	 body{

		 overflow-x:clip;
		min-width: fit-content;
		width:100%;
		 padding:0px;
	 }
	 .tile{
		width: 45%;

		max-height:22em;
		 font-size:1.2rem;
	 }
	 body,input,textarea,button{
		 font-size:1.5rem;
	 }
	div.modal{
	 top:5vh;
	 left:3vw;
	 width:95vw;
	 max-height:95vh;
	}
	div.modal.libraryhalf{
		width:45vw !important;
	}
	#file_library{
		top:5vh;
		left: 55vw;
		width:45vw;
		max-height:90%;
		overflow-y: scroll;
	}
 }