/* Basic CSS resets -- leveling slight inconsistencies in browsers */
html, body {
	margin:0px;
	padding:0px;
	height:100%;
}

html {
		/* Standard text-settings below */
	font-size: 1em;
    line-height: 1.4em;
}




body {
	background-color: antiquewhite;
	font-family: "tagesschrift", system-ui;
	font-style: normal;
}

.tagesschrift-regular {
	font-family: "Tagesschrift", system-ui;
	font-weight: 400;
	font-style: normal;
  }

#container {
	max-width: 800px; /* Or whatever width you want */
	margin: 0 auto;   /* This centers the block horizontally */
	padding: 20px;
	border: solid black 2px;
}

header {
	margin: left;
}

h2 {
	cursor: pointer;
	display: inline-block;
}

p {
margin: auto;
}

.omar {
	background: orange;
	color: purple;
	font-size:2em;
	font-family: Impact, sans-serif;
}

figure {
    margin: 20px 0;
    padding: 0;
    width: 100%;
    max-width: 600px;
}

figure img {
	width: 100%;
	height: auto;
	display: block;
}

figure.responsive {
	position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    width: 100%;
    max-width: 600px;
    margin: 20px auto; /* <-- THIS centers it horizontally */

}

figure.responsive iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

figure.figure1 {
    position: relative;
	padding-bottom: 0; /* images don't need 16:9 padding */
	height: auto;
	max-width: 600px;
	width: 100%;
	margin: 20px auto;
}

figure.figure1 img {
	width: 100%;
	height: auto;
	display: block;
}

main {
	display: flex;
    flex-direction: column;
    align-items: center; /* <-- centers child elements horizontally */
    gap: 20px; /* nice spacing between items */
}


/* Mobile styles (screen 768px or smaller) */
@media (max-width: 768px) {
	header, main {
	  text-align: center;
	}
  
	header h1, header h2, button {
	  margin-left: auto;
	  margin-right: auto;

	}
  }