/* Font Butterfly Kids */
.butterfly-kids-regular {
    font-family: "Butterfly Kids", cursive;
    font-weight: 400;
    font-style: normal;
}

/* Font Bagel */
.bagel-fat-one-regular {
font-family: "Bagel Fat One", system-ui;
font-weight: 400;
font-style: normal;
}

.fuzzy-bubbles-regular {
font-family: "Fuzzy Bubbles", sans-serif;
font-weight: 400;
font-style: normal;
}

body, html {
  position:relative;
  padding: 0;
  font-family: monospace;
  background: url('images/bggrid-transp.png') repeat center;
  background-color: #faf7e8;
  scrollbar-color: #f0afcd transparent;
}

.header, .footer {
  height: 9.375rem;
  width: 100%;
  color: transparent;
}
.header { position: relative; top: 0; }
.footer { position: absolute; top: 86.875rem; height: 12.5rem;}


.wrapper {
  left: 50%;  
  transform: translateX(-50%);
  width: 53.125rem; height: 75rem;
  border-radius: 30px;
  background: url('images/wrapperback.png');
  box-shadow: -0.625rem 0.625rem 0.25rem rgba(0,0,0,0.25);
  padding: 0.9375rem;
  z-index: 0;
  position: relative;
}

.main {
  position: relative;
  width: 52.5rem; height: 74.375rem;
  margin: 0 auto;
  border: 4px solid #f4bbc9;
  border-radius: 30px;
  /* background: #fae8ed; */
  /* background: hsl(0, 0%, 100%); */
  background: url("images/green-main-background.jpg") repeat;
  background-size: cover;
  background-position: center;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(8, 6.5625rem);
  grid-template-rows: repeat(12, 6.5625rem);
}

.box {
    position: relative;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    overflow: visible;
}

#box1 {
    grid-area: 1 / 1 / 4 / 9;
}

#box2 {
    grid-area: 4 / 1 / 9 / 7;
}

#box3 {
    grid-area: 4 / 6 / 7 / 9;
    z-index: 3;
}

#box4 {
    grid-area: 7 / 6 / 9 / 9;
}

#box5 {
    grid-area: 8 / 1 / 12 / 3;
}

#box6 {
    grid-area: 8 / 2 / 12 / 7;
}
#box7 {
    grid-area: 8 / 6 / 12 / 9;
}



/* Title area */
.titlediv {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 12.5rem;
  background: url("images/bowback2.png");
  background-size: cover;
  background-position: center;
  border-radius: 26px 26px 0 0;
  z-index: 1;
}

.framediv {
  position: relative;
  top: 1.125rem;
  width: 50%;
  height: 10rem;
  left: 50%;
  transform: translateX(-50%);
  background: url("images/lacetitleframe.png") center top / contain no-repeat;
  display: flex;
  align-items: center;
  z-index: 3;
  text-align: center;
}
#title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: "Roboto Mono", cursive;
  font-size: 1.5625rem;
  color: #703c4a;
}

.navigation {
position: absolute;
top: 12.375rem;
left: 0;
width: 100%;
height: 3.75rem;
background: url('images/deer.jpg');
background-size: cover;
background-position: center; 
z-index: 5;
}

#home-image,
#projects-image,
#hobbies-image,
#gallery-image,
#misc-image,
#journal-image {
position: absolute;
top: 1.375rem;
height: 1.25rem;
pointer-events: none;
z-index: 6; 
}

#home-image    { left: 8.75rem; }
#hobbies-image{ left: 16.5625rem; }
#gallery-image { left: 23.75rem; }
#projects-image { left: 31.875rem; }
#misc-image    { left: 38.75rem; }
#journal-image    { left: 46.75rem; }

.nav-buttons {
top: 0.125rem;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
gap: 0.625rem;
position: relative; /* create new stacking context */
z-index: 5;         /* above the GIFs */
}

.nav-button {
all: unset;
width: 6.875rem;
height: 2.5rem;
background-image: url('images/pinknavbutton.png');
background-size: cover;
display: flex;
align-items: center;
font-family: "Fuzzy Bubbles", monospace;
font-size: 1rem;
cursor: pointer;
text-indent: 0.875rem;
position: relative;
z-index: 6;
}
.nav-button:hover {
background-image: url('images/navbutton.png');
}

