/* =========================================
   COLOR PALETTE
   ========================================= */

:root {

    --yellow: #ED9530;
    --red: #CC2132;
    --cream: #E9BD96;
    --paper: #FFFDF5;
    --shadow: #B88F62;
    --tealish: #34685C;
    --sexyblu: #1E404F;
    --orang: #E6692A;
    --green: #988A20;
    --finky: #41443A;
    --inky: #151713;

}



/* =========================================
   MAIN PAGE
   ========================================= */


.frontpage {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
     z-index: 0;
}

.frontpage::before {
    content: "";
    position: absolute;
    inset: 0;
    
    background-image: url("images/flyerback2.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    z-index: -2;
    
     filter:
        grayscale(40%)
        contrast(1.55)
        brightness(.78)
        saturate(.5);

    transform: scale(1.03);
}

.frontpage::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            ellipse at 30% 20%,
            transparent 0%,
            rgba(0,0,0,.12) 45%,
            rgba(0,0,0,.35) 100%
        );

    mix-blend-mode: multiply;
    pointer-events: none;
     opacity: .35;
       z-index: -1;
}

    
.bulletinboard {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-image: url("images/corkboard.jpg");
    background-size: cover;
    background-position: center;
    color: #49352D;
}

/* =========================================
   DECORATION
   ========================================= */

.top-decoration {

    text-align: center;

    color: var(--red);

    font-size: 20px;

    letter-spacing: 5px;

    margin-bottom: 20px;

}


/* =========================================
   HEADER
   ========================================= */

.zinetext {
  font-family: Impact, sans-serif;
  font-size: 170px;
  line-height: 0.72;
  letter-spacing: -0.075em;
  text-transform: uppercase;
 

  transform: rotate(-4deg) skewX(-3deg);
  transform-origin: center;

color: #111;
  opacity: 0.95;
  filter: blur(0.4px);
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}


.zine-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.zine-stack span {
  display: block;
}

.fade-away span {
  opacity: calc(1 - var(--i) / var(--total) * 0.6);
  filter: blur(calc(var(--i) / var(--total) * .8px));
  transition: opacity 0.3s, filter 0.3s;
}


.tiny-text {

    font-family: "IBM Plex Mono", monospace;

    font-size: 11px;
    
     transform: rotate(-4deg) skewX(-3deg);
  transform-origin: center;

    letter-spacing: 1px;

    text-transform: uppercase;

}

.scrap-paper {
    position: relative;
    width: 450px;
}

.scrap-paper img {
    width: 100%;
    display: block;
}

.scrap-text {
    position: absolute;
    top: 100px;
    left: 200px;
    width: 210px;
    font-family: "Caveat", cursive;
    font-size: 22px;
    color: #988A20;
}
.scrap-paper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    width: 100%;
}

.scrap-paper img {
    width: 350px;
    height: auto;
}

.scrappaper3 {
    transform: rotate(-5deg);
}

.scrappaper4 {
    transform: rotate(5deg);
}

.post-it {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
}

.post-it img {
    width: 50%;
    height: auto;
    display: block;
    transform: rotate(-5deg);
}

.post-it-text {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 60%;

    text-align: center;

    font-family: "Patrick Hand";
    font-size: 18px;
}

.letter-stuff{
    display: flex;
    justify-content: center;
    gap: 5px;
}

.letter-stuff img {
    width: 60px;
    height: auto;
}
    
  .letter-stuff img:nth-child(odd) {
    transform: rotate(-3deg);
}

.letter-stuff img:nth-child(even) {
    transform: rotate(3deg);
}
    .poemsnsuch{
    display: flex;
    justify-content: center;
    gap: 5px;
}

.poemsnsuch img {
    width: 60px;
    height: auto;
}
    
  .poemsnsuch img:nth-child(odd) {
    transform: rotate(-3deg);
}

.poemsnsuch img:nth-child(even) {
    transform: rotate(3deg);
}
      .paperletters{
    display: flex;
    justify-content: center;
    gap: 15px;
    transform: translate(110px, 60px);
}

.paperletters img {
    width: 60px;
    height: 60px;
}
    
  .paperletters img:nth-child(odd) {
    transform: rotate(-3deg);
}

.paperletters img:nth-child(even) {
    transform: rotate(3deg);
}
   
    .paperletters img:nth-child(4) {
    margin-left: 35px;
}
.dividerclear {
    width: 1000px; 
    margin: 0 auto; 
    margin-top: 60px;
    margin-right: 95px;
}   

.dividerclear img {
    width: 100%;
    display: block;
    opacity: .3;
}

.emailtxt {
  font-family: "Lora";
  font-size: 12px;
  position: absolute;
  top: 50%;
  left: 56.5%;
  transform: translate(-50%, -50%) rotate(-3deg);
  
}
  
.skletters{
    display: flex;
    justify-content: center;
    gap: 10px;
}

.skletters img {
    width: 60px;
    height: 80px;
}
    
  .skletters img:nth-child(odd) {
    transform: rotate(-3deg);
}

.skletters img:nth-child(even) {
    transform: rotate(3deg);
}

.frame {
    position: relative;
    width: 100%;
}

.frame img {
    width: 100%;
    display: block;
}


.subtitle {

    color: var(--dark-red);

    font-family: "Caveat", cursive;

    font-size: 25px;

}


/* =========================================
   NAVIGATION
   ========================================= */

