/* Path: efirfira.hu/style.css */

/* header should be small and right aligned without much margins */
header {
  font-size: 0.5em;
  text-align: right;
  margin: 0;
}

/* create blue skylike background with clouds with pure CSS without any images */
body {
  background: rgb(0, 0, 255);
  background: linear-gradient(180deg, rgb(170, 211, 255) 0%, #3939f6 50%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* cloud image should be in the top left corner below any text and it should keep it's aspect ratio */
.cloud {
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  width: 20%;
  height: auto;
  z-index: -1;
}


/* add space around the page */
body {
  margin: 3em;
}

body {
  text-align: justify;
}

/* center headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
}

/* h1 should look like electricity in the sky */
h1 {
  color: rgb(64, 150, 255);
  text-shadow: 0.1em 0.1em 0.1em rgb(255, 255, 255);
}

/* center definition list */
dl {
  text-align: center;
}

/* make all text in the page bigger with a modern font with good readability */
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 2em;
}

/* all text should have a white center with grey shadows */
body {
  color: rgb(255, 255, 255);
  text-shadow: 0.1em 0.1em 0.1em rgb(128, 128, 128);
}

/* on desktop, style definition list side by side with definitions */
@media only screen and (min-width: 60em) {
  dl {
    display: grid;
    /* the grid center should be around 40% of the screen */
    grid-template-columns: 40% auto;
    grid-gap: 0.5em 0.1em;
  }

  dt {
    text-align: right;
    font-weight: bold;
  }

  dd {
    text-align: left;
  }

  /* portrait should occupy 30% of the screen on the right and text should flow around it */
  .portrait img {
    float: right;
    width: 35%;
    margin: 0.5em 0.5em 0.5em 1em;
  }

}

/* on mobile and smaller screens, style definition lists with definitions below */
@media only screen and (max-width: 60em) {
  body {
    font-size: 1em;
  }

  dl {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 0.5em;
  }

  dt {
    text-align: left;
    font-weight: bold;
  }

  dd {
    text-align: left;
  }

  /* portrait should occupy 70% of the screen, centered horizontally */
  .portrait img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    margin: 0.5em auto;
  }

}

/* footer text should be smaller */
footer {
  font-size: 0.4em;
  text-align: center;
}

/* footer should have two columns */
footer {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 0.5em;
}

/* footer has a separator line */
footer {
  border-top: 0.1em solid rgb(255, 255, 255);
}