.lace-divider {
position: absolute;
top: 3.125rem;
left: 0;
width: 100%;
height: 3.75rem;
background: url('images/lacedivider.png') repeat-x;
z-index: 0;
}


.main-footer{
position: relative;
justify-content: center;
text-align: center;
display: flex;
position: absolute;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
height:6.25rem;
width: 100%;
bottom:0;
left:0;
z-index: 4;
}

.main-footer-div{
position: absolute;
background-repeat: repeat-x;
background-image: url('images/strawberrydivider.png');
height: 5rem;
width: 100%;
bottom:0;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}


.about-me{
padding: 0 0 0 1.125rem;
width: 9.375rem;
margin-top: 2rem;
align-items: center;
justify-content: center;
text-align: center;
font-size: 0.875rem;
}
.music-player{
position: relative;
box-shadow: 0 0 1.25rem 0 rgba(244, 47, 139, 0.25);
margin: 2.25rem 0.9375rem 0.3125rem 1.875rem;
top: 0;
left: 45%;
transform: translateX(-50%);
height: 15rem;
width: 70%;
background-image: url('images/pinkauramusicback.jpg');
background-position: center;
background-color: rgb(255, 255, 255);
background-size: cover;
border-radius: 20px;
line-height: 1.625rem;
font-size: 0.875rem;
justify-content: center;
align-items: center;
transition-duration: 0.5s;
padding: 0.5rem;
font-family: "Roboto Mono", monospace;
color: #703c4a;
}

.music-player:hover{
box-shadow: 0 0 0.625rem 0.3125rem rgba(246, 67, 151, 0.4);
}

.music-name,
.artist-name{
height: 1.0625rem;
text-align: center;
text-transform: capitalize;
margin: 0.0625rem;
}

.music-name{font-size: 0.75rem;}
.artist-name{font-size: 0.625rem;}

.disk{
position: relative;
display: block;
margin: 0.625rem auto;
width: 6.25rem;
height: 6.25rem;
border-radius: 50%;
background-image: url('images/coolwithyou.jpg');
background-size: cover;
box-shadow: 0 0 0 0.3125rem rgba(246, 67, 150, 0.1);
animation: rotate 20s linear infinite;
animation-play-state: paused;
}

.disk.play{
animation-play-state: running;
}

.disk::before{
content:'';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 1.25rem; height: 1.25rem;
border-radius: 50%;
background-image: url('images/pinkauramusicback.jpg');
background-position: center;
}

.song-slider {
position: relative;
width: 100%;
height: 1.25rem;
}

.seek-bar {
position: absolute;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
top: 0.5rem;
left: 0.75rem;
width: 11.875rem;
overflow: hidden;
height: 0.3125rem;
border-radius: 10px;
background-color: #eaafc2;
cursor: pointer;
}

.seek-bar::-webkit-slider-thumb{
-webkit-appearance: none;
width: 0.625rem;
height: 0.9375rem;
background: #153f05;
box-shadow: -25rem 0 0 25rem #885c44;
}

.current-time,
.song-duration {
position: absolute;
margin: none;
top: 0.625rem;
font-size: 0.625rem;
}

.song-duration{right: 1.25rem;}
.current-time{left: 1.25rem;}

.controls{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: auto;
margin-top: 0.625rem;
}

.play-button{
position:relative;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: #885c4481;
cursor: pointer;
border: none;
}

.play-button span{
position: absolute;
top: 50%;
left: 35%;
transform: translateY(-50%);
width: 0.3125rem;
height: 1.125rem;
border-radius: 1px;
background: #885c44;
transition: .5s;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.play-button span:nth-child(2){
left: 55%;
transform-origin: center;
}

.play-button.pause span:nth-child(2){
transform: translateY(-50%) scaleY(0);
}

.play-button.pause span:nth-child(1){
width: 35%;
height: 45%;
left: 53%;
transform: translate(-50%, -50%);
border-radius: 0;
clip-path: polygon(0 0, 100% 50%, 100% 50%, 0% 100%);
}

.play-button.pause:hover{
animation: pulse 1.7s linear infinite;
}

@keyframes pulse{
0%{
    box-shadow: 0;
}
25%{
    box-shadow: 0 0 0 0.1875rem rgba(246, 67, 150, 0.1);
}
50%{
    box-shadow: 0 0 0 0.3125rem rgba(246, 67, 150, 0.3);
}
75%{
    box-shadow: 0 0 0 0.1875rem rgba(246, 67, 150, 0.1);
}
100%{
    box-shadow: 0;
}
}

.btn{
position: relative;
width: 1.875rem;
height: 1.875rem;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
border: none;
cursor: pointer;
background-color: #885c447a;
margin: 0.625rem;
}

#forwardbutton{
position: absolute;
height: 1.25rem;
left: 0.625rem;
justify-content: center;
align-items: center;
}

