@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --max-width: 80%;
}
.album {
  display: inline-block;
  position:relative;
  max-width: 230px;
  padding: var(--spacing);
  margin: var(--spacing) auto;
  border-radius: var(--border-radius); 
  background-color: #F5EEE9;
  transform: rotate(1deg);
  text-align: center;
}



.box2 {
  display: flex;
    flex-flow: column;
  align-items: center;
  justify-content: center;
}


.album:nth-child(even) {
  transform: rotate(-1deg)
}


.album:nth-child(2) {
  transform: rotate(1.5deg)
}

.album:nth-child(5n) {
  transform: rotate(3deg)
}

.album:nth-child(9n) {
  transform: rotate(-2deg)
}

.album:hover {
  transform: rotate(-3deg)
}

h1 {
  font-size: 4em;
  letter-spacing: 0.4rem;
  text-align: right !important;
  line-height: 1 !important;
  margin: 0;
}


h2 {
  font-size: 3em;
  line-height: 1 !important;
  margin: 0;
}

h3 a {
  color: #fff
}

button {
  line-height: 0.5;
  margin: 0;
  font-family: nanum pen script;
  font-size: 20pt;
}

.tapes1::before {
  background-image:url('/misc/hi/tape10.png');
  background-repeat:no-repeat;
  display:block;
  content:" ";
  position:absolute;
  height:50px;
  width:150px;
background-size:contain;
  top:10px;
  left:-40px;
  transform: rotate(-45deg)
}

.tapes2::before {
  background-image:url('/misc/hi/tape11.png');
  background-repeat:no-repeat;
  display:block;
  content:" ";
  position:absolute;
  height:50px;
  width:150px;
background-size:contain;
  top:-35px;
}

.asasing::before {
  background-image:url('/misc/albums/asasing.png');
  background-repeat:no-repeat;
  display:block;
  content:" ";
  position:absolute;
  height:150px;
  width:150px;
background-size:contain;
  bottom:-30px;
  right: -80px;
  filter: drop-shadow(-2px 2px 1px #333333);
}

.tape::before {
  background-image:url('/misc/hi/tape1.png');
  background-repeat:no-repeat;
  display:block;
  content:" ";
  position:absolute;
  height:50px;
  width:150px;
background-size:contain;
  top:-20px;
  left:40%
}

.tape:nth-of-type(4n)::before, .taped ~ div .taped:nth-of-type(6n)::before {
  background-image:url('/misc/hi/tape2.png');
  left:20% 
  }

.tape:nth-of-type(8n)::before {
background-image:url('/misc/hi/tape3.png'); 
left:30%
}

.tape:nth-of-type(odd)::before {
background-image:url('/misc/hi/tape4.png');
right:20% 
}

.tape:nth-of-type(3n)::before {
background-image:url('/misc/hi/tape5.png'); 
left:25%  
}

.tape:nth-of-type(5n)::before {
background-image:url('/misc/hi/tape6.png'); 
left:20%
}

.tape:nth-of-type(7n)::before {
background-image:url('/misc/hi/tape7.png'); 
left:25%
}

.tape:nth-of-type(10n)::before {
background-image:url('/misc/hi/tape9.png'); 
left:20%
}

.tape:nth-of-type(17n)::before {
background-image:url('/misc/hi/tape10.png'); 
left:28%
}

.tape:nth-of-type(11n)::before {
background-image:url('/misc/hi/tape12.png'); 
left:28%
}



dialog {
    background: none ;
    border: none;
    overflow: hidden;
    width: 100%;
  
}
.thoughts {
max-width: 400px !important;
  background-image: url('/misc/albums/paper.jpg');
    padding: var(--spacing);
    margin: var(--spacing) auto;
    border: none;
    border-radius: 10px; 
    background-color: var(--background);
    transform: rotate(1deg);
    font-family: nanum pen script;
    font-size: 16pt;
    text-align: justify;
    background-attachment: local !important;
  
  
}

dialog h2 {
  font-family: nanum pen script;
}


.yay::after {
  background-image:url('/misc/albums/ninyay.png');
  background-repeat:no-repeat;
  display:block;
  content:" ";
  position:absolute;
  height:200px;
  width:200px;
background-size:contain;
bottom:0%;
left: 25%;
  filter: drop-shadow(-3px 2px 3px #000);
}    

.nay::after {
  background-image:url('/misc/albums/ninnay.png');
  background-repeat:no-repeat;
  display:block;
  content:" ";
  position:absolute;
  height:200px;
  width:200px;
background-size:contain;
bottom:0%;
left: 27%;
  filter: drop-shadow(-3px 2px 3px #000);
}    

.hm::after {
  background-image:url('/misc/albums/ninhm.png');
  background-repeat:no-repeat;
  display:block;
  content:" ";
  position:absolute;
  height:200px;
  width:200px;
background-size:contain;
bottom:0%;
left: 26%;
  filter: drop-shadow(-3px 2px 3px #000);
}   

.meh::after {
  background-image:url('/misc/albums/ninmeh.png');
  background-repeat:no-repeat;
  display:block;
  content:" ";
  position:absolute;
  height:200px;
  width:200px;
background-size:contain;
bottom:0%;
left: 26%;
  filter: drop-shadow(-3px 2px 3px #000);
}   

.new::after {
    /* edit these variables! */
    --white: #131315;
    --med: #F5EEE9;
    --font: nanum pen script;
    
    content: "new!";
  position: absolute ;
    font-family: nanum pen script;
    font-weight:bold;
    font-size:20pt;
    width:50px;
    height:20px;
    border-radius:5px;
    color: #9A1A1D;
    background:none;
    border: none;
    top: 3px;
    left:0;
        
    
    }

small {
  font-size: x-small;
  line-height: 0 
}

@media (pointer: coarse) and (orientation: portrait) {
  :root {
   --max-width: 100%
  }
  
  .album {
      max-width: 47%;
     margin: 0;
  }
.tape:before {
    width: 80px;
  left: 40px
  }
  
  dialog {
    height: 82%
  
}
.yay::after {
  position: relative;
bottom:0%;
left: 0%;
  }
  
.nay::after {
bottom:0%;
left: 0%;
  }

.hm::after {
bottom:0%;
left: 0%;
  }
.thoughts {
  max-height: 350px;
  overflow-y:auto
  }
  
.asasing::before {
  bottom:0px;
  right: -30px;
  }
}