/*morado oscuro: #3f0369
morado: #7448a6
morado claro: #b186d7
azul: #5268e4*/
body {
  background-image: url("fondo.jpg");
  color: white;
  font-family: "Monserrat", Verdana, Geneva, Tahoma, sans-serif;
  }
a {
  color: #5268e4;
}
h1 {
  font-size: xx-large;
}
h2 {
  font-size: large;
}

.box {
  max-width: 1000px;
  margin: 50px auto;
  display: grid;
  gap: 10px;
  background-color: #1a0030;
  border-style: dotted;
  grid-template-columns: 1fr 3fr 2fr;
}
.nav, .main, .content, .footer, .widecontent, .blinkie {
  border: #b186d7 2px solid;
  border-radius: 6px;
  margin-left: 5px;
  margin-right: 5px;
}
.header {
  grid-row: 1 / 2;
  grid-column: 1 / 4;
  text-align: center;
  color: #cd90ff;
}
.nav {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  height: max-content;
}
.main {
  grid-row: 2 / 4;
  grid-column: 2 / 3;
  height: max-content;
}
.content {
  grid-row: 2 / 4;
  grid-column: 3 / 4;
  height: max-content;
}
.mymii {
  display: flex;
}
.mymii div {
  margin: 10px;
  padding: 20px;
}
.mymii_image {
  width: 50%;
  border-style: dotted;
  border-color: #cd90ff;
  border-radius: 8px;
}
.footer {
  grid-row: 4 / 5;
  grid-column: 1 / 4;
  text-align: center;
  margin-bottom: 5px;
}
.widecontent {
  grid-row: 2 / 4;
  grid-column: 2 / 4;
  height: max-content;
}
.blinkie {
  grid-row: 3 / 4;
  grid-column: 1 / 2;
  height: max-content;
  text-align: center;
}
.blinkies {
  grid-row: 5 / 6;
  grid-column: 1 / 4;
  text-align: center;
  margin-bottom: 5px;
}
.buttons {
  grid-row: 6 / 7;
  grid-column: 1 / 4;
  text-align: center;
  margin-bottom: 5px;
}
.stamps {
  grid-row: 7 / 8;
  grid-column: 1 / 4;
  text-align: center;
  margin-bottom: 5px;
}