#backbutton{
position: absolute;
height: 1.25rem;
left: 0.5rem;
justify-content: center;
align-items: center;
}

@keyframes rotate{
0%{
    transform: rotate(0);
}
100%{
    transform: rotate(360deg);
}
}

.welcome-intro {
position: relative;
box-shadow: 0 0 0.625rem 0 rgba(244, 47, 139, 0.25);
height: 23.75rem;
width: 30.625rem;
left: 5%;
top: 3%;
background-image: url("images/welcomememo.jpg");
background-position: center;
background-color: rgb(255, 255, 255);
background-size: cover;
border-radius: 20px;
line-height: 1.4375rem;
font-size: 1.125rem;
text-align: center;
scrollbar-color: #df8db2 transparent;
scrollbar-width: thin;
transition-duration: 0.5s;
justify-content: center;
align-items: center;
padding: 0.625rem;
}

.welcome-intro:hover{
box-shadow: 0 0 0.625rem 0.3125rem rgba(246, 67, 150, 0.4);
}

.welcome-intro-inner{
font-family: "Fuzzy Bubbles";
font-size: 0.875rem;
padding-right: 1.25rem;
overflow: auto;
margin: 3.75rem 1.875rem 3.75rem 5rem;
height: 16.25rem;
color: #3a2026;
}

.calicotopper{
position: relative;
width: 100%;
height: 0.625rem;
right: 50%;
transform: translateX(40%);
top: 10%;
z-index: 6;
}

#calicoimg{
position: absolute;
width: 11.25rem;
right: 1.25rem;
z-index: 6;
bottom: 0;
}

#camera {
position: relative;
width: 16.5625rem;
height: 9.375rem;
left: 1rem;
background-image: url('images/camera2.png');
background-position: center;
background-size: contain;
background-repeat: no-repeat;
margin: 0.9375rem 0 0 0.9375rem;
border-top: 0px;
border-right: 0px;
rotate: -10deg;
font-size: 1.3125rem;
line-height: 1.9375rem;
top: 0;
border-radius: 15px;
box-shadow: -0.3125rem 0.3125rem 0.625rem 0 rgba(244, 47, 139, 0.25);
transition-duration: 0.5s;
z-index: 5;
}

#camera:hover{
position: relative;
cursor: pointer;
rotate: 0deg;
box-shadow: none;
}

#camera:hover::after {
content: "Me ꒰ᐢ. .ᐢ꒱";
font-size: 0.875rem;
justify-content: center;
align-items: center;
position: absolute;
top: 100%;
left: 0.4375rem;
height: 1.125rem;
background: #f8edf1;
color: #634331;
border: dashed 2px #9f6371;
padding: 0 0.25rem 0.625rem 0.25rem;
border-radius: 4px;
white-space: nowrap;
box-shadow: 0 0 0.3125rem rgba(0,0,0,0.2);
z-index: 4;
}

.camera-image{
position: absolute;
width: 9.375rem;
height: 8rem;
left: 1.1875rem;
top: 1.75rem;
background-image: url('images/cameraimage.jpg');
background-size: contain;
background-repeat: no-repeat;
border-radius: 2px;
z-index: 4;
}

.kumapic{
position: absolute;
background-image: url('images/layingkuma.png');
background-position: center;
background-size: contain;
height: 4.375rem;
width: 5rem;
right: 3.125rem;
bottom: 0;
background-repeat: no-repeat;
z-index: 5;
}


