/* Grid Stuff */
.wrapper {
  display: flex;  
  flex-flow: row wrap;
  text-align: center; 
  margin-top: 25px;
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

.header {
}

.footer {
}

.main {
  text-align: left;
}

.aside-1 {
  background: #FFD100;
  border: 10px solid transparent;
  border-image: url(border.png) 30 stretch;
  image-rendering: pixelated;
  text-align: center;
  justify-content: center;
  margin: 10px 60px 10px 60px;
}

.aside-1 div {
  width: 144px;
  height: 144px;
  object-fit: contain;
  border: 10px solid transparent;
  border-image: url(border.png) 30 stretch;
  margin: 0 auto; /* short for margin-top: 0; margin-left: auto; margin-bottom: 0; margin-right: auto. You can also do margin: 0 auto 0 to specify the top and bottom margins separately, or just margin: 0 to specify all four margins. When a margin on the side is "auto" it automatically centres stuff (usually). */
}

.aside-1 div img{
  width: min(144px, 100%);
}

.aside-2 {
  background: #FFD100;
  border: 10px solid transparent;
  border-image: url(border.png) 30 stretch;
  image-rendering: pixelated;
  text-align: center;
  justify-content: center;
  margin: 10px 60px 10px 60px;
}

.button {
  margin: 0 auto;
  width: 144px;
  height: 32px;
  background-image: url(button.png);
  background-size: cover;
  background-repeat: no-repeat;
  border: 10px solid transparent;
  border-image: url(border2.png) 30 stretch;
}

@media all and (min-width: 600px) {
  .aside { flex: 1 0 0; 
           margin: 10px;}
}

@media all and (min-width: 800px) {
  .main    { flex: 3 0px; }
  .aside-1 { order: 1; } 
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

/* Flex Stuff */
.FlexContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    width: 100%;
    height: 65vh;
    overflow: auto;
    flex-direction: row;
}

.FlexContainer div {
    width: 192px;
    height: 278px;
    margin: 0;
    object-fit: contain;
}
.FlexContainer div img {
    width: 192px;
    height: 278px;
    margin: 0;
    object-fit: contain;
}


/* Flair Stuff */
body {
  padding-top: 4em;
  padding-right: 12%;
  padding-bottom: 4em;
  padding-left: 12%;
  background-color: #223333;
  color: #430067;
  
  background-position: center;
	background-size: contain;
	background-attachment: fixed;
	background-repeat: no-repeat;
}
h1{
  font-size: 11pt;
  line-height: 13pt;
  font-family: Arial, system-ui;
}
h2{
  font-size: 40pt;
  line-height: 10pt;
  font-family: "Jacquard 12", system-ui;
  font-weight: normal;
  text-align: center;
}
h3{
  font-size: 60pt;
  font-family: "Jacquard 24", system-ui;
  font-weight: normal;
  color: #FFD100;
}
a:link{
  color: #BFFF3C;
  text-decoration: none
}
a:visited, a:hover{
  color: #FF80A4;
  text-decoration: none
}


/* Scrollbar! */
::-webkit-scrollbar {
  width: 13px;
  height: 13px;
}
::-webkit-scrollbar-button {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-thumb {
  background: #ffd100;
  border: 3px double #ff8426;
  border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ff80a4;
}
::-webkit-scrollbar-thumb:active {
  background: #ff80a4;
}
::-webkit-scrollbar-track {
  background: #223333;
  border: 0px none #430067;
  border-radius: 0px;
}
::-webkit-scrollbar-track:hover {
  background: #430067;
}
::-webkit-scrollbar-track:active {
  background: #430067;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

@media all and (max-width: 800px) {
  body     {padding: 5%;}
  .main    {padding: 5px;}
}