body{
	margin:0px;
	overflow: hidden;
}
.splash, .orisit{
	background: linear-gradient(rgba(150,100,70), rgba(150,150,130));
	position: absolute;
	top:0;
	left:0;
	width:100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	vertical-align: center;
}
.splash button{
	padding: 50px;
	font-size:5em;
	border-radius:100px;
	background: rgba(255,255,255,0.5);
	backdrop-filter: blur(10px);
}

button{
	padding: 10px;
	border-radius:5px;
	font-family:system-ui;
	outline: 0px;
	border:0px;
	background: rgba(255,255,255,0.5);
	backdrop-filter: blur(10px);
}
.top-line button{
	border-radius: 0px;
	width: fit-content;
}
button:hover{
		background: rgba(255,255,255,0.8);
}
.orisit{

}

.oii{
	overflow:hidden;
	transition: height ease-in-out 0.2s;
	text-align: center;
	font-size:3em;
	margin-block-start:0px;
	margin-block-end:0px;
}
.orisit button{
	font-size:0.8em;

}
.splash{
	z-index: 2;
}
.orisit{
	z-index: 1;
}
.app{
	z-index: 3;
}
.app{
	background: linear-gradient(rgba(150,100,70), rgba(150,150,130));
	top:0;
	left:0;
	width:100vw;
	height: 100vh;
}

*:not(button){
	color:white;
	font-family:system-ui;
}
	.split-editor  {
		max-height: calc(100% - 7ch) !important;
		height: calc(100% - 7ch) !important;
	}
.app{
	display:flex;
	width:100vw;
	section.noteslist {
	    width:14vw;
	    height:100vh;
		display:flex;
		flex-direction:column;
		overflow: auto;
        resize: horizontal;
	}
	section.writer{
		width: 100%;
		height: 100%;
		display:flex;
		flex-direction: column;
		& textarea#note-plaintext{
			height:100%;
			min-height:100%;
			max-height:100%;
			resize: none;
			background: rgba(0,0,0,0.5);
	    	font-size: 1.3em;
		}
		& .top-line input{
			background: rgba(0,0,0,0);
			font-size:1.5em;
			border:0px;
			width: 100%;
		}
		& .top-line .input-wrapper{
			background: rgba(0,0,0,0.5);
			width:100%;
		}
		& .top-line button{
			width: fit-content !important;
		}
		& .top-line{
			display: flex;
		}
	}
	.noteslist select{
		height:100%;
	    background: rgba(0,0,0,0.5);
	    font-size: 1.3em;
	    outline:none;
	    border:none;
	}
	.noteslist select [disabled]{
	    font-weight:bold;
	}
	.notetree{
		height:100%;
	    background: rgba(0,0,0,0.5);
	    outline:none;
	    border:none;
	}
	.notetree *{
		color: white;
		font-size: 12pt;
	}
	.noteslist button{
		border-radius: 0 !important;
		border: 0px;
		vertical-align: middle;
	}
	.noteslist select option:checked, .noteslist select option:focus{
		background: rgba(0,0,0,0.5);
		color: rgb(230,230,255);
	}
}

.fa-solid{
	color:inherit;
}

*{
	transition: all ease-in-out 0.1s;

}
video.jumpvid {
    position:absolute;
    top:0px;
    left:0px;
    width:100vw;
    height:100vh;
    object-fit:fill;
    pointer-events: none;
}

#note-md{
	overflow: scroll;
	    	padding:10px;

}
.hiddentag{
    opacity: 0;
    position: absolute;
    left: -99999px;
    display: inline-block;
    width: 0px;
    height:0px;
    overflow: hidden;
}

pre{
	    margin: 0px;
}
code {
    background: rgba(0,0,0,0.5);
    padding:2px;
    border-radius:2px;
    font-family:monospace
}
.split-editor{
	display: flex;
	flex-direction: row-reverse;
}
.split-editor > *{
	height: calc(100% + 20px);
	width:calc(50% - 0px);
}
para {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}

bi {
    font-weight: bold;
    font-style: italic;
}
pre:has(code) > code, pre:has(code){
	width: calc(100% - 10px);
	display: block;
}
 pre:has(code) > code {
 	padding:10px;
 }
  pre:has(code) {
  	margin-block-start: 10px;
  	margin-block-end: 10px;
  }
  blockquote:before{
  	border-left: 5px solid turquoise;
  	display: inline-block;
  	content:'a';
  	color: transparent;
  	width: 5px;
  	height: 100%;
  	padding-top:10px;
  	padding-bottom:10px;
  	position: relative;
  	left: -40px;
  }
  input[type=search]{
  	color: black;
  }
  .notetree > details {
  	margin-left: 0px !important;
}
.notetree details details, .notetree details button{
}
.notetree button{
    width:100%;
    background: transparent;
    text-align:left;
    border-left: 4px solid rgba(255,255,255) !important;
    display:block;
    margin-left: -4px;
    
    
    
    
    &:before{
        content:'📝 '
    }
    &:hover{
        background: rgba(0,0,0,0.2)
    }
}
.notetree > details button{
    padding-left: 15px;
}
.notetree details summary::marker{
    content: '📁 '
}

.notetree details:open summary::marker{
    content: '📂 '
}

.notetree details{
    margin-bottom:3px;
    border-left: 4px solid rgba(255,255,255) !important;
    display:block;
    margin-left: -4px;
    padding-left: 4px;
    
}
.notetree summary{
    padding: 10px;
    &:hover{
        background: rgba(0,0,0,0.2)
    }
}
input#search {
    background: rgba(0,0,0,0.5);
    border:0px;
    font-size: 12pt;
    padding-top:5px;
    padding-bottom:5px;
    color: white
}label {
    position:absolute;
    font-size:0.9em;
}