body {
  background-color: #e8d8e0;
  color: black;
  font-family: conVerdana;
  cursor: url('art/cursor.png'), auto;
}

/* FONTS */
@font-face {
  font-family: "dunkin";
  src: url("fonts/Dunkin.otf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "hearts";
  src: url("fonts/rainyhearts.ttf") format("truetype"),
}

@font-face {
  font-family: "magica";
  src: url(https://dl.dropbox.com/s/t654pb18rsg6ywa/theheart.ttf);
}

@font-face {
  font-family: "billo";
  src: url(https://dl.dropbox.com/s/klv8tmajlqrb2xz/BILLO___.TTF);
}

audio {
  position: fixed;
  bottom: 10px;
  left: 10px;
  width: 200px;
}

p {
  font-family: magica;
  font-size: 14px;   /* fallback for old browsers */
  font-size: 2.2vh;  /* modern browsers override */
  color: #5a5a5a;
  padding: 1%;
}


b {
  color: #f857a8;
  text-transform: uppercase;
}

a {
  font-family: hearts;
  text-decoration: none;
  color: #f585bd;
  cursor: url('art/cursor_hover.png'), auto;
}

a:visited {
  color: #f585bd;
  cursor: url('art/cursor_hover.png'), auto;
}

/* TITLE */
#everything {
  position: relative;
  z-index: 3;
}

.pinkwave {
  font-family: dunkin;
  font-weight: bold;
  letter-spacing: 2.5px;
  color: #f585bd;
  -webkit-text-fill-color: transparent;
  background: url("https://i.postimg.cc/3J01kGKQ/db8ne8-1-1.png") repeat-x;
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: waveAnimation 4s infinite linear;
  filter: drop-shadow(1px 1px #fbf4f7)
          drop-shadow(-1px 1px white)
          drop-shadow(1px -1px white)
          drop-shadow(-1px -1px white)
          drop-shadow(1px 1px #bf74b3)
          drop-shadow(-1px 1px #bf74b3)
          drop-shadow(1px -1px #bf74b3)
          drop-shadow(-1px -1px #bf74b3);
}


#a:hover {
  letter-spacing: 10.5px;
  cursor: url('art/cursor_hover.png'), auto;
}

/* HEADINGS */
    h1 {
      font-family: arial;
      -webkit-text-fill-color: #faedf1;
      -webkit-text-stroke: 1px black;
      margin: 0;
      text-align: center;
      font-size: 5vh;
    }

    h2 {
      font-family: arial;
      -webkit-text-fill-color: #f4c3e3;
      filter: drop-shadow(1px 1px #fbf4f7) drop-shadow(-1px 1px white) drop-shadow(1px -1px white) drop-shadow(-1px -1px white) drop-shadow(1px 1px #bf74b3) drop-shadow(-1px 1px #bf74b3) drop-shadow(1px -1px #bf74b3) drop-shadow(-1px -1px #bf74b3);
      letter-spacing: 5.5px;
      margin: 5%;
      text-align: center;
      font-size: 2.5vh;
    }


h3 {
  font-family: arial;
  -webkit-text-fill-color: white;
  -webkit-text-stroke: 1px black;
  font-size: 2vh;
  background-color: #eee5b1;
  text-align: center;
}

h4 {
  font-family: magica;
  font-size: 14px;   /* fallback for old browsers */
  font-size: 2.2vh;  /* modern browsers override */
  color: #5a5a5a;
  padding: 1%;
  text-align: center;
}

/* LAYOUT */
.container {
  margin: auto;
  display: grid;
  width: 55%;
  height: 1000px;
  gap: 10px;
  padding: 0.5%;
  background-color: white;

  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(5, 1fr);

  grid-template-areas:
    "navigation navigation banner banner banner banner banner long long"
    "navigation navigation banner banner banner banner banner long long"
    "navigation navigation main main main main main long long"
    "currently currently main main main main main long long"
    "currently currently updates updates updates updates updates long long";

  border: 7px solid transparent;
  border-image: url("https://files.catbox.moe/zv88c6.png") 8 round;
  filter: drop-shadow(0 0 0.5rem #91758a);
}


/* SECTIONS */
    .navigation {
      grid-area: navigation;
      border: 4px ridge #febfde;
      border-radius: 10px;
      overflow: auto;
      background-image: url("https://files.catbox.moe/p6m00b.gif");
    }

    .banner {
      grid-area: banner;
      border: 4px ridge #febfde;
      border-radius: 2%;
      background-image: url("https://i.postimg.cc/251c65d1/me.png");
      background-size: cover;
      background-position: 50%;
    }

    .main {
      grid-area: main;
      margin: auto;
      border: 4px ridge #FEBFDE;
      border-radius: 10px;
      background-image: url('https://file.garden/ZhHzxDd312HXr3fg/tumblr_me41pmqQhe1r52dl9540.gif');
      height: 97.5%;
      padding: 0.5%;
      width: 96.5%;
    }

.updates {
  grid-area: updates;
  border: 4px ridge #FEBFDE;
  background-image: url('https://i.postimg.cc/Bb0MMcrm/boxbg-002.png');
}

.currently {
  grid-area: currently;
  border: 4px ridge #FEBFDE;
  background-image: url('https://i.postimg.cc/tgVsf3wf/tumblr_inline_ml9b16bJXc1qz4rgp540.gif');
}

.long {
  grid-area: long;
  border: 4px ridge #FEBFDE;
  background-image: url('https://files.catbox.moe/qy7n7r.png');
}

/* LINKS */
.link {
  background-image: linear-gradient(#fcf8e5, #fce3ef);
  text-align: center;
  font-size: 2.3vh;
  margin: 3px;
}

/* BLOG */
.month-tab {
  display: inline-block;
  margin: 4px;
  padding: 6px 10px;
  border: 2px ridge #FEBFDE;
  background-image: linear-gradient(#fcf8e5, #fce3ef);
  font-family: hearts;
  cursor: pointer;
}

.blog-post {
  border: 3px ridge #FEBFDE;
  background-color: white;
  margin: 10px;
  padding: 10px;
}

.blog-title {
  font-family: dunkin;
  color: #f585bd;
}

.blog-date {
  font-size: 1.5vh;
  opacity: 0.7;
}



/* GALLERY */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.gallery-item {
  border: 3px ridge #FEBFDE;
  background-color: white;
  padding: 5px;
}

.gallery-item img {
  width: 100%;
  border-radius: 5px;
}

/* ANIMATION */
@keyframes waveAnimation {
  from { background-position-x: 0; }
  to { background-position-x: 200%; }
}

.post-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.post-nav a {
  border: 2px ridge #FEBFDE;
  background-image: linear-gradient(#fcf8e5, #fce3ef);
  padding: 6px 10px;
  font-family: hearts;
  font-size: 1.8vh;
}

.tags {
  margin-top: 10px;
}

.tag {
  display: inline-block;
  margin: 3px;
  padding: 2px 6px;
  border: 2px ridge #FEBFDE;
  background-color: #fff;
  font-family: hearts;
  font-size: 1.5vh;
}