@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fuggles&family=Noto+Sans+Mono:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Waiting+for+the+Sunrise&display=swap');
@font-face {
    font-family: 'Handwriting';
    src: url('fonts/writing.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
:root{
    --primary-color: black;
    --secondary-color: #c90700;
}
.wrapper{
    width: 100%;
    background-size: 5vw 5vw;
    background-image:
      linear-gradient(to right, var(--secondary-color) 1px, transparent 1px),
      linear-gradient(to bottom, var(--secondary-color) 1px, transparent 1px);
    padding-bottom: 5rem;
    margin-bottom: 5rem;
}

.nav{
    width: 100%;
    background-color: var(--primary-color);
    font-size: 2rem;
    vertical-align: middle;
    font-family: 'Press Start 2P', cursive;
    border-bottom: 2px solid black;
    color: white;
    display: flex;
    align-items: center;
}
.nav .heart{
    color: red;
}
.nav .logo{
    padding: 0.75em;
    display: inline-block;
    border-right: 2px solid black;
}
.nav > *{
    display: inline-block;
}
.nav .right{
    font-size: 1rem;
    margin-left: auto;
    margin-right: 1rem;
}
.nav a{
	all:unset;
	cursor: pointer;
}
.magazine{
    margin-top: 4vw;
    padding: 1rem 0;
    display: flex;
    position: relative;
}
.magazine .bg{
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.magazine .bg .line{
    display: block;
    height: 3vh;
    border: 1px solid black;
}
.magazine .bg .line:nth-child(odd){
    background-image: url('../img/leopard_print.png');
    background-size: 10vw 10vw;
    display: block;
    position: relative;
}
.magazine .bg .line:nth-child(2){
    background-color: var(--secondary-color);
}
.magazine .bg .line:nth-child(3){
    background-image: unset;
    background-color: white;
}
.magazine .bg .line:nth-child(4){
    background-color: var(--primary-color)
}
.magazine .title{
    width: 100%;
    text-align: center;
    position: absolute;
    z-index: 4;
    top: -10%;
}
.magazine .title .neon{
    font-size: 4vw;
}
.magazine .photo-bg{
    position: relative;
    height: auto;
}
.magazine .photo-bg .img-wrapper{
    position: relative;
}
.magazine .photo-bg .img-wrapper::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(data:image/png;base64,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);
    background-color: var(--secondary-color);
    opacity: 0.1;
    z-index: 0;
}
.magazine .photo-bg .img-wrapper img{
    width: 100%;
    border: 2px solid black;
    display: block;
    object-fit: cover;

}
.magazine .photo-bg .img-wrapper img.postmark{
    border: unset;
    position: absolute;
    padding: 1rem;
    opacity: 0.6;
}
.magazine .photo-bg .pinned{
    width: 30%;
    position: absolute;
    transform: rotate(-12deg);
    z-index: 1;
}
.magazine .photo-bg .pin{
    position: absolute;
    left: 15%;
    z-index: 2;
    font-size: 4vw;
    color: var(--secondary-color);
    transform: rotate(-45deg) translateY(-75%);
    display: none;
}
.magazine .photo-bg .img-wrapper.bg img{
    aspect-ratio: 16/10;
}
.magazine .photo-bg .sticker{
    position: absolute;
    width: 5vw;
    bottom: 10%;
    left: -2.5vw;
    z-index: 2;
}
.magazine .photo-bg .sticker img{
    width: 100%;
}
.magazine .photo-bg .sticker.sticker-1{
    animation: sticker1 3s infinite linear;
}
@keyframes sticker1 {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
.magazine .photo-bg .bottom{
    display: inline-block;
    background-color: var(--secondary-color);
    padding: 1rem 2vw;
    font-size: 1vw;
    position: absolute;
    left: 50%;
    transform: scale(100%) translate(-50%, 50%);
    bottom: 0;
    z-index: 2;
    border-radius: 2vw;
    font-family: 'Press Start 2P', cursive;
    border: 2px solid black;
    animation: magazine_breathe 15s linear infinite;
}
@keyframes magazine_breathe {
    0%{
        transform: scale(100%) translate(-50%, 50%);
    }
    50%{
        transform: scale(110%) translate(-50%, 50%);
    }
}

.scroller{
    padding: 1.5rem 0;
    color: white;
    background-color: black;
    font-size: 1.5vw;
    font-family: 'Noto Sans Mono', monospace;
    text-transform: capitalize;
    overflow: hidden;
    white-space: nowrap;
}
.scroller.top{
    margin-top: -5rem;
}
.scroller .text{
    animation: marquee 15s linear infinite;
}
@keyframes marquee {
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-100%);
    }


}


.about{
    padding: 3vw;
    padding-top: 1vw;
    background-image: url('../img/leopard_print.png');
    background-size: 10vw 10vw;
    display: flex;
    justify-content: center;
    position: relative;
}
.about::before{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: contrast(360%) brightness(10%);
    background: 
	    radial-gradient(rgb(255, 255, 255), rgba(0,0,0,0)),
	    url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.about .letter{
    display: inline-block;
    background-color: white;
    transform: rotate(-7deg);
    border: 2px solid black;
    animation: letter_ambient 5s linear infinite;
}
.about .letter::after{
    content: '';
    position: absolute;
    top: 0;
    left: 4vw;
    bottom: 0;
    width: 2px;
    background-color: pink;
}
.about .letter .holes{
    position: absolute;
    left: 0;
    height: 100%;
    width: 4vw;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.about .letter .holes .hole{
    width: 1.5vw;
    height: 1.5vw;
    background-image: url('../img/leopard_print.png');
    background-size: 7vw 7vw;
    border-radius: 50%;
}
@keyframes letter_ambient{
    0%{
        transform: rotate(-7deg) scale(100%);
    }
    50%{
        transform: rotate(-6deg) scale(101%);
    }
}

.about .letter .inner{
    margin-top: 4vw;
    padding: 0 2rem;
    padding-left: 4vw;
    padding-left: calc(4vw + 6px);
	padding-top: 0.5vh;
    font-family: 'Waiting For The Sunrise', cursive;
    word-spacing: 4px;
    font-size: 2vw;
    white-space: pre-line;
    background-image: linear-gradient(#1d97b8 0.05em, transparent 0.05em);
    background-size: 100% 2vw;
    line-height: 1;
}

.about .letter .inner .signature{
    display: block;
    font-size: 4vw;
    transform: rotate(-8deg);
    transform-origin: bottom left;
    font-style: italic;
    font-weight: bolder;
    font-family: 'Handwriting', cursive;
}

.about .letter .heart{
    color: red;
    font-size: 4vw;
}

.map{
    position: relative;
    background: black;
}
.map img{
    width: 100%;
    object-fit: cover;
    height: 50vh;
    display: block;
}
.map::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: url('https://img.freepik.com/premium-photo/grunge-texture-backgroundgrainy-abstract-texture-white-backgroundhighly-detailed-grunge_196290-8372.jpg');
    opacity: 0.6;
	filter: sepia(0.2);
	box-shadow: inset 0 0 5em 1em #000;
}
.map .content{
    font-family: 'DM Serif Display', serif;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
    font-size: 5vw;
    text-align: center;
}

.map .content::after {

    position: absolute;
    top: 100%;
    height: 2rem;
    width: 100%;
    left: 0;
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/23618/rip.svg) bottom;
    background-size: 200%;
  }
















.neon {
font-size: 6.2rem;
white-space: pre-line;
text-align: center;
animation: pulsate 0.11s ease-in-out infinite alternate;   
font-family: 'Vibur', sans-serif;
text-transform: lowercase;
padding: 0.4em;
color: #fff;
text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #f09,
    0 0 82px #f09,
    0 0 92px #f09,
    0 0 102px #f09,
    0 0 151px #f09;
}
.neon.flicker{
    animation: flicker 1.5s infinite alternate; 
}
@keyframes pulsate {
    
    100% {
  
        text-shadow:
        0 0 4px #fff,
        0 0 11px #fff,
        0 0 19px #fff,
        0 0 40px #f09,
        0 0 80px #f09,
        0 0 90px #f09,
        0 0 100px #f09,
        0 0 150px #f09;
    
    }
    
    0% {
  
      text-shadow:
      0 0 4px #fff,
      0 0 10px #fff,
      0 0 18px #fff,
      0 0 38px #f09,
      0 0 73px #f09,
      0 0 80px #f09,
      0 0 94px #f09,
      0 0 140px #f09;
  
  }
}
@keyframes flicker {
    
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
  
        text-shadow:
        0 0 4px #fff,
        0 0 11px #fff,
        0 0 19px #fff,
        0 0 40px #f09,
        0 0 80px #f09,
        0 0 90px #f09,
        0 0 100px #f09,
        0 0 150px #f09;
    
    }
    
    20%, 24%, 55% {        
        text-shadow: none;
    }    
  }