.navigation {

    display: flex;

    justify-content: center;

    gap: 35px;

    padding: 15px 0;

    border-top: 1px dashed var(--red);

    border-bottom: 1px dashed var(--red);

}


.navigation a {

    color: var(--red);

    font-family: "IBM Plex Mono", monospace;

    font-size: 13px;

    text-decoration: none;

    text-transform: lowercase;

}


.navigation a:hover {

    color: var(--brown);

    text-decoration: underline;

}



 /* =========================================
   MUSIC PAGE
========================================= */

.music-page {
  
  
  width: 90%;
  max-width: 1100px;
  margin: 50px auto;
}
.music-page-body {
  background-color: transparent;
  background-image:
  linear-gradient(
   rgba(255, 110, 50, 0.12),
    rgba(255, 110, 50, 0.12)
  ),
  
  url("images/bottlecaps.jpg");
  
  background-repeat: repeat;
  background-size: auto;
  background-position: top left;
  background-attachment: fixed;
}


/* =========================================
   SECTION HEADERS
========================================= */

.music-page h1 {
  font-size: 18px;
  letter-spacing: 3px;
  margin-bottom: 25px;
}


/* =========================================
   =========================================
   RECORD COLLECTION
   =========================================
========================================= */

.collection {
  margin-top: 60px;
}


/* =========================================
   COLLECTION SHELF
========================================= */

/* =========================================
   HORIZONTAL RECORD SHELF
========================================= */

.record-shelf-viewport {

  width: 100%;

  overflow-x: auto;
  overflow-y: hidden;

  box-sizing: border-box;

}


/* =========================================
   SHELF ITSELF
========================================= */

.record-shelf {
  position: relative;

  width: max-content;
  min-width: 100%;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: flex-start;

  height: 310px;

  padding: 50px 60px 30px;
  box-sizing: border-box;

  background-image:
  linear-gradient(
    rgba(255, 240, 210, 0.10),
    rgba(255, 240, 210, 0.10)
  ),
  url("images/woodbackgroundone.jpg");
   
  

  background-size: auto 100%;
  background-position: center;
  background-repeat: repeat-x;

  box-shadow:
    0 18px 25px rgba(0,0,0,0.65),
    0 35px 45px rgba(0,0,0,0.35);

  overflow: visible;
}
/* =========================================
   REALISTIC COLLECTION SHELF LIP
========================================= */

.record-shelf::after {

  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 30px;

  background-image:
    linear-gradient(
    rgba(255, 240, 210, 0.10),
    rgba(255, 240, 210, 0.10)
  ),
  url("images/woodbackgroundone.jpg");
   

  background-size: 100% auto;

  background-position:
    center bottom;

  border-top:
    3px solid rgba(255,255,255,0.12);

  box-shadow:
    0 -8px 12px rgba(0,0,0,0.25),
    inset 0 3px 5px rgba(255,255,255,0.08),
    inset 0 -8px 10px rgba(0,0,0,0.25);

  z-index: 10;

  pointer-events: none;
}


/* Dark underside */

.record-shelf::before {

  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 12px;

  background:
    rgba(40,20,10,0.65);

  box-shadow:
    inset 0 3px 4px rgba(0,0,0,0.3);

  z-index: 11;

  pointer-events: none;
}


/* =========================================
   RECORD ITEM
========================================= */

.record-item {

  position: relative;

  width: 190px;
  height: 210px;

  flex-shrink: 0;

  margin-right: -35px;

  cursor: pointer;

  filter:
    drop-shadow(
      0 10px 7px rgba(0,0,0,0.28)
    );

  transition:
    transform 0.25s ease;
}


/* Slightly imperfect positioning */

.record-item:nth-child(odd) {
  transform: rotate(-2deg);
}

.record-item:nth-child(even) {
  transform: rotate(2deg);
}


/* =========================================
   VINYL RECORD
========================================= */

.record-item .record {

  position: absolute;

  width: 175px;
  height: 175px;

  top: 5px;
  left: 8px;

  border-radius: 50%;

  background: #111;

  z-index: 1;

  box-shadow:
    2px 4px 8px rgba(0,0,0,0.35);

  transition:
    transform 0.4s ease;
}


/* =========================================
   VINYL GROOVES
========================================= */

.record-item .record::before {

  content: "";

  position: absolute;

  inset: 12px;

  border-radius: 50%;

  border:
    1px solid rgba(255,255,255,0.12);

  box-shadow:
    0 0 0 8px rgba(255,255,255,0.03),
    0 0 0 16px rgba(255,255,255,0.03),
    0 0 0 24px rgba(255,255,255,0.03);
}


/* =========================================
   RECORD CENTER LABEL
========================================= */

.record-item .record-label {

  position: absolute;

  width: 55px;
  height: 55px;

  top: 50%;
  left: 50%;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background: #ddd;

  z-index: 2;
}


/* Center hole */

.record-item .record-label::after {

  content: "";

  position: absolute;

  width: 8px;
  height: 8px;

  top: 50%;
  left: 50%;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background: #111;
}


/* =========================================
   RECORD SLEEVE
========================================= */

.record-item .record-sleeve {

  position: absolute;

  width: 180px;
  height: 180px;

  left: 0;
  bottom: 0;

  z-index: 3;

  background: #ddd;

  box-shadow:
    3px 5px 8px rgba(0,0,0,0.35);

  transition:
    transform 0.35s ease;
}


/* Playlist artwork */

.record-item .record-sleeve img {

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  
  filter:
    brightness(0.94)
    contrast(0.95)
    saturate(0.88)
    sepia(0.06);

}