.currently{
position: absolute;
height: 16.25rem;
width: 18.125rem;
left: 50%;
margin-top: 6%;
transform: translateX(-50%);
background-image: url("images/currentlyback.jpg");
background-position: center;
background-size: cover;
border-radius: 20px;
line-height: 1.4375rem;
font-size: 1.125rem;
scrollbar-color: #df8db2 transparent;
scrollbar-width: thin;
transition-duration: 0.5s;
padding: 1.875rem;
box-shadow: 0 0 0.625rem 0.3125rem rgba(246, 67, 150, 0.2);
}

.currently:hover{
box-shadow: 0 0 0.625rem 0.3125rem rgba(246, 67, 150, 0.4);
}

.currently-inner{
align-items: center;
text-align: left;
font-family: "Fuzzy Bubbles";
line-height: 1rem;
padding-right: 1.25rem;
overflow: auto;
margin: 0.625rem;
height: 14.375rem;
color: #3a2026;
}

.span.title {
display: flex;
font-family: "Fuzzy Bubbles";
margin-bottom: 0.625rem;
font-size: 0.625rem;
line-height: 0.1875rem;
text-shadow: 0.0625rem 0.0625rem 0 white, -0.0625rem -0.0625rem 0 white;
transition-duration: 0.6s;
}


span.title {
display: block; 
width: 100%; 
font-family: "Fuzzy Bubbles";
margin: 0.625rem;
font-size: 0.875rem;
line-height: 0.0625rem; 
transition-duration: 0.6s;
padding: 0.125rem 0.625rem;
box-sizing: border-box;
}


p:nth-of-type(4n + 1) span.title:first-child {
background: rgb(246, 241, 147);
}

p:nth-of-type(4n + 2) span.title:first-child {
background: rgb(249, 184, 215);
}

p:nth-of-type(4n + 3) span.title:first-child {
background: #c2e2ea;
}

p:nth-of-type(4n + 4) span.title:first-child {
background: #c2eacd;
}

p:hover span.title::before {
font-weight: bold;
cursor:auto;
content: "✩";
}

.updates{
font-family: "Fuzzy Bubbles";
position: relative;
background-image: url('images/updatesbackground.jpg');  
background-position: center;
background-size: cover;
height: 13.125rem;
margin: 6.875rem 0.9375rem 0.3125rem 0.3125rem;
padding: 0.625rem 0.3125rem 1.25rem 0.3125rem;
left: 50%;
transform: translateX(-50%);
width: 65%;
scrollbar-color: #df8db2 transparent;
scrollbar-width: 0.125rem;
justify-content: center;
align-items: center;
border-radius: 15px;
transition-duration:  0.5s;
box-shadow: 0 0 0.625rem 0.3125rem rgba(246, 67, 150, 0.2);
}

.updates-inner{
align-items: center;
text-align: left;
font-family: "Fuzzy Bubbles";
font-size: 0.875rem;
line-height: 1rem;
padding: 0.3125rem 0.3125rem 0 0.9375rem;
margin: 0.3125rem;
height: 90%;
width: 85%;
color: #3a2026;
overflow: auto;
}

.updates:hover{
box-shadow: 0 0 0.625rem 0.3125rem rgba(246, 67, 150, 0.4);
}

.currently-content{margin-left: 15%; font-size: 0.75rem;}

.updates-content{font-size: 0.75rem; line-height: 0.8125rem;}

span.updates-headers {
font-family: "Fuzzy Bubbles";
display: block; 
width: 100%; 
font-family: "Fuzzy Bubbles";
font-size: 0.75rem;
line-height: 0.0625rem; 
transition-duration: 0.6s;
/* padding: 0.125rem 0.625rem; */
box-sizing: border-box;
}

h3:hover span.updates-headers::before {
font-family: "Fuzzy Bubbles Bold";
content: "↪";
}

.social-buttons{
all: unset;
cursor: pointer;
position: relative;
display: flex;
gap: 0.9375rem;
margin-top: 4%;
margin-left: 11%;
width: 70%;
height: 3.75rem;
}

#linkedin, #git, #pinterest{
all: unset;
background-position: center;
background-size: contain;
cursor: pointer;
height: 2.3rem;
width: 2.3rem;
z-index: 6;
}

#linkedin{
background: url("images/linkedinicon.png");
}

#git{
background: url("images/github-mark.png");
}

#pinterest{
background: url("images/pinterest.png");
}


a:visited, 
a:link{
color: #703c4a;
}