#fullscreen-modal
{
	width: 100dvw;
	height: 100dvh;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	border: none;
	background-color: #1a1a1aee;
	color: #ffffff;


	&[open]
	{
		display: flex;
		align-items: center;
		justify-content: center;

		&::backdrop {backdrop-filter: blur(4px);}
	}
}

.modal-wrapper
{
	text-align: center;
	font-family: system-ui, -apple-system, sans-serif;
	padding: 0 2rem;
	margin: 0 auto 0;

	
		
	h2{
		font-size: 1.8rem;
		color: #fff6e4;
		margin: 0 auto 1rem;
		letter-spacing: 8px;
		text-transform: uppercase;

	}


	p
	{
		margin: 1em auto .9rem;
		display: grid;
		grid-template-columns: auto auto;
		gap: .45rem 2.7rem;
		font-weight: 600;
		font-size: 1rem;

		span{
			text-align: left;
			margin:0;
			
			text-shadow: 1px 2px #0007;

			&.closed{
				color: #e00;
				margin-bottom: .75rem;
				text-transform: uppercase;
			}

			&.changed{
				color: gold;
				margin-top: .75rem;
			}
			
		}
		
	}
}

#close-modal
{
	margin-top: 1rem;
	padding: 0.65rem 1.85rem;
	font-size: 1rem;
	font-weight: 600;
	border: none;
	border-radius: 6px;
		
	cursor: pointer;
	transition: background-color 0.2s;

	color: #1a1a1a;
	background-color: #fff6e4;

	&:hover
	{
		background-color: #c00;
		color: #fff;
	}
}