/* =========================================
   RECORD HOVER
========================================= */

.record-item:hover .record {

  transform:
    translateY(-12px)
    rotate(-3deg);

  z-index: 2;
}


.record-item:hover .record-sleeve {

  transform:
    translateY(-8px);

  z-index: 4;
}


/* =========================================
   HOVER TITLE
========================================= */

.record-item .hover-title {

  position: absolute;

  bottom: calc(100% + 15px);

  left: 50%;

  transform:
    translateX(-50%)
    translateY(5px);

  padding: 6px 10px;

  white-space: nowrap;

  background: white;

  border: 1px solid black;

  font-size: 11px;

  letter-spacing: 1px;

  opacity: 0;

  pointer-events: none;

  z-index: 50;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}


.record-item:hover .hover-title {

  opacity: 1;

  transform:
    translateX(-50%)
    translateY(0);
}


/* =========================================
   =========================================
   NOW PLAYING
   =========================================
========================================= */

.now-playing-section {

  margin-bottom: 80px;
}



/* =========================================
   NOW PLAYING SHELF
========================================= */

.now-playing-shelf {
  position: relative;
  width: 100%;
  height: 300px;
margin-top:200px;
  overflow: hidden;
  
 background-image:
  linear-gradient(
    rgba(255, 240, 210, 0.10),
    rgba(255, 240, 210, 0.10)
  ),
  url("images/woodbackgroundone.jpg");
   

  background-size: cover;
  background-position: center;

  box-shadow:
  0 18px 25px rgba(0, 0, 0, 0.65),
  0 35px 45px rgba(0, 0, 0, 0.35);
}

.shelf-wrapper {
  position: relative;
  margin-bottom: 70px;

  filter:
    drop-shadow(
      0 20px 18px rgba(0,0,0,0.65)
    );
    
}

.funsign {
  position: absolute;
  left: -10px;
  top: -45px;
  width: 200px;
  z-index:10;
 filter: drop-shadow(-20px -20px 3px rgba(0, 0, 0, 0.6));
opacity: .85;
filter:
    brightness(0.94)
    contrast(0.95)
    saturate(0.88)
    sepia(0.06);
}


.speaker {
  position: absolute;
  z-index: 1;

  width: 200px;

  top: 65px;
  left: 180px;
  
   transform: perspective(200px) rotateX(8deg) rotateY(1deg);
transform-origin: bottom center;
  
  opacity: .8;
  
  filter: drop-shadow(-20px -10px 3px rgba(0, 0, 0, 0.6));
    brightness(0.94)
    contrast(0.95)
    saturate(0.88)
    sepia(0.06);
}


.twentyfour {
  position: absolute;
  z-index: 1;

  width: 250px;

  top: 70px;
  right: 60px;
  
  opacity: .7;
  
   transform: perspective(400px) rotateX(8deg);
transform-origin: bottom center;
  
  filter: drop-shadow(-20px -10px 2px rgba(0, 0, 0, 0.6));
  filter:
    brightness(0.94)
    contrast(0.95)
    saturate(0.88)
    sepia(0.06);
}


/* =========================================
   REALISTIC WOOD SHELF LIP
========================================= */

.now-playing-shelf::after {

  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 38px;

 background-image:
  linear-gradient(
    rgba(255, 240, 210, 0.10),
    rgba(255, 240, 210, 0.10)
  ),
  url("images/woodbackgroundone.jpg");

  background-size: 100% auto;

  background-position:
    center bottom;

  border-top:
    3px solid rgba(255,255,255,0.12);

  box-shadow:
    0 -8px 12px rgba(0,0,0,0.25),
    inset 0 3px 5px rgba(255,255,255,0.08),
    inset 0 -8px 10px rgba(0,0,0,0.25);

  z-index: 5;

  pointer-events: none;
}

.now-playing-shelf::before {

  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 12px;

 
  background:
    rgba(40,20,10,0.65);

  box-shadow:
    inset 0 3px 4px rgba(0,0,0,0.3);

  z-index: 6;

  pointer-events: none;
}

/* =========================================
   NOW PLAYING ITEM
========================================= */

.now-playing-item {

  filter:
    drop-shadow(0 12px 8px rgba(0,0,0,0.35));

  position: absolute;

  width: 190px;
  height: 210px;

  left: 50%;
  bottom: 25px;

  transform:
    translateX(-50%);

  z-index: 1;

  cursor: pointer;
}


/* =========================================
   NOW PLAYING VINYL
========================================= */

.now-playing-item .record {

  position: absolute;

  width: 175px;
  height: 175px;

  top: 5px;
  left: 8px;

  border-radius: 50%;

  background: #111;

  z-index: 1;

  box-shadow:
    2px 4px 8px rgba(0,0,0,0.35);

  transition:
    transform 0.4s ease;
}


/* =========================================
   NOW PLAYING VINYL GROOVES
========================================= */

.now-playing-item .record::before {

  content: "";

  position: absolute;

  inset: 12px;

  border-radius: 50%;

  border:
    1px solid rgba(255,255,255,0.12);

  box-shadow:
    0 0 0 8px rgba(255,255,255,0.03),
    0 0 0 16px rgba(255,255,255,0.03),
    0 0 0 24px rgba(255,255,255,0.03);
}


/* =========================================
   NOW PLAYING LABEL
========================================= */

.now-playing-item .record-label {

  position: absolute;

  width: 55px;
  height: 55px;

  top: 50%;
  left: 50%;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background: #ddd;

  z-index: 2;
}


