/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


@font-face {
  font-family: minecraftFont; /* set name */
  src: url("fonts/Minecraft.otf"); /* url of the font */
}

html {
  background-image: url("https://konekokuro.neocities.org/images/dirt.png");
  background-attachment: fixed;
  background-repeat: repeat;
  min-width: 100%;
  box-sizing: border-box;
}

body {
  background-color: #5B8D4E;
  border-radius: 4em;
  padding: 1em;
  color: #233A1D;
  font-family: minecraftFont, "Courier New";
  text-align: center;
  min-width: 75%;
  height: 100%
}

header {
  grid-area: header;
  padding: 1em;
}

hr {
    align-items: center;
    width: 95%;
    border-color: #233A1D;
    border: 2;
}

.button {
  text-decoration: none;
  border-radius: 4em;
  padding: 1em 1.5em 1em 1.5em;
  text-align: center;
  background-color: #6D6C6D;
}

.button:link {
  color: #B5B5B5;
}

.button:visited {
  color: #C29D62;
}

.button:hover {
  background-color: #C29D62;
  color: #473721;
}

.button:active {
  background-color: #473721;
  color: #C29D62;
}

.button:focus {
  background-color: #473721;
  color: #C29D62;
}

.warningbutton {
  text-decoration: none;
  border-radius: 4em;
  padding: 1em 1.5em 1em 1.5em;
  text-align: center;
  background-color: #233A1D;
}

.warningbutton:link {
  color: #B5B5B5;
}

.warningbutton:visited {
  color: #C29D62;
}

.warningbutton:hover {
  background-color: #C29D62;
  color: #473721;
}

.warningbutton:active {
  background-color: #473721;
  color: #C29D62;
}

.warningbutton:focus {
  background-color: #473721;
  color: #C29D62;
}

#entire-container {
  text-align: center;
  color: #233A1D;
  background-color: #8FCA5C;
  border-radius: 45px;
  padding: 1em 2em 1em 2.5em;
  height: 100vmax;
}

#entire-container > div {
  background-color: #5B8D4E;
  border-radius: 4em;
  padding: 1em;
  text-align: center;
}

#main-container {
  display: grid;
  gap: 5px;
  justify-content: center;
}

#main-container > div {
  padding: 10px;
  gap: 1em;
}

#header-container {
  display: grid;
  grid-template-columns: 15% 60% 15%;
  padding: 1em;
  column-gap: 1.5em;
  justify-content: center;
}

#header-container > div {
  display: grid;
  padding: 1em;
  justify-content: center;
  align-content: center;
}

ul {
  padding: 0;
  text-align: center;
  list-style-position: inside;
}

#aboutme {
  display: grid;
  grid-template-columns: 35% 30% 35%;
  column-gap: 1em;
  justify-content: center;
}

#aboutme > div {
  padding: 1em;
  justify-content: center;
  align-content: center;
}

#aboutme > ul {
  padding: 0;
  text-align: center;
  list-style-position: inside;
}

.blinkies {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  column-gap: 1em;
  justify-content: center;
  align-content: center;
  column-width: 200px;
  column-rule: 1px solid rgba(255, 255, 255, 0.3);
  max-width: 960px;
}

.blinkies > div {
  padding: .2em;
}

.blinkies > div > img {
  object-fit: scale-down;
  max-width: 100%
}

.blinkiespage {
  display: grid;
  grid-template-columns: fit-content(150px) fit-content(150px) fit-content(150px) fit-content(150px) fit-content(150px) fit-content(150px) fit-content(150px) fit-content(150px);
  column-gap: 1em;
  justify-content: center;
  align-content: center;
}

.blinkiespage > div {
  padding: .5em;
}

.blinkiespage > div > img {
  object-fit: scale-down;
}

#blinkies-container {
  justify-content: center;
}

#blinkies-container > div {
  border-radius: 4em;
  border-style: solid;
  border-color: #5B8D4E;
  justify-content: center;
  padding: 1em;
}

@media (min-width: 200px) and (max-width: 500px) {}

.row:after {
  content: "";
  display: table;
  clear: both;
}

#grid-container {
  grid-template-columns: 1fr 34% 1fr;
  display: grid;
  gap: 1rem;
  align-items: center;
  grid-template-areas:
  "header header header"
  "past blog future" 
  "footer footer footer";
}

#grid-container > div {
  display: grid;
  grid-template-rows: 1fr;
  border-radius: 4em;
  border-style: solid;
  border-color: #5B8D4E;
  height: 100%;
  justify-content: center; 
}

#past {
  grid-area: past;
}

#blog {
  grid-area: blog;
}

#future {
  grid-area: future;
}

#past > div {
  object-fit: contain;
  justify-content: center; 
  vertical-align: top;
}

#blog > div {
  object-fit: contain;
  justify-content: center; 
  vertical-align: top;
}

#future > div {
  object-fit: contain;
  justify-content: center; 
  vertical-align: middle;
}

footer {
  grid-area: footer;
  padding: 0;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .header {grid-area: 1 / 1 / span 3 / span 1;}
  .past {grid-area: 2 / 1 / span 3;}
  .blog {grid-area: 3 / 2 / span 3;}
  .future {grid-area: 4 / 3 / span 3;}
  .footer {grid-area: 5 / span 3;}
  #grid-container { 
  grid-template-areas:
  "header header header"
  "past" "blog" "future" 
  "footer footer footer";}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .header {grid-area: 1 / 1 / span 3 / span 1;}
  .past {grid-area: 2 / 1 / span 3;}
  .blog {grid-area: 3 / 2 / span 3;}
  .future {grid-area: 4 / 3 / span 3;}
  .footer {grid-area: 5 / span 3;}
  #grid-container { 
    grid-template-areas:
    "header header header"
    "past" 
    "blog" 
    "future" 
    "footer footer footer";}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .header {grid-area: 1 / 1 / span 3 / span 1;}
  .past {grid-area: 2 / 1 / span 1;}
  .blog {grid-area: 2 / 2 / span 1;}
  .future {grid-area: 2 / 3 / span 1;}
  .footer {grid-area: 3 / span 3;}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .header {grid-area: 1 / 1 / span 3 / span 1;}
  .past {grid-area: 2 / 1 / span 1;}
  .blog {grid-area: 2 / 2 / span 1;}
  .future {grid-area: 2 / 3 / span 1;}
  .footer {grid-area: 3 / span 3;}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .header {grid-area: 1 / 1 / span 3 / span 1;}
  .past {grid-area: 2 / 1 / span 1;}
  .blog {grid-area: 2 / 2 / span 1;}
  .future {grid-area: 2 / 3 / span 1;}
  .footer {grid-area: 3 / span 3;}
}