@media (orientation:portrait){
	.landscape{ display: none; }
}
@media (orientation:landscape){
	.portrait{ display: none; }
}

@media (min-width: 1024px) {
	html { font-size: calc((1rem / 16) * 0.9); }
	.mobile { display: none; }
}

@media (min-width: 1280px) {
	html { font-size: calc((1rem / 16) * 1); }
}

@media (min-width: 1440px) {
	html { font-size: calc((1rem / 16) * 1); }

        /* 2 columns on medium widths */
        #items {
            grid-template-columns: repeat(2, 1fr);
        }

}

@media (min-width: 1600px) {
	html { font-size: calc(1rem / 16); }
}

@media (min-width: 1920px) {
	html { font-size: calc(1rem / 16); }
}




/* MOBILE */
@media (max-width:1023px){
	.desktop{ display: none; }
	html { font-size: calc((1rem / 16) * 1.3); }

	/*@media (max-width:1023px) and (orientation:portrait){*/
	h1 {
		font-size:var(--l);
		line-height:1.4;
	}
	.button {
		height:46rem;
		padding:0 15rem;
		font-size:var(--xs);
	}
	.button:has(span):not(.icon-text) { width:46rem; }

	.material-symbols-outlined { font-size:var(--s) !important; }

	#login {
		padding:10rem;
	}
	#login ul li h1 {
		padding:0;
	}
	#login .notice {
		max-width: 90vw;
		width:100%;
		padding:20rem;
	}
	#login .notice ul {
		padding: 20rem;
	}
	#login .notice ul li:last-of-type {
		flex-direction: column-reverse;
	}

	input:not([type="checkbox"]),
	select,
	textarea {
		font-size:var(--xs);
	}


	header {
		width:100%;
		justify-content: space-between;
		z-index: 201;
	}
	header button.mn {
		font-size:8rem;
		width: 3.0em;
		height: 2.32em;
		position: relative;
		padding:0;
		background-color:transparent;
		border-radius: 0;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .5s ease-in-out;
		-moz-transition: .5s ease-in-out;
		-o-transition: .5s ease-in-out;
		transition: .5s ease-in-out;
		cursor: pointer;
		z-index:5;
	}
	header button.mn:hover {
		background-color:transparent;
		border-radius: 0;
	}
	header button.mn span{
		display: block;
		position: absolute;
		height: 0.3em;
		width: 100%;
		background: rgb(var(--black));
		opacity: 1;
		left: 0;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .25s ease-in-out;
		-moz-transition: .25s ease-in-out;
		-o-transition: .25s ease-in-out;
		transition: .25s ease-in-out;
		border-radius:2rem;
	}
	header button.mn span:nth-child(1) { top: 0; }
	header button.mn  span:nth-child(2),header button span:nth-child(3) { top: 1.0em; }
	header button.mn  span:nth-child(4) { top: 2.0em; }
	header button.mn.open span:nth-child(1) {
		top: 2.0em;
		width: 0;
		left: 50%;
	}
	header button.mn.open span:nth-child(2) {
		background: rgb(var(--white));
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	header button.mn.open span:nth-child(3) {
		background: rgb(var(--white));
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	header button.mn.open span:nth-child(4) {
		top: 2.0em;
		width: 0%;
		left: 50%;
	}
	header.aside_open {
		box-shadow: none;
	}
	header.aside_open.pur {
		background-color:rgb(var(--purple-dark));
	}
	header.aside_open button.mn span {
		background: rgb(var(--white));
	}
	header.aside_open .material-symbols-outlined {
		color: rgb(var(--white));
	}
	aside {
		display: flex;
		align-items: center;
		flex-direction: column;
		position: absolute;
		top: 0;
		left: -101vw;
		bottom: 0;
		height: 100%;
		width: 101vw;
		padding-top:70rem;
		transition: 1s ease-in-out;
		z-index: 200;
		overflow-x: hidden;
		overflow-y:initial;
	}
	aside.open {
		left: 0;
	}
	aside div,
	aside nav { width: 70vw; }
	aside #user .badges { gap:20rem; }
	aside nav {
		margin-top:20rem;
	}
	aside nav ul li a {
		font-size:var(--s);
		gap:15rem;
	}
	aside nav ul li a .material-symbols-outlined{
		font-size:var(--m);
	}

	#content #hero #hero_inner {
		justify-content: space-between;
		flex-wrap:wrap;
		row-gap:30rem;
		height:auto;
		padding:32rem 16rem;
	}
	#content #hero #hero_inner h1 {
		flex: 1 calc(100% - 20rem);
		justify-content:center;
		flex-wrap:wrap;
		gap:0;
		row-gap:5rem;
		text-align:center;
	}
	#content #hero #hero_inner h1 .badge { order:-1; }
	#content #hero #hero_inner #page_actions {
		width: 100%;
		justify-content: center;
	}

	#lists,
	#items {
		gap:16rem;
		padding:16rem;
	}
	#lists li,
	#items li {
		flex:1 100%;
	}
	#items li div:first-of-type {
		align-items: flex-start;
		flex-wrap: wrap;
		height:auto;
	}
	#items li div:first-of-type h2 {
		flex:1 100%;
		align-items:center;
		flex-wrap: wrap;
		gap:10rem;
	}
	#items li div:first-of-type h2 span {
		margin-right:50%;
		margin-left:0;
	}
	#items li div:first-of-type h3 {
		margin-top:4rem;
	}

	dialog {
		max-width:90vw;
		width:100%;
		padding:16rem;
	}
	dialog div > .close {
		top:18rem;
		right:20rem;
	}

	dialog form ul li input[type="date"] {
		text-align: left;
	}


	/*}*/
	
	@media (max-width:764px) and (orientation:portrait){
		#items li div:first-of-type h2 {
			font-size:var(--s);
		}
		#items li div:first-of-type h3:first-of-type,
		#items li div:first-of-type h3 {
			margin:20rem 0 0 0;
			font-size:var(--xs);
		}
		#items li p {
			padding:16rem;
			font-size:var(--xs);
		}
		dialog div h2 {
			font-size:var(--m);
		}
		dialog div p {
			font-size:var(--xs);
		}
	}
}

/*@media (max-width:978px) and (orientation:landscape){*/
/*	aside {*/
/*		display: flex;*/
/*		align-items: center;*/
/*		flex-direction: column;*/
/*	}*/
/*	aside div,*/
/*	aside nav { width: 60vw; }*/

/*}*/
/*@media (max-width:780px) and (orientation:portrait){*/
/*	aside {*/
/*		display: flex;*/
/*		align-items: center;*/
/*		flex-direction: column;*/
/*	}*/
/*	aside div,*/
/*	aside nav { width: 60vw; }*/

/*}*/