.now-playing-item .record-label::after {

  content: "";

  position: absolute;

  width: 8px;
  height: 8px;

  top: 50%;
  left: 50%;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background: #111;
}


/* =========================================
   NOW PLAYING SLEEVE
========================================= */

.now-playing-sleeve {

  position: absolute;

  width: 180px;
  height: 180px;

  left: 0;
  bottom: 0;

  z-index: 3;

  box-shadow:
    3px 5px 8px rgba(0,0,0,0.35);

  transition:
    transform 0.35s ease;
}


.now-playing-sleeve img {

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  
  filter:
    brightness(0.94)
    contrast(0.95)
    saturate(0.88)
    sepia(0.2);

}



/* =========================================
   NOW PLAYING HOVER
========================================= */

.now-playing-item:hover .record {

  transform:
    translateY(-12px)
    rotate(-3deg);
}


.now-playing-item:hover .now-playing-sleeve {

  transform:
    translateY(-8px);
}


/* =========================================
   NOW PLAYING DATE / TEXT
========================================= */

.now-playing-text {

  margin-top: 10px;

  font-size: 11px;

  letter-spacing: 2px;
}



/* =========================================
   =========================================
   EXPANDED RECORD
   =========================================
========================================= */

.record-overlay {

  position: fixed;

  inset: 0;

  display: flex;

  justify-content: center;
  align-items: center;

  background:
    rgba(0,0,0,0.65);

  opacity: 0;

  visibility: hidden;

  transition:
    opacity 0.3s ease;

  z-index: 999;
}


.record-overlay.active {

  opacity: 1;

  visibility: visible;
}


/* =========================================
   EXPANDED CONTENT
========================================= */

.expanded-record {

  position: relative;

  width: min(850px, 90vw);

  padding: 50px;

  box-sizing: border-box;

  display: flex;

  gap: 50px;

  align-items: center;

  background: #eee;

  border: 2px solid black;

  transform:
    scale(0.7)
    translateY(100px);

  opacity: 0;

  transition:
    transform 0.5s cubic-bezier(.2,.8,.2,1),
    opacity 0.3s ease;
}


.record-overlay.active .expanded-record {

  transform:
    scale(1)
    translateY(0);

  opacity: 1;
}


/* =========================================
   BIG VINYL
========================================= */

.big-record {

  position: relative;

  width: 400px;
  height: 400px;

  flex-shrink: 0;

  border-radius: 50%;

  background: #111;

  box-shadow:
    10px 15px 25px rgba(0,0,0,0.4);
}


/* =========================================
   BIG RECORD COVER
========================================= */

.record-cover {

  position: absolute;

  width: 55%;
  height: 55%;

  top: 50%;
  left: 50%;

  transform:
    translate(-50%, -50%);

  object-fit: cover;

  border-radius: 50%;
}


/* =========================================
   EXPANDED INFORMATION
========================================= */

.record-information {

  max-width: 300px;
}


.expanded-title {

  font-size: 28px;

  margin:
    0 0 10px;
}


.expanded-artist {

  font-size: 14px;

  margin-bottom: 25px;
}


.expanded-description {

  font-size: 14px;

  line-height: 1.6;

  margin-bottom: 30px;
}


/* =========================================
   SPOTIFY LINK
========================================= */

.spotify-link {

  display: inline-block;

  padding: 10px 14px;

  border: 1px solid black;

  color: black;

  text-decoration: none;

  font-size: 11px;

  letter-spacing: 1px;
}


.spotify-link:hover {

  background: black;

  color: white;
}


/* =========================================
   CLOSE BUTTON
========================================= */

.close-record {

  position: absolute;

  top: 10px;
  right: 15px;

  border: 0;

  background: transparent;

  font-size: 30px;

  cursor: pointer;
}



  .record-shelf {

    overflow-x: auto;

    justify-content: center;

    padding-left: 20px;
  }


  .record-item {

    margin-right: -35px;
  }


  .expanded-record {

    flex-direction: column;

    padding: 30px;

    gap: 25px;

    max-height: 90vh;

    overflow-y: auto;
  }


  .big-record {

    width: 280px;
    height: 280px;
  }

}

/* =========================================
   RECORD SHELF VIEWPORT
========================================= */

.record-shelf-viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

/* =========================================
   WOODEN RECORD SHELF SCROLL TRACK
========================================= */

/* Chrome / Safari / Edge */

.record-shelf-viewport::-webkit-scrollbar {
  height: 18px;
}


/* Wooden track */

.record-shelf-viewport::-webkit-scrollbar-track {

  background-image:
    url("images/woodbackgroundone.jpg");

  background-size: cover;

  border-top:
    2px solid rgba(255,255,255,0.15);

  border-bottom:
    2px solid rgba(0,0,0,0.45);

  box-shadow:
    inset 0 3px 5px rgba(0,0,0,0.35),
    inset 0 -3px 5px rgba(255,255,255,0.08);
}


/* The draggable wooden piece */

.record-shelf-viewport::-webkit-scrollbar-thumb {

  background-image:
    url("images/woodbackgroundone.jpg");

  background-size: 250px auto;

  border-radius: 2px;

  border:
    2px solid rgba(60,30,15,0.8);

  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.12),
    inset 0 -3px 4px rgba(0,0,0,0.35),
    0 2px 4px rgba(0,0,0,0.4);
}


/* Hovering the wooden handle */

