styles.scss

/* Reset og border-box á allt */
$yellow: rgb(253, 253, 150);
$red: rgb(255, 105, 97);
$passap_bg_white: #f2f2ef;
$passap_text_green: #1d481d;

* {
	margin: 0;
	padding: 0;
	color: $passap_text_green;
}

html {
	box-sizing: border-box;
	background-color: $passap_bg_white;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

.sr-only:not(:focus):not(:active) {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.not_it {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	// height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.not_it .highlight {
	width: fit-content;
	height: fit-content;

	th,
	td {
		width: fit-content;
	}
}


.taflann {
	align-self: center;
	// wrap
	// overflow: auto;
	width: 100%;
	// width: fit-content;
	// overflow-y: scroll;
	// margin: 0;

	thead,
	tbody {
		tr {

			th,
			td {
				min-width: 1em;
				// width: fit-content;
				// overflow: hidden;
				// overflow-y: scroll;
				overflow-x: auto // text-align: ce;
					// align-self: self-start;
			}
		}
	}
}

tr {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

td {
	align-self: center;
	justify-self: center;
}

.mark {
	border: 1px solid black;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	width: 100%;
	border-radius: 0.5em;
	/* background-color: black; */
}

button,
input {
	padding: 0.5em 1em 0.75em;
	border: black solid 1px;
	border-radius: 1em;
	/* width: 2em; */
}

button:active {
	filter: drop-shadow(0px 0px 0px black) !important;
}


.buttonDelete {
	background: linear-gradient(to bottom right, white, $red);
	// text-shadow: white 1px 1px 12px;
	filter: drop-shadow(3px 3px 0px red);
	transition: filter 1s;
}

.buttonChange {
	background: linear-gradient(to bottom right, white, $yellow, yellow);
	// text-shadow: white 1px 1px 7px;
	filter: drop-shadow(3px 3px 0px yellow);

	transition: filter 1s;
}



.form {
	font-size: 1.25rem;
	// margin: 0 0 0;
	font-family: inherit;
	width: fit-content;
	margin: 1em auto;
	// display: flex;
	// gap: 0em;
	// flex-direction: column;
	// width: 90%;
	// filter: drop-shadow(0px 0px 50px #000000);

	.field {
		font-family: inherit;
		margin: 1em 0 0;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		gap: 1em;
		width: fit-content;


		&:has(textarea:not(:placeholder-shown)),
		&:has(textarea:focus),
		&:has(input:not(:placeholder-shown)),
		&:has(input:focus) {
			label {
				transform: translate(0, -1.25em);
				padding: 0 0 0 0;
				pointer-events: none;
			}
		}

		input:focus+label,
		input:not(:placeholder-shown)+label {
			transform: translate(0, -1.25em);
			padding: 0 0 0 0;
			pointer-events: none;
		}

		label {
			font-family: inherit;
			font-weight: 100;
			transition: transform 0.33s ease-out, padding 1s ease;
			position: absolute;
			padding: 0.5em 0 0 1em;
			pointer-events: none;
			background: transparent;
			// opacity: 50%;
		}

		textarea {
			height: 15em;
			width: 15em;
		}

		textarea,
		input {
			pointer-events: auto;
			font-size: 1.25rem;
			font-family: inherit;
			transition: box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out;
			box-shadow: 0 0 0 black;
			background-color: inherit;
			border-radius: 1em;
			// padding: 0 1em;
			padding: 0.5em 1em;
			// color: white;
			// width: 100%;
			// border: 1px solid inherit;

			&:focus {
				outline: none;
				border-color: white;
				// box-shadow: 0em 0.125em 0.75em 0.125em black;
				transition: border 0.25s;

				label {
					opacity: 100%;
				}
			}

			// padding: 0.5em 0;
			// width: 100%;
			// border: 1px solid inherit;
		}
	}

	.button {
		padding: 0.25em 1em 0.75em;
		// margin: 2rem 0 0;
		font-size: 1.25rem;
		// width: 100%;
		height: 2em;
		// color: white;
		font-weight: 100;
		// background: transparent;
		border-radius: 1em;

		transition: scale 1s;

		&:hover,
		&:focus-visible {
			cursor: pointer;
			font-weight: 400;
			// scale: 1.01;
			transition: scale 1s;
			// background-color: white;
			color: inherit;
			border-color: inherit;
			outline: none;
			// filter: drop-shadow(3px 3px 0px white);
			transition: filter 1s;
			// border-color: white;
			// box-shadow: 0em 0.005em 1.95em 0.005em black;
		}
	}
}

#munstur {
	display: grid;
	border: 1px $passap_text_green solid;
	border-radius: 1em;
	grid-template-rows: repeat(7, 1fr);

	.gridrow1 {
		grid-row: 1;
		opacity: 25%;
	}

	.gridrow2 {
		grid-row: 2;
		opacity: 50%;
	}

	.gridrow3 {
		grid-row: 3;
		opacity: 75%;
	}

	.gridrow4 {
		grid-row: 4;
	}

	.gridrow5 {
		grid-row: 5;
		font-weight: bold;
	}

	.gridrow6 {
		grid-row: 6;
		opacity: 75%;
	}

	.gridrow7 {
		grid-row: 7;
		opacity: 50%;
	}
}

header {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	text-align: center;
}

.loading {
	height: 100vh;
	width: 100vw;
	z-index: 10000;
	position: fixed;
	cursor: wait;
	margin: -125px;
	background: -webkit-linear-gradient($passap_bg_white, transparent);

	&::before {
		content: 'Reyni að breyta';
		animation-name: loading;
		animation-duration: 2s;
		animation-iteration-count: infinite;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 3rem;
		font-weight: 400;
	}
}

@keyframes loading {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}

	100% {
		opacity: 1;
	}
}