html, body {
	  height: 100%;
	  margin: 0;
	  padding: 0;
	}
	
	@font-face {
		font-family: 'Special Elite';
		src: url('../fonts/SpecialElite-Regular.woff2') format('woff2');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	}
	
	@font-face {
		font-family: 'Veteran Typewriter';
		src: url('../fonts/VeteranTypewriter.woff2') format('woff2');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	}
	
	@font-face {
		font-family: 'Patrick Hand SC';
		src: url('../fonts/PatrickHandSC-Regular.woff2') format('woff2');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	}
	  
	body {
	  background-image: url('../images/background.jpg');
	  background-repeat: no-repeat;
	  background-color: #cccccc;
	  background-blend-mode: overlay;
	  background-size: cover; /* changed from 100% to cover */
	  background-position: center center;
	  background-attachment: fixed; /* ensures it stays in place while scrolling */
	}
	h1 {
        color: black;
        font-family: 'Veteran Typewriter';
        font-size: 650%;     
		text-align: center;
		margin-bottom: 10px;
    }
	h2 {
        color: black;
        font-family: 'Veteran Typewriter';
        font-size: 350%;     
		text-align: center;
		margin-bottom: 10px;
    }	
	h3 {
        color: black;
        font-family: 'Veteran Typewriter';
        font-size: 200%;
		text-align: center;
    }
	b {
        color: black;
        font-family: 'Veteran Typewriter';
        font-size: 120%;
		text-align: left;
		margin-left: 100px;
    }

	button {
        color: black;
        font-family: 'Special Elite';
        font-size: 100%;      	
    }
	
	
	
	.info-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		
		width: 700px; 
		padding: 50px;
		border-radius: 5px;
		box-shadow: 0 4px 12px rgba(0,0,0,0.4);
		margin: auto; 
		background: rgba(255, 255, 255, 0.3);
		opacity: 0.95;
		
	}
		
	.missionInfo { 
		font-size: 130%; 
		font-family: 'Special Elite';	
		border-radius: 8px;
		margin-top: auto;
		margin-bottom: auto;
		
	}
	
	.weather { 						
		font-family: 'Special Elite';
		font-size: 110%; 
	    color: black;
	}
	
	.met-container {
		background-image: url('../images/paper_file_texture.png');
		background-size: cover;
		background-position: centre;
		margin-top: 50px;
		padding: 40px;
		max-width: 400px;          /* controls the width */
		border-radius: 10px;
		box-shadow: 0 4px 12px rgba(0,0,0,0.4);
		opacity: 0.95;	  
	}	
	
	.airForceButtons {
	  display: flex;
	  justify-content: center;     /* center the group */
	  align-items: center;         /* vertical centering */
	  gap: 60px;                   /* space between buttons */
	  margin-top: 80px;
	  margin-bottom: 80px;
	}
	
	.alliedButton {
	  width: 400px; height: 400px;
	  border: none; border-radius: 20px;
      background: url('../images/AAF_logo.png') no-repeat center/contain;
	  opacity: 0.8; cursor: pointer;
	  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
	  transition: transform 0.3s ease, opacity 0.3s ease;"	  
	}
	
	.axisButton {
	  width: 400px; height: 400px;
	  border: none; border-radius: 20px;
      background: url('../images/Luftwaffe_Logo.png') no-repeat center/contain;
	  opacity: 0.8; cursor: pointer;
	  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
	  transition: transform 0.3s ease, opacity 0.3s ease;"	  
	}
	
	.infoButtons {
	  width: 220px;
	  height: 90px;
	  border: none;
   	  border-radius: 10px;
	  background: white;
	  color: black;
	  font-family: 'Special Elite';
	  font-size: 165%;
	  letter-spacing: 2px;
	  cursor: pointer;
	  opacity: 0.85;
	  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
	  transition: transform 0.3s ease, opacity 0.3s ease;
	  padding-top: 10px;
	}
	
	.info-text {	
		margin-top: 15px;
		font-family: 'Special Elite';
		color: black;
		font-size: 100%;
		line-height: 1.5;
		text-align: left;
	}
	
	.infoSection h2 {
		margin-top: 0;
		margin-bottom: 40px;
	}
	
	.downloadSection {	
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 40px;
		font-size: 95%;
	}	
	
	.downloadButtons {		
		width: 220px;
		height: 80px;
		border: none;
		border-radius: 10px;
		background: #222;
		color: white;
		font-family: 'Special Elite';
		font-size: 150%;
		letter-spacing: 2px;
		cursor: pointer;
		opacity: 0.85;
		box-shadow: 0 4px 8px rgba(0,0,0,0.3);
		transition: transform 0.3s ease, opacity 0.3s ease;
		padding-top: 4px;
	}
	
	.registration-form {
		font-family: 'Special Elite';
		max-width: 450px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		gap: 15px;
		font-size: 120%;
	}

	.registration-form input,
	.registration-form select {
		font-family: 'Special Elite';
		padding: 10px;
		font-size: 100%;
		border-radius: 6px;
		border: 1px solid #888;
	}

	.checkbox-label {
		display: flex;
		align-items: center;
		gap: 10px;
	}
	
	.registration-modal {       
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.6);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999;
	}

	/* Hidden state */
	.registration-modal.hidden {
		display: none;
	}

	/* The white box in the middle */
	.registration-modal-content {
		background: rgba(255,255,255,0.85);
		padding: 20px;
		border-radius: 8px;
		width: 300px;
		text-align: center;
		font-family: 'Special Elite';
	}
	
	.registration-button {
	  width: auto;
	  height: 25px;
	  border: none;
   	  border-radius: 5px;
	  background: white;
	  color: black;
	  font-family: 'Special Elite';
	  font-size: 90%;
	  cursor: pointer;
	  opacity: 0.85;
	  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
	  transition: transform 0.3s ease, opacity 0.3s ease;
	  padding-top: 5px;
	}