.record-shelf-viewport::-webkit-scrollbar-thumb:hover {

  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.18),
    inset 0 -3px 4px rgba(0,0,0,0.45),
    0 3px 6px rgba(0,0,0,0.5);
}


/* Firefox */

.record-shelf-viewport {

  scrollbar-width: auto;

  scrollbar-color:
    #70401f
    #3f2718;
}


.blogvibes .post-body {
    font-family: "Lora", serif;
    font-size: 15px;
    line-height: 32px;
}

.blogvibes .post-body p {
    margin: 0 0 32px 0;
}

.blogvibes h1 {
    font-family: "Lora", serif;
    font-size: 25px;
    color: #970A12;
}

.blogvibes .post-date {
    font-family: "Lora", serif;
    font-size: 10px;
}

.writing-section {

    margin: 50px 0;

}


.section-heading {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    margin-bottom: 35px;

}


.section-heading h2 {

    color: var(--red);

    font-family: "DM Serif Display", serif;

    font-size: 36px;

    font-weight: normal;

}


.section-heading span {

    color: var(--red);

}


.writing-card {

    position: relative;

    margin: 25px auto;

    padding: 25px 30px;

    max-width: 650px;

     background-image: url("images/background3.avif");

}


.writing-card:nth-child(odd) {
    transform: rotate(-.7deg);
}

.writing-card:nth-child(even) {
    transform: rotate(.7deg);
}


.date {

    margin: 0;

    color: #8C7770;

    font-family: "IBM Plex Mono", monospace;

    font-size: 10px;

}


.writing-card h3 {

    margin: 5px 0 10px;

    font-family: "DM Serif Display", serif;

    font-size: 28px;

    font-weight: normal;

}


.writing-card h3 a {

    color: var(--red);

    text-decoration: none;

}


.writing-card h3 a:hover {

    text-decoration: underline;

}


.read-more {

    color: var(--red);

    font-family: "Caveat", cursive;

    font-size: 20px;

}



/* =========================================
   CURRENTLY INTO
   ========================================= */

.currently {

    display: flex;

    justify-content: space-between;

    gap: 50px;

    margin: 80px 20px 50px;

    padding: 35px;

    background: var(--yellow);

    border: 2px solid var(--red);

    transform: rotate(-1deg);

}


.currently h2 {

    margin-top: 0;

    color: var(--red);

    font-family: "DM Serif Display", serif;

}


.currently-right {

    text-align: right;

}


.big {

    font-size: 32px;

}


.currently a {

    color: var(--red);

}


/* =========================================
   FOOTER
   ========================================= */

footer {

    margin-top: 70px;

    padding-top: 25px;

    border-top: 1px dashed var(--red);

    text-align: center;

}


.footer-decoration {

    color: var(--red);

    font-size: 22px;

    margin-bottom: 20px;

}


    .page {

        padding: 25px 20px;

        margin: 20px auto;

    }


    .navigation {

        gap: 15px;

        flex-wrap: wrap;

    }


    .intro {

        display: block;

        margin: 40px 5px;

    }


    .intro-note {

        width: 100%;

    }


    .little-note {

        width: 80%;

        margin: 35px auto;

    }


    .collage {

        height: 750px;

    }


    .polaroid {

        left: 5%;

    }


    .quote-card {

        right: 5%;

        top: 260px;

    }


    .sticker {

        left: 10%;

        bottom: 160px;

    }


    .paper-scrap {

        right: 5%;

        bottom: 0;

    }


    .currently {

        display: block;

    }


    .currently-right {

        text-align: left;

        margin-top: 30px;

    }
    
   .blogvibes {
    max-width: 720px;
    margin: 70px auto;
    padding: 70px 75px 80px 90px;

    background-color: #fffdf3;

    box-shadow: 4px 7px 12px rgba(60, 45, 35, 0.20);

    transform: rotate(-0.4deg);

    color: #253746;
}


.archivebody {
   margin: 0;

  background:
    linear-gradient(
      rgba(210, 205, 185, .18),
      rgba(210, 205, 185, .18)
    ),
    url("images/archive.jpeg");

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

  background-repeat: no-repeat;

}
  
 /* =========================================
   BLOG FILE CABINET
========================================= */

.blog-archive {

  position: relative;

  width: 100%;

  min-height: 850px;

  display: flex;

  justify-content: center;

  align-items: flex-end;

  overflow: visible;

}


/* =========================================
   CABINET
========================================= */

.file-cabinet {

  position: relative;

  width: 330px;

  height: 500px;

  z-index: 20;

  cursor: pointer;
  
  transform: scale(1.1);
transform-origin: bottom center;

}


/* =========================================
   CABINET BODY
========================================= */

/* =========================================
   CABINET BODY
========================================= */

.cabinet-body {

  position: absolute;

  left: -30px;
  bottom: 40px;

  width: 330px;
  height: 430px;

  border-radius: 8px;

  overflow: hidden;
  
  transform:
    perspective(600px)
    rotateY(-1deg)
    rotateX(0.5deg);

  background:

    /* Main metal color */

    linear-gradient(
      90deg,
      #4f514e 0%,
      #777a75 12%,
      #858781 28%,
      #747773 50%,
      #666965 72%,
      #4c4e4b 100%
    ),

    /* Subtle vertical variation */

    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.025) 0px,
      rgba(255,255,255,.025) 2px,
      transparent 2px,
      transparent 9px
    );

  /* Physical cabinet shadow */

  box-shadow:

    inset 8px 0 12px
      rgba(255,255,255,.08),

    inset -12px 0 18px
      rgba(0,0,0,.22),

    inset 0 -12px 20px
      rgba(0,0,0,.16),

    12px 15px 0
      rgba(0,0,0,.08),

    0 25px 35px
      rgba(0,0,0,.28);
      
    
}


/* =========================================
   METAL TEXTURE
========================================= */

.cabinet-body::before {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    url("images/old-metal.jpeg");

  background-size: 330px 430px;

  background-position: center;

  background-repeat: no-repeat;

  opacity: .18;

}


/* =========================================
   SUBTLE CABINET DETAILS
========================================= */

.cabinet-body::after {

  content: "•                         •";

  position: absolute;

  top: 8px;

  left: 50%;

  transform:
    translateX(-50%);

  width: 280px;

  color:
    rgba(35,36,33,.7);

  font-family:
    Arial,
    sans-serif;

  font-size: 14px;

  letter-spacing: 245px;

  pointer-events: none;

}

/* =========================================
   DRAWER
========================================= */

.blog-drawer {

  position: absolute;

  left: 15px;
  top: 15px;

  width: 300px;
  height: 175px;

  z-index: 50;
  

  transition:

    transform
    1s
    cubic-bezier(.2,.85,.2,1);
    
   box-shadow:
    inset 0 10px 18px rgba(0,0,0,.25),
    inset 0 -5px 10px rgba(0,0,0,.15);

}


/* =========================================
   DRAWER INTERIOR

   This is the dark opening behind
   the folders.
========================================= */

.drawer-interior {

  position: absolute;

  left: 0;
  top: 0;

  width: 300px;
  height: 175px;

  background:

    linear-gradient(
      180deg,
      #292b29 0%,
      #363835 45%,
      #202220 100%
    );

  border:
    2px solid #30322f;

  border-radius: 3px;

  box-shadow:

    inset 0 10px 18px
      rgba(0,0,0,.55),

    inset 0 -12px 20px
      rgba(0,0,0,.35);

}


/* =========================================
   FOLDER STACK

   THIS is the important part.

   It sits inside the drawer opening.
========================================= */

.folder-stack {

  position: absolute;

  left: -10px;

  top: -80px;

  width: 280px;

  height: 125px;

  z-index: 60;

}


/* =========================================
   FOLDERS
========================================= */

.blog-file {

  position: absolute;

  display: block;

  width: 125px;
  height: 170px;

  text-decoration: none;

  opacity: 0;

  pointer-events: auto;

}


/* =========================================
   FOLDER BODY
========================================= */

.folder-body {

  position: absolute;

  left: 0;
  top: 0;

   width: 125px;
  height: 170px;

  background:

    linear-gradient(
      135deg,
      #e5d19a,
      #c6b171
    );

  border:
    1px solid #9c8855;

  border-radius:
    3px 3px 0 0;
    
    box-shadow:

  inset 0 0 8px
    rgba(70,50,15,.15),

  3px 4px 5px
    rgba(0,0,0,.22);

}

.folder-body::after {

  content: "";

  position: absolute;

  left: 2px;
  right: 2px;

  bottom: 0;

  height: 4px;

  background:

    repeating-linear-gradient(
      180deg,
      rgba(90,70,30,.18) 0px,
      rgba(90,70,30,.18) 1px,
      transparent 1px,
      transparent 2px
    );

  opacity: .7;

}

.file-1 .folder-body {
  background:
    linear-gradient(
      135deg,
      #e3cf97,
      #c5af6e
    );
}


.file-2 .folder-body {
  background:
    linear-gradient(
      135deg,
      #d9c58e,
      #bba568
    );
}


.file-3 .folder-body {
  background:
    linear-gradient(
      135deg,
      #e7d39d,
      #c9b575
    );
}


.file-4 .folder-body {
  background:
    linear-gradient(
      135deg,
      #d6c28a,
      #b8a163
    );
}


.file-5 .folder-body {
  background:
    linear-gradient(
      135deg,
      #e1cc94,
      #c0a96d
    );
}


.file-6 .folder-body {
  background:
    linear-gradient(
      135deg,
      #dbc68e,
      #bfa66b
    );
}


/* =========================================
   FOLDER TAB
========================================= */

.file-tab {

  position: absolute;

  left: 0;
  top: 0;

  min-width: 75px;

  height: 32px;

  padding:
    0 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    #dfca8d;

  border:
    1px solid #9b8754;

  border-bottom:
    1px solid #9b8754;

  border-radius:
    4px 4px 0 0;

  font-family:
    "Courier New",
    monospace;

  font-size: 9px;
  
  font-weight: bold;

text-shadow:
  .3px .3px 0
  rgba(0,0,0,.25);

  letter-spacing: 1px;

  color:
  #443b29;

  white-space:
    nowrap;

  z-index: 5;

}


/* =========================================
   MESSY POSITIONS

   The tops/tabs are all at slightly
   different heights.
========================================= */

/* =========================================
   ORDERLY FILE CABINET STACK
========================================= */

.file-1 {

  left: 8px;
  top: 38px;

  transform:
    rotate(-1deg);

  z-index: 6;

}


.file-2 {

  left: 45px;
  top: 10px;

  transform:
    rotate(.5deg);

  z-index: 5;

}


.file-3 {

  left: 95px;
  top: 30px;

  transform:
    rotate(-.5deg);

  z-index: 7;

}


.file-4 {

  left: 119px;
  top: -10px;

  transform:
    rotate(.8deg);

  z-index: 4;

}


.file-5 {

  left: 156px;
  top: 50px;

  transform:
    rotate(-.5deg);

  z-index: 8;

}


.file-6 {

  left: 193px;
  top: 25px;

  transform:
    rotate(.5deg);

  z-index: 5;

}

.file-1 .file-tab {
  left: 3px;
}


.file-2 .file-tab {
  left: 12px;
}


.file-3 .file-tab {
  left: -2px;
}


.file-4 .file-tab {
  left: 17px;
}


.file-5 .file-tab {
  left: 5px;
}


.file-6 .file-tab {
  left: -4px;
}


/* =========================================
   DRAWER FRONT

   IMPORTANT:
   It is layered ABOVE the folder bodies
   but the folders extend above it.
========================================= */

.drawer-front {

  position: absolute;

  left: -7px;
  top: 0;

  width: 314px;
  height: 175px;

  background:
  url("images/drawermetal.jpeg");

background-size: cover;
background-position: center;
background-repeat: no-repeat;

filter:
    brightness(.75)
    contrast(1.15)
    saturate(.65);

  border:
    2px solid #555754;

  border-radius: 4px;

  z-index: 100;

  box-shadow:

    0 8px 15px
    rgba(0,0,0,.25);
    
    box-shadow:

  inset 0 2px 2px
    rgba(255,255,255,.18),

  inset 0 -5px 8px
    rgba(0,0,0,.18),

  0 8px 15px
    rgba(0,0,0,.28);

}

.drawer-front::after {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  border-radius: 4px;

  background:

    linear-gradient(
      90deg,
      rgba(0,0,0,.15),
      transparent 7%,
      transparent 93%,
      rgba(0,0,0,.18)
    ),

    linear-gradient(
      180deg,
      rgba(255,255,255,.1),
      transparent 10%,
      transparent 90%,
      rgba(0,0,0,.18)
    );

}

/* =========================================
   BLOG LABEL
========================================= */

.drawer-label {

  position: absolute;

  top: 45px;
  left: 50%;

  transform:
    translateX(-50%);

  width: 125px;
  height: 38px;

  display: flex;

  align-items: center;
  justify-content: center;

  background:

  linear-gradient(
    180deg,
    #e2dfd1,
    #c5c1b3
  );

 border:
  2px solid #555753;
  
  box-shadow:

  inset 0 2px 2px
    rgba(255,255,255,.5),

  inset 0 -2px 4px
    rgba(0,0,0,.2),

  2px 3px 4px
    rgba(0,0,0,.2);

  font-family:
    "Courier New",
    monospace;

  font-size: 11px;
  
  font-weight: bold;

  letter-spacing: 2px;

  color:
    #292929;

}


/* =========================================
   HANDLE
========================================= */

.drawer-handle {

  position: absolute;

  left: 50%;
  bottom: 35px;

  transform:
    translateX(-50%);

  width: 75px;
  height: 13px;

  border-radius: 10px;

 background:

  linear-gradient(
    180deg,
    #686b67,
    #3f423f 50%,
    #292b29
  );

  border:
    2px solid #373936;

 box-shadow:

  inset 0 2px 2px
    rgba(255,255,255,.25),

  inset 0 -3px 4px
    rgba(0,0,0,.4),

  0 4px 5px
    rgba(0,0,0,.3);

}


/* =========================================
   OPEN DRAWER
========================================= */

.file-cabinet.open .blog-drawer {

  transform:
    translateY(100px)
    scaleY(.95);

}


/* =========================================
   FOLDER ANIMATIONS
========================================= */

.file-cabinet.open .file-1 {

  animation:
    folderOne
    .6s
    .15s
    forwards
    cubic-bezier(.2,.85,.2,1);

}


.file-cabinet.open .file-2 {

  animation:
    folderTwo
    .6s
    .35s
    forwards
    cubic-bezier(.2,.85,.2,1);

}


.file-cabinet.open .file-3 {

  animation:
    folderThree
    .6s
    .55s
    forwards
    cubic-bezier(.2,.85,.2,1);

}


.file-cabinet.open .file-4 {

  animation:
    folderFour
    .6s
    .75s
    forwards
    cubic-bezier(.2,.85,.2,1);

}


.file-cabinet.open .file-5 {

  animation:
    folderFive
    .6s
    .95s
    forwards
    cubic-bezier(.2,.85,.2,1);

}


.file-cabinet.open .file-6 {

  animation:
    folderSix
    .6s
    1.15s
    forwards
    cubic-bezier(.2,.85,.2,1);

}


/* =========================================
   ANIMATION KEYFRAMES
========================================= */

@keyframes folderOne {

  from {

    opacity: 0;

    transform:
      translateY(35px)
      rotate(-6deg);

  }

  to {

    opacity: 1;

    transform:
      translateY(0)
      rotate(-6deg);

  }

}


@keyframes folderTwo {

  from {

    opacity: 0;

    transform:
      translateY(35px)
      rotate(5deg);

  }

  to {

    opacity: 1;

    transform:
      translateY(0)
      rotate(5deg);

  }

}


@keyframes folderThree {

  from {

    opacity: 0;

    transform:
      translateY(40px)
      rotate(-8deg);

  }

  to {

    opacity: 1;

    transform:
      translateY(0)
      rotate(-8deg);

  }

}


@keyframes folderFour {

  from {

    opacity: 0;

    transform:
      translateY(30px)
      rotate(8deg);

  }

  to {

    opacity: 1;

    transform:
      translateY(0)
      rotate(8deg);

  }

}


@keyframes folderFive {

  from {

    opacity: 0;

    transform:
      translateY(30px)
      rotate(-3deg);

  }

  to {

    opacity: 1;

    transform:
      translateY(0)
      rotate(-3deg);

  }

}


@keyframes folderSix {

  from {

    opacity: 0;

    transform:
      translateY(35px)
      rotate(5deg);

  }

  to {

    opacity: 1;

    transform:
      translateY(0)
      rotate(5deg);

  }

}


/* =========================================
   FOLDER HOVER
========================================= */

.blog-file {

  transition:
    filter .2s ease;

}






/* =========================================
   HOVER TITLE
========================================= */

.archive-hover-title {

  position: fixed;

  left: 50%;
  top: 80px;

  transform:
    translateX(-50%)
    translateY(8px);

  z-index: 99999;

  padding:
    8px 16px;

  background:
    #f1e5c4;

  border:
    1px solid #8f805e;

  box-shadow:
    4px 4px 0
    rgba(0,0,0,.18);

  font-family:
    "Courier New",
    monospace;

  font-size:
    12px;

  font-weight:
    bold;

  letter-spacing:
    1px;

  color:
    #443b29;

  white-space:
    nowrap;

  opacity: 0;

  pointer-events:
    none;

  transition:
    opacity .2s ease,
    transform .2s ease;

}


/* Visible state */

.archive-hover-title.visible {

  opacity: 1;

  transform:
    translateX(-50%)
    translateY(0);

}

/* =========================================
   CLOSED
========================================= */

.file-cabinet:not(.open)
.blog-file {

  opacity: 0;

  pointer-events: none;

  animation: none;

}

/* =========================================
   FOLDER HOVER — INDIVIDUAL MOVEMENT
========================================= */

.blog-file {

  transition:
    filter .18s ease,
    margin-top .18s ease;

}


/* ALONENESS */

.file-1:hover {

  margin-top: -9px;

  filter:
    brightness(1.08)
    drop-shadow(
      5px 8px 5px
      rgba(0,0,0,.32)
    );

}


/* FAMILY */

.file-2:hover {

  margin-top: -13px;

  filter:
    brightness(1.08)
    drop-shadow(
      5px 8px 5px
      rgba(0,0,0,.32)
    );

}


/* DEAD THINGS */

.file-3:hover {

  margin-top: -8px;

  filter:
    brightness(1.08)
    drop-shadow(
      5px 8px 5px
      rgba(0,0,0,.32)
    );

}


/* TREATMENT */

.file-4:hover {

  margin-top: -12px;

  filter:
    brightness(1.08)
    drop-shadow(
      5px 8px 5px
      rgba(0,0,0,.32)
    );

}


/* RELATIONSHIPS */

.file-5:hover {

  margin-top: -10px;

  filter:
    brightness(1.08)
    drop-shadow(
      5px 8px 5px
      rgba(0,0,0,.32)
    );

}


/* MISC */

.file-6:hover {

  margin-top: -7px;

  filter:
    brightness(1.08)
    drop-shadow(
      5px 8px 5px
      rgba(0,0,0,.32)
    );

}


/* =========================================
   CABINET FEET
========================================= */

.cabinet-feet {

  position: absolute;

  bottom: 8px;

  width: 55px;
  height: 28px;

  background:
    linear-gradient(
      180deg,
      #555853 0%,
      #3f423e 35%,
      #292b28 100%

    );
  

  border-radius:
    2px 2px 8px 8px;

  clip-path:
    polygon(
      5% 0,
      95% 0,
      78% 100%,
      22% 100%
    );

  box-shadow:

    inset 0 2px 2px
      rgba(255,255,255,.12),

    inset 0 -4px 5px
      rgba(0,0,0,.35);
      
      box-shadow:

  0 14px 18px
    rgba(0,0,0,.28),

  0 28px 35px
    rgba(0,0,0,.16);

}


/* =========================================
   CONTACT SHADOW
========================================= */

.cabinet-feet::after {

  content: "";

  position: absolute;

  bottom: -5px;

  left: 50%;

  transform:
    translateX(-50%);

  width: 45px;

  height: 7px;

  border-radius: 50%;

  background:
    rgba(25,25,22,.5);

  filter:
    blur(3px);

  z-index: -1;

}

.cabinet-feet.left {
  left:-25px;
}

.cabinet-feet.right {
  right: 30px;
}

/* =========================================
   FOLDER HOVER
========================================= */

.blog-file:hover {

  filter:
    brightness(1.08)
    drop-shadow(
      5px 8px 5px
      rgba(0,0,0,.35)
    );

}


/* Each folder lifts a slightly
   different amount */

.file-1:hover {
  margin-top: -10px;
}

.file-2:hover {
  margin-top: -13px;
}

.file-3:hover {
  margin-top: -9px;
}

.file-4:hover {
  margin-top: -12px;
}

.file-5:hover {
  margin-top: -11px;
}

.file-6:hover {
  margin-top: -8px;
}


/* Make the tab feel like it's
   being grabbed */

.blog-file:hover .file-tab {

  box-shadow:

    0 4px 6px
      rgba(0,0,0,.28),

    inset 0 1px 1px
      rgba(255,255,255,.3);

}




/* =================================
   MOBILE
================================= */

@media (max-width: 700px) {

}