html {
    font-size: 62.5%;
    font-family: 'Arial', sans-serif;
	height: 100vh;
}

body {
    font-size: 1.6rem;
    margin: 0;

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

:root{
	background-color: oklch(17% 0.03 250);
}

.container { 
	margin-inline-start: 0;
	margin-inline-end: auto;
	padding: 0 1rem;
	max-width: 1280px; }

input:not([type=submit]),
textarea { 
	display: block; 
	width: 100%; 
	max-width: 40rem; 
	padding: .75em; 
	border: 1px solid #666; 
	border-radius: .3rem; 
} 

label, 
input[type=submit] {
	margin-block: 3rem; 
} 
input[type=submit] { 
	padding: .5em 2em; 
} 

label {
	display: block;
	margin-bottom: .2em;
	font-weight: bold;
} 

.message { 
	font-size: 1.4rem;
} 
.message.error {
	color: oklch(88% 0.02 250); }

.debug-hidden{
	display: none;
}

.box {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: stretch;
	
	  color: oklch(88% 0.02 250);
	  background-color: oklch(22% 0.04 250);
	  border-radius: 2rem;
	
	  padding: 2rem;
}

.center-page {
	  height: 100vh; 
	  display: flex;
	  justify-content: center; 
	  align-items: center;
	background-color: oklch(17% 0.03 250);
}

.button a {
	display: block;
	border-radius: 2rem;
	background-color: oklch(80% 0.03 250); 	
	color: oklch(0 0.1 206);		
	text-decoration: none; 
	padding: 1rem;
	
	&:hover{
	background-color: oklch(75% 0.14 230);  	
	color:oklch(0 0.1 206);		
	}	
}

.card-container {
  display: flex;
  flex-direction: row;      
  flex-wrap: wrap;          
  gap: 2rem;                
  justify-content: flex-start;
  align-items: flex-start;
  padding: 2rem;
  background-color: oklch(17% 0.03 250);   
}

.card {
  display: flex;
  flex-direction: column;   
  background: oklch(22% 0.04 250);
  color: oklch(88% 0.02 250);
  border-radius: 2rem;
  padding: 2rem;
  width: 20vw;
	
	 ol {
	  margin: 0;
	  padding-left: 1.5rem;
	  list-style: none;
	}
}
.bc{
	background-color: oklch(17% 0.03 250); 
	
	h1{
		margin-block-start: 0;
		padding-block-start: 2rem;
		color: oklch(88% 0.02 250); 
}
	
.height{
	height: 100vh;}
}

.container div label {
    display: flex;
    align-items: center;
    gap: 1rem;          
    font-weight: normal;
}

.container div label input[type="checkbox"] {
    order: -1;         
    width: 1.6rem;
    height: 1.6rem;
    margin: 0;
}

fieldset{
	padding-block-start: -3rem;
	margin-block-start: 3rem;
}

.margin-3{
	margin-block-start: -3rem;
}