/*page-wide styles*/
:root {
  --pgyellow: #ffea7e;
  --pgorange: #ffc3b0;
  --pgpurple: #ffd6f3;
  --pnpink: #ff1c8d;
  --pnyellow: #ffd700;
  --pnblue: #1ab3ff;
}

body {
  color: #275f70;
  font-family: 'the unseen', 'Consolas', monospace;
  background-image: url('https://i.pinimg.com/1200x/85/ca/9f/85ca9f9eadcb74ed3d351a96ead15b27.jpg');
  background-attachment: fixed;
  background-size: cover;
}

a {
  color: var(--pnpink);
}

a:hover {
  color: #c40b4c;
}

a:visited {
  color: #692799;
}

.all {
  max-width: 976px;
  margin: auto;
}

/*header style*/
header {
  background: var(--pnpink);
  display: flex;
  padding: 10px 0px;
  margin-bottom: 10px;
  border-radius: 11px;
  justify-content: space-evenly;
}

.poster {
  max-width: 129px;
  width: 100%;
  height: auto;
  flex: 1;
  border-radius: 6px;
  min-width: 0;
}

/*main section start*/
main {
  display: grid;
  grid-template-columns: 1fr 4fr;
  gap: 10px;
}

/*links*/
nav {
  background: var(--pgorange);
  padding: 15px 20px;
  border-radius: 11px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

nav>p {
  margin: 0px;
}

/*stamp/blinkie box*/
aside {
  background: var(--pgpurple);
  padding: 0px 20px;
  border-radius: 11px;
  overflow: auto;
  max-height: 450px;
}

/*right part*/
.content {
  grid-column-start: 2;
  grid-row: 1 / span 2;
  background: var(--pgyellow);
  padding: 5px 20px;
  border-radius: 11px;
}

.info {
  display: flex;
  gap: 8.166px;
}

.mainposter {
  max-width: 200px;
  width: 100%;
  height: auto;
  flex: 1;
  border-radius: 6px;
}

.infotext {
  flex: 2;
}

.desc {
  background-color: var(--pgorange);
  border-radius: 6px;
  padding: 1px 15px;
}

.meal {
  background-color: var(--pgpurple);
  border-radius: 6px;
  padding: 1px 15px;
}

/*main section end*/
/*footer*/
footer {
  background: var(--pnblue);
  color: var(--pnyellow);
  border-radius: 11px;
  padding: 0px 20px;
  margin-top: 10px;
}

/*mobile display*/
@media (max-width: 600px) {
  header {
    padding: 5px 1px;
    gap: 1px;
  }

  main {
    grid-template-columns: auto;
  }

  nav {
    order: 1;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }

  .content {
    order: 2;
    grid-column-start: 1;
    grid-row: 2 / span 1;
  }

  .info {
    flex-direction: column;
  }

  aside {
    order: 3;
  }
}