@import url('https://fonts.googleapis.com/css2?family=Julius+Sans+One&family=Khula&display=swap');


*{
	margin: 0;
	border: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	display: grid;
	grid-template-rows: minmax(50px, 7%) auto;
	grid-template-columns: repeat(2, 1fr);
	grid-template-areas:
	"nav nav" 
	"main main ";
	font-family: arial;
}

nav{
	display: flex;
	grid-area: nav;
	justify-content: space-between;
	align-items: center;
	background-color: #245E31;
	padding: 10px;
	color: white;
	font-size: 30px;
	font-family: arial;
}

nav img{
	min-width: 16px;
	max-width: 32px;
}
nav img:hover{
	cursor: pointer;
}

nav .searchDiv{
	display: flex;
	width: 100%;
}
nav .lembrouHeader{
	display: block;

}


nav .searchInput{
	border: none;
	border-radius: 5px;
	outline-style: none;
	padding: 5px;
	height: 100%;
	width: 50%;
}

nav .clearSearch{
	max-width: 20%;
	padding: 5px;
	color: white;
	background-color: transparent;
}

nav button:hover{
	cursor: pointer;
}





aside{
	z-index: 1;
	overflow: hidden;
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	right: 0px;
	top: 0px;
	width: 0px;
	height: 100%;
	font-family: arial;
	transition: all ease 0.2s;
}

aside .newNote{
	display: flex;
	position: relative;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	border-radius: 0%;
	overflow: auto;
	background-color: white;
}

aside .newHeader{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: clamp(50px, 50px, 7%);
	width: 100%;
	padding: 0px 10px;
	background-color: #417545;
}

aside .save{
	display: flex;
	justify-content: flex-end;
	height: 70%;
	width: 15%;
	color: white;
}
aside .save:hover{
	cursor: pointer;
}

aside .save img{
	height: 100%;
}

aside .colorInput{
	-webkit-appearance: none;
	-webkit-padding: 0px;
	-moz-appearance: none;
	appearance: none;
	border: none;
	cursor: pointer;
	border-radius: 100%;
	padding: 5px;
	background-color: transparent;
	height: 100%;
	width: 15%;
	max-width: 15%;
	border-radius: 5px;
}
.colorInput::-webkit-color-swatch{
	border-radius: 100%;
	max-width: 32px;
	border: none;
}

.colorInput::moz-color-swatch{
	border-radius: 100%;
	border: none;
	max-width: 32px;
}


aside .newTitle{
	width: 50%;
	text-align: center;
	background-color: #6CA671;
	border-radius: 5px;
	color: white;
	outline-color: forestgreen;
	padding: 12px;
}
aside .newTitle::placeholder{
	color: white;
}

aside .newText{
	z-index: 1;
	padding: clamp(1%, 20px, 5%);
	width: 98%;
	height: clamp(87%, 500px, 50%);
	border-radius: 10px;
	border: solid 3px #dcdcdc;
	outline-style: none;
	resize: none;
}


aside .newBtns{
	display: flex;
	align-items: stretch;
	justify-content: space-evenly;
	width: 100%;
	height: clamp(5%, 40px, 10%);
}

aside .newBtns button{
	width: 100%;
}
aside button:hover{
	cursor: pointer;
}

aside .newCancel{
	z-index: 1;
	background-color: white;
	color: red;
}

aside .newSave{
	z-index: 1;
	background-color: white;
	border: none;
	text-decoration: none;
	outline: none;
	color: forestgreen;
}

aside .newReturn{
	margin-top: 2%;
	width: 100%;
	height: 8%;
}



main{
	display: flex;
	grid-area: main;
	flex-direction: column;
	justify-content: center;
	padding: 10px;
	margin: 15px 7px;
	border: 5px dashed lightgray;
	border-radius: 20px;
	max-height: 100%;
	overflow: auto;
}

main .notesContainer{
	width: 100%;
	height: 100%;
	overflow: auto;
}

main .notes{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap: 2%;
	height: clamp(50%, 900px, 100%);
	width: clamp(300px, 10%, 100%);
	display: none;
}

.card{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-radius: 10px;
	border: solid 3px;
	width: clamp(100px, 46%, 200px);
	max-height: 30%;
	overflow: hidden;
	outline-color: none;
	background-color: white;
	transition: all linear 0.5s;
}
.card-options{
	z-index: 2;
	position: absolute;
	display: none;
	justify-content: center;
	align-items: center;
	text-justify: center;
	top: -10px;
	right: 0;
	color: gray;
	padding: 0px 15px;
	padding-top: 0px;
	font-family: poppins;
	font-size: 200%;
	background-color: white;
	height: clamp(, 50px, 20%);
}
.card textarea{
	padding: 5px;
	background-color: white;
	font-family: arial;
	width: 100%;
	height: 100%;
	resize: none;
}
.card-title{
	padding: 10px;
	width: 100%;
}
.card-content{
	padding: 10px;
	width: 100%;
	height: 100%;
}
.card-menu{
	display: flex;
	width: 100%;
	height: 0%;
	transition: all linear 0.5s;
}
.card-menu button{
	width: 100%;
	border: solid #d9d9d9 2px;
}
.card-edit{
	display: flex;
	width: 100%;
	height: clamp(20px, 10%, 30%);
}
.card-edit button{
	width: 50%;
	height: 100%;
	border: solid #d9d9d9 2px;
}

.editColor{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 32px;
	height: 32px;
	margin-top: 20px;
	border: none;
	cursor: pointer;
	display: none;
	border-radius: 100%;
	border-color: none;
	background-color: transparent;
}

#inputColor{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 32px;
	height: 32px;
	border: none;
	cursor: pointer;

}

.editColor::-webkit-color-swatch{
	border-radius: 100%;
	border: none;
}

.editColor::moz-color-swatch{
	border-radius: 100%;
	border: none;
}


.new{
	display: flex;
	align-items: center;
	justify-content: center;
	color: lightgray;
	text-align: center;
	font-size: 150%;
	width: 100%;
	height: 100%;
}
.new b{
	font-size: 200%;
}
.newLink{
	text-decoration: none;
}
.newLink p{
	text-decoration: none;
	color: green;
}