body{
    color: cornsilk;
    background-color: black;
    font-size: x-large;
    margin-left: 0.5em;
    margin-right: 0.5em;
}

header{
    color: khaki;
    font-size: 2em;
    text-align: justify;
}
.Heading{
    color: coral;
    font: 4em sans-serif;
    font-style: italic;
    text-align: center;
}
strong{
    color: burlywood;
    font-family: monospace;
    text-decoration: underline;
    font-size: xx-large;
}
.Description, main{
    font-size: 30px;
    text-indent: 1em;
}

.gallery{

    /* margin: 4px; */
    opacity: 80%;
    outline: auto;
    border-radius: 16px;
    cursor: pointer;
    width: 100%;
    transition: opacity 0.3s ease;


    display: block; 
    margin-bottom: 16px;
}

.image-container{
    columns: 250px;

    margin-right: 32px;
    margin-left: 32px;
}

img:hover {
    opacity: 1;

}

.circle-container {
display: flex;
justify-content: center; 
align-items: center;
}

.webp {
display: block;
width: 300px;
margin-left: -60px;
border-radius: 150px;
outline: auto;
}

footer{
background-color:coral;
text-align: center;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-style: italic;
outline: auto;
border-radius: 10px;
}

iframe{
background-color: cadetblue;
border-radius: 20px;
width: 100%;
height: 100vh;
border: none;
}

li{
  word-wrap: break-word;
  
}

#last{
  padding-top: 1em;
}

  /* -------------------------------- Responsive adjustments -----------------------*/

/* Default (mobile first) — up to 540px */
@media (max-width: 540px) {
    /* --------------------------- */

  .webp:nth-child(3) {
    margin-left: 0;
  }
  /* ----------------------------- */
    .webp.first {
    display: none;
    }
    .webp.second {
    display: none;
    }
    .webp.third {
    display: block;
    }   
}

/* Medium screens — 541px to 768px */
@media (min-width: 541px) and (max-width: 768px) {
    /* --------------------------- */

  .webp:nth-child(2) {
    margin-left: 0;
  }
  /* ----------------------------- */
  .webp.first {
    display: none;
  }
  .webp.second {
    display: block;
  }
  .webp.third {
    display: block;
  }
}

/* Large screens — 769px and up */
@media (min-width: 769px) {
  /* --------------------------- */

  .webp:nth-child(1) {
    margin-left: 0;
  }
  /* ----------------------------- */

  .webp.first {
    display: block;
  }
  .webp.second {
    display: block;
  }
  .webp.third {
    display: block;
  }
}