* {
	margin: 0;
	padding: 0;
	border: 5px;
	font-family: Times, serif;
}

nav {
    background-color: Snow;
    display: block;
    justify-content: space-between;
    border: 3px double #ccccff;
}

    /* Make the markers disappear */
nav ul {
    list-style-type: none;
}

  /* Puts the elements in a single line */
nav ul li {
    display: inline-flex;
    margin: 0.3em 1em;
}

/* Selects all links inside the nav element */
nav a {
  font-family: Times, serif;
  font-size: 30px;
  font-weight: bold;
  color: #ccccff;
  text-decoration: none; /* Removes default underline from links */
}

/* Style for hover state (optional) */
nav a:hover {
  color: #000;
  text-decoration: underline;
}

iframe:focus {
  outline: 10px;
}

iframe[seamless] {
  display: block;
}


.footer {
  position: fixed;
  bottom: 0; /* Aligns to the bottom of the viewport */
  width: 100%;
  display: table;
  /* Additional styling for appearance */
  background-color: #ccccff;
  color: #FFFFFF;
  text-align: center;
}

.container {
  display: flex; 
  gap: 10px;
  gap: 10px 20px; 
  column-gap: 20px;
}

.wrapper {
  display: flex;  
  flex-flow: row wrap;
  font-weight: lighter;
  text-align: center; 
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

.main {
  border: 3px double White;
  font-family: Courier;
  color: White;
  text-align: center;
  background: #ff99cc;
  font-size: 18px
}

.aside-1 {
  background: White;
  color: #ff99cc;
}

.aside-2 {
  background: White;
  color: #ff99cc
}

@media all and (min-width: 600px) {
  .aside { flex: 1 0 0; }
}

@media all and (min-width: 800px) {
  .main    { flex: 3 0px; }
  .aside-1 { order: 2; } 
  .main    { order: 3; }
  .aside-2 { order: 4; }
  .footer  { order: 5; }
}