:root {
    --mint: #75ff96;
    --lightblue: #8bb7c4;
    --darkblue: #23444f;
    --lightmint: #c0ffdd;
    --lightpurple: #eeddff;
    --nav: #483f7f;
    --background: #161623;
    --backgroundlight: #f6fff8;
}
* {
  padding: 2px;
  margin: 0;
  box-sizing: border-box;
}
@font-face {
  font-family: basiic;
  src: url(../fonts/basiic.ttf);
}
p, h1, h2, h3, h4, h5, li, a {
  font-family: basiic;
}
p, h1, h2, h3, h4, h5, li {
  padding-bottom: 5px;
}
p {
  text-indent: 20px; 
}
li {
  list-style-type: none; 
}
html {
  background-image: url(../images/clouds.jpg);
  height: 100%;
  background-attachment: fixed;
  background-size: cover;
  color: var(--darkblue);
  margin-top: 16px;
  image-rendering: pixelated;
  overflow: hidden;
}


.container {  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 2px 2px;
  grid-auto-flow: row;
  grid-template-areas:
    "meee me-yap stamps-and-blinkies"
    "meee me-yap interests"
    "fav-music me-yap interests";
  width: 600px;
  height: 600px;
  margin: auto;
}
.interests { grid-area: interests; background-color: var(--backgroundlight); border: 2px dashed var(--lightblue); }
.fav-music { grid-area: fav-music; background-color: var(--backgroundlight); border: 2px dashed var(--lightblue); }
.me-yap { grid-area: me-yap; background-color: var(--backgroundlight); border: 2px dashed var(--lightblue); }
.meee {  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: .1fr .9fr 1fr;
  gap: 0 0;
  grid-auto-flow: row;
  grid-template-areas:
    "title"
    "pfp"
    "intro";
  grid-area: meee;
  background-color: var(--backgroundlight);
  border: 2px dashed var(--lightblue);
}
.title {grid-area: title; background-color: var(--backgroundlight); }
.pfp {
  grid-area: pfp; 
  width: 150px;
  height: 150px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  margin: auto;
  padding: 0;
  border-color: var(--lightblue);
  border-style: solid;
  border-width: 3px;
  background-color: var(--backgroundlight);
}
.intro { grid-area: intro; background-color: var(--backgroundlight); }
.stamps-and-blinkies {
  grid-area: stamps-and-blinkies;
  background-color: var(--backgroundlight);
  border: 2px dashed var(--lightblue);
  overflow-y: scroll;
  image-rendering: auto;
}
.cutsie { grid-area: cutsie; }

.stampblinkie {
  display: block;
  padding: 0;
  max-width: 90%;
  padding: 2px;
  margin: auto;
}