* {
  margin: 0;
  box-sizing: border-box;
}

@font-face{font-family:"love"; src:url(Endless_Love.ttf) format(truetype);}
h1,h2,h3, dt{font-family: "love", arial, sans-serif;}
@font-face{font-family:"fantasy"; src:url(Font_Fantasy.ttf)}
p, li, dd{font-family: "fantasy", garamond, serif;}

body{
  background: #dfcfb9 url("bg.png") no-repeat center center fixed;
  width: 100vw;
  min-height: 100vh;
}

#trans{
  width: 100%;
  min-height: 100vh;
  background-color: rgba(223, 207, 185, 0.7);
  display: sticky;
}

header{
  min-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

header *{
  font-size: 8vw;
  height: 100%;
  align-content: center;
}

#bannerleft{
  transform: scaleX(-1);
}

main, aside{
  background-color: rgba(255, 255, 255, 0.5);
  border: 5px solid slategrey;
  border-radius: 5px;
  margin: 10px;
  padding: 15px;
}

#pagedoll{
  display: none;
}

#egg{
  width: 90%;
  margin: 50px 5% auto;
  border: 5px solid slategrey;
  border-radius: 5px;
}

#imagecont{
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}

#imagecont img{
  width: 15%;
}

@media only screen and (min-width: 1000px) {
  #trans{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  header *{
    font-size: 8vh;
  }

  main{
    width: 80%;
  }

  aside{
    width: 40%;
  }
}

@media only screen and (min-width: 1440px) {
  #trans{
    display: grid;
    grid-template-columns: 1fr 3fr 3fr 1fr;
    grid-template-rows: auto 6fr 6fr 1fr;
    justify-content: center;
    grid-gap: 10px;
  }

  main, aside{
    margin: 0;
    width: 100%;
  }

  header{
    grid-column-start: 1;
    grid-column-end: 5;
  }

  main{
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 4;
  }

  #game{
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 2;    
  }

  #herba{
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 4;    
  }
}

@media only screen and (min-width: 2000px) {

  #trans{
    grid-template-columns: 1fr 2fr 2fr 1fr;
    grid-template-rows: auto 6fr 6fr 1fr;
    justify-content: center;
    grid-gap: 10px;
  }

  main, aside{
    margin: 0;
    width: 100%;
  }

  header{
    grid-column-start: 1;
    grid-column-end: 5;
  }

  main{
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 4;
  }

  #game{
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 2;    
  }

  #herba{
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 4;    
  }

  #pagedoll{
    display: inline;
    position: fixed;
    bottom: 15px;
    right: 10px;
    width: 15vw;
    rotate: 20deg;
  }
}