/*FONTS*/
.monsieur-la-doulaise-regular {
  font-family: "Monsieur La Doulaise", cursive;
  font-weight: 400;
  font-style: normal;
}

.cormorant-garamond-<uniquifier>{
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}

.song-myung-regular {
  font-family: "Song Myung", serif;
  font-weight: 400;
  font-style: normal;
}

.KR{
  font-family: "Song Myung", serif;
}

*{
  word-break:keep-all;
}

/*-----------------*/
/*-----------------*/
/*-----------------*/
/*STYLING*/
/*-----------------*/
/*-----------------*/
/*-----------------*/
body{
  background-color: #F2E2E2;
  background-size: 15%;
  background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3UFMgTca04nLoro9jh7QhuXLNXPPVyQEIAvI4YsbDR_4CyrbMOmM0bjfs&s=10');
  background-repeat: repeat;
  overflow: hidden;
  height: 99vh;
  width: 99vw;
  box-sizing: border-box;
  font-family: "Cormorant Garamond", serif;
  color: grey;
  font-size: clamp(1rem, 1.5rem, 2rem);
  margin:0;
  padding:0;
}

a{
  text-decoration: none;
  all: unset;
}

/* Firefox */
* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Chrome, Safari, Edge */
*::-webkit-scrollbar {
    display: none;
}

.wrapper{
  height: 99vh;
  width: 99vw;
  box-sizing: border-box;
  box-shadow: inset 0 0 100px 40px #d2e2e2;
  margin-left:-3px;
  margin-top: -3px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.wrapper.fade-out {
  opacity: 0;
}

.theatre-box{
  height: 100%;
  width: 80%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}

.wainscoat{
  height: 25%;
  width: 100%;
  box-sizing: border-box;
  background-image:url('https://64.media.tumblr.com/05766590ac438d58c8ea1e88c07a69b5/23e2ba21762a34c7-aa/s640x960/73b176668e9bf75c2dfb421118542f59251d78a6.pnj');
  background-size: auto 100%;
  background-position: center;
  background-repeat: repeat-x; 
}

.curtain-left, .curtain-right{
  height: 100%;
  width: 15%;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  background-image:url('');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 99;
  filter: drop-shadow(5px 10px 15px rgba(0, 0, 0, 0.2));
}

.curtain-left{
  left: 0;
}

.curtain-right{
  right:0;
  transform: scaleX(-1);
}

.curtain-left > img, .curtain-right > img{
  height: 120%;
  width: 120%;
}

.prayinglady{
  height: 60%;
  position: absolute;
  bottom: 0;
  right: calc(99vw * 0.1);
  z-index: 98;
  box-sizing: border-box;
}

.prayinglady > img{
  height: 100%;
}

.theatre{
  height: 100%;
  aspect-ratio: 4 / 3;
  box-sizing: border-box;
  background-image: url('https://64.media.tumblr.com/cb9402f04da07dd830a21398ffebd7bc/23e2ba21762a34c7-fd/s540x810/657fb2fe09bf9da45393faeae1207104b3d8514f.pnj');
  background-position: bottom;
  background-size: contain;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lamp-left, .lamp-right{
  width: 20%;
  height: 35%;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  background-image: url('');
  background-position: top;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 97;
  filter: drop-shadow(10px 40px 15px rgba(237, 172, 40, 0.35));
}

.lamp-left{
  left: 100px
}

.lamp-right{
  right: 100px;
  transform: scaleX(-1);
}

.lamp-left>img, .lamp-right>img{
  width:100%;
  height: 100%;
}

.pearls{
  position: absolute;
  top: 0;
  left: 100px;
  width: 30%;
  z-index: 100;
}

.glow{
  font-size: clamp(1rem, 2rem, 2.5rem);
  color: white;
  text-shadow: 2px 2px 4px white;
  font-family: "Monsieur La Doulaise", cursive;
  z-index: 100;
}

.enter{}
#box{}

a:hover.glow{
  color: black;
  text-shadow: 2px 2px 4px black;
}

.fairy{
  width: 200px;
  position: absolute;
  top: 43%;
  right: 48%;
  z-index: 1;
}


/*----------------
-----------------
----------------*/
/*special effects*/
/*----------------
-----------------
----------------*/
.float {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.float2{
  animation-name: floating2;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.swing{
  animation-name: swinging;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes floating {
0% { transform: translate(0, 0px); }
50% { transform: translate(0, 15px); }
100% { transform: translate(0, -0px); }
}

@keyframes floating2 {
0% { transform: translate(0, 10px); }
50% { transform: translate(0, 0px); }
100% { transform: translate(0, 10px); }
}

@keyframes swinging {
  0% {
    transform: rotate(2deg);
  }
  25% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(2deg);
  }
  75% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(2deg);
  }
}


h2{
  font-family: "Monsieur La Doulaise", cursive;
  text-shadow: none;
  font-size: 3rem;
  line-height: 0.1;
}

p{
  padding: 0px 20px 0px 20px;
  text-align: left;
}

.wrapper2{
  width: 99vw;
  height: 99vh;
  box-sizing: border-box;
  margin: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: space-evenly;
  gap: 10px;
  overflow: hidden;
}

header{
  width: 100%;
  height: 15%;
  box-sizing: border-box;
  margin: 0;
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  font-family: "Monsieur La Doulaise", cursive;
  font-size: 5rem;
  color: white;
  text-shadow: 5px 5px 3px #A4b05B;
  text-decoration: underline;
}


nav{
  width: 100%;
  height: 5%;
  box-sizing: border-box;
  margin: 0;
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  overflow: hidden;
}

nav > button{
  border: 0px solid transparent;
  background: transparent;
  text-align: center;
  font-family: "Monsieur La Doulaise", cursive;
  color: #A4b05B;
  text-shadow: 2px 2px 2px white;
  font-size: 2rem;
}

nav > button:hover{
  color: #D0F0C0;
}

nav > button.active{
  color: dimgrey;
  text-shadow: #FFFFFF;
  text-decoration: underline;
}

.tab-btn{
  content:"";
}

.float {
font-size:2em;
color: #000;
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes floating {
0% { transform: translate(0, 0px); }
50% { transform: translate(0, 15px); }
100% { transform: translate(0, -0px); }
}

/*====CONTAINER====*/
.container{
  width: 100%;
  height: 80%;
  box-sizing: border-box;
  margin: 0;
  padding: 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: flex-start;
  padding-top: 20px;
  overflow-x: hidden;
  overflow-y: scroll;
  border: 40px solid transparent;
  border-image: url('https://64.media.tumblr.com/cf0e37d0f1a2ebbb1c9cfad01ab52e0a/7d141c35be1720c3-14/s2048x3072/ee4b2fba2dfb83fdcead56fd0c9d88d0cd236560.pnj') 400 round;
  gap: 20px;
  color: #70783d;
  text-shadow: 1px 1px 5px #70783d;
  font-style: italic;
  font-size: clamp(0.5rem, 1rem, 1rem);
}

.profile{
  width: 20%;
  min-height: 50vh;
  height: fit-content;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  outline: 5px double white;
  outline-offset: 3px;
  border: 1px solid white;
  padding: 0;
  margin:0;
  background: #c3c7b9BB;
  gap: 10px;
}

.tab1{
  display: none;
}

.tab1.active{
  display: flex;
  width: 75%;
  height: fit-content;
  min-height: 50vh;
  box-sizing: border-box;
  outline: 5px double white;
  outline-offset: 3px;
  border: 1px solid white;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  padding: 20px;
  margin:0;
  gap: 10px;
  background: #c3c7b9BB;
}

.pfp{
  width: 90%;
  max-width: 300px;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  border: 20px solid transparent;
  border-image: url('https://64.media.tumblr.com/b7b490c3ac7077a62aef8862a231db01/7d141c35be1720c3-26/s2048x3072/bab5fdddea56c1879627b2a954ccca4b7ae9700f.pnj') 420 round;
  overflow: hidden;
  position: relative;
  margin-top: 10px;
}

.pfp>img{
  height: 160%;
  position: absolute;
  right:-10px;
  bottom: -40px;
}

.bio-box{
  width: 85%;
  height: 5vh;
  box-sizing: border-box;
  text-align: left;
  margin-top: -10px;
}

.name{
  font-family: "Monsieur La Doulaise", cursive;
  font-size: 3rem;
  position: relative;
  line-height: 0.1;
  top: -3rem;
  color: white;
  text-shadow: 2px 2px 2px grey;
}

.bio{
  color: #70783d;
  font-style: italic;
  position: relative;
  top: -1rem;
  text-shadow: 1px 1px 5px white;
  line-height: 0.8;
}

.box{
  width: 80%;
  height: fit-content;
  box-sizing: border-box;
  border-radius: 50px;
  border: 2px solid white;
  box-shadow: 0px 0px 5px 5px #FFFFFF;
  background: #FFFFFF;
  margin-bottom: 5px;
  font-size: clamp(0.2rem, 0.3rem, 0.3rem);
  flex-shrink: 1;
  line-height: 0.5;
  color: lightgrey;
  text-shadow: none;
}

.socials-box{
  width: 85%;
  height: fit-content;
  box-sizing: border-box;
  text-align: center;
  background-image: url('pillow.png');
  background-position: center;
  background-size: 100% 100%;
  padding-top: 30px;
  padding-bottom: 30px;
}

.socials-box > a{
  font-style: none;
  text-decoration: none;
  font-size: clamp(0.5rem, 1rem, 1rem);
  font-family: "Jacquarda Bastarda 9", serif;
  text-shadow: none;
}

.socials-box > a:hover{
  color: white;
  text-shadow: 3px 3px 0px dimgrey;
}

.music-box{
  width: 100%;
  min-height: 20vh;
  aspect-ratio: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  padding: 5px;
  margin:0;
  gap: 10px;
}

#player{
  width: 100%;
  aspect-ratio: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  padding: 5px;
  margin:0;
}

#audioControl{
  border: 0px solid transparent;
  background-color: transparent;
}

#myAudio{
  content:"";
}

#profile{
  content:"";
}
#about{
  content:"";
}
#citations{
  content:"";
}

/*================*/
/*================*/
/*=====PROFILE====*/
/*================*/
/*================*/
.tab1#profile{
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
}

.wrapper3{
  width: 100%;
  height: fit-content;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.wrapper4{
  width: 65%;
  height: fit-content;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}


.wrapper5{
  width: 35%;
  height: fit-content;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0;
  margin: 0;
}

.wrapper5 > img{
  width: 100%;
  height: auto;
}

.calendar-box{
  width: 100%;
  height: fit-content;
  box-sizing: border-box;
  border: 20px double transparent;
  border-image: url('https://64.media.tumblr.com/cf0e37d0f1a2ebbb1c9cfad01ab52e0a/7d141c35be1720c3-14/s2048x3072/ee4b2fba2dfb83fdcead56fd0c9d88d0cd236560.pnj') 400 fill round;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: flex-start;
  position: relative;
  gap: 10px;
  z-index: 2;
}

.calendar-box > img{
  position: absolute;
  width: 70%;
  height: auto;
  z-index: -1;
  bottom: 0;
  right: 0;
}

.cal-deco-box{
  width: 40%;
  height: 40vh;
  box-sizing: border-box;
  display: flex;
  position: relative;
  justify-content: flex-end;
  align-items: flex-end;
  padding-bottom: 10px;
  background-image: url('loveletter.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 10px solid transparent;
  border-image:url('https://64.media.tumblr.com/b140be49fa88f5315c17ebc003638ea3/b533dd769b6bc0db-6d/s640x960/0c6b25885e5600635a8932e86fd3d46cd91068e2.pnj') 40 round;
}

.date-box{
  width: fit-content;
  height: fit-content;
  min-height: 20px;
  box-sizing: border-box;
  position: absolute;
  background: #FFFFFFBB;
  box-shadow: 0px 0px 3px 3px #FFFFFFBB;
  border-radius: 5px;
  margin-right: 3px;
  z-index: 1;
}

.cal-box{
  width: 60%;
  height: fit-content;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: space-evenly;
  align-items: space-evenly;
  z-index: 1;
}

.month-box{
  width: 100%;
  height: fit-content;
  min-height: 60px;
  box-sizing: border-box;
  display: flex;
  position: relative;
  font-family: "Monsieur La Doulaise", cursive;
  color: white;
  text-shadow: 2px 2px 3px white;
  font-size: 2.5rem;
  line-height: 0.1;
  padding-top: 1.25rem;
  justify-content: flex-end;
  border: 10px solid transparent;
  border-image: url('https://64.media.tumblr.com/b140be49fa88f5315c17ebc003638ea3/b533dd769b6bc0db-6d/s640x960/0c6b25885e5600635a8932e86fd3d46cd91068e2.pnj') 40 round;
  z-index: 1;
}

.month{
  content:"";
}



.calendar{
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: space-evenly;
  background-image: url('https://i.pinimg.com/1200x/06/93/70/06937092dc3aa7f667e7e5d151f7506e.jpg');
  background-position: center;
  background-size: 100% 100%;
  padding: 5px;
}

.calendar-table{
  width:100%;
  height:100%;
  border-collapse:collapse;
  table-layout:fixed;
  font-size: clamp(0.5rem, 1rem, 1rem);
  color: #FFFFFFBB;
}


.status-box{
  width: 100%;
  min-width: 20vw;
  height: fit-content;
  box-sizing: border-box;
  text-align: left;
  border: 40px solid white;
  border-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Madame_de_Pompadour.jpg/960px-Madame_de_Pompadour.jpg?_=20220325054539') 80 round;
  font-size: clamp(0.5rem, 1rem, 1rem);
  padding: 5px;
  position: relative;
}

.madame{
  height: 200%;
  width: auto;
  box-sizing: border-box;
  z-index: 1;
  position: absolute;
  right: 0;
  bottom: -70px;

}

.about-me{
  width: 100%;
  min-height: 50vh;
  height: fit-content;
  box-sizing: border-box;
  border: 20px solid transparent;
  border-image: url('https://64.media.tumblr.com/cf0e37d0f1a2ebbb1c9cfad01ab52e0a/7d141c35be1720c3-14/s2048x3072/ee4b2fba2dfb83fdcead56fd0c9d88d0cd236560.pnj') 400 fill round;
  display: flex;
  margin-top: 20px;
}

.about-me-bg{
  width: 100%;
  min-height: 50vh;
  height: fit-content;
  background-image:url("https://i.pinimg.com/originals/bb/c1/7e/bbc17ecad554f47f825904947f45b1e7.gif");
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
/*================*/
/*================*/
/*=====ABOUT====*/
/*================*/
/*================*/
.wrapper6{
  width: 100%;
  height: fit-content;
  min-height:50vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.rower{
  width: 100%;
  height: fit-content;
  min-height:5vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: space-evenly;
  margin-bottom: 10px;

}

.folder{
  width: 30%;
  height: 100% auto;
  box-sizing: border-box;
  background: transparent;
  border: 10px solid transparent;
  border-image: url('https://64.media.tumblr.com/0aea2721c78a853a5bd8fd4f5a939d1c/23e2ba21762a34c7-3b/s1280x1920/4bcb40d1a5b7a5030146da4d3273e82062adc4c9.pnj') 50 round;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.folder > img{
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.folder > a{
  z-index: 2;
  font-family: "Monsieur La Doulaise", cursive;
  color: white;
  text-shadow: 0px 0px 5px black;
  font-size: clamp(1rem, 2rem, 2rem);
  opacity: 0.85;
}

.folder > a:hover{
  color: #70783d;
  text-shadow: 0px 0px 5px white;
}

.columner{
  width: 70%;
  height: fit-content;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.files{
  width: 40%;
  height: 8vh;
  box-sizing: border-box;
  border: 10px solid transparent;
  border-image: url('https://64.media.tumblr.com/cf0e37d0f1a2ebbb1c9cfad01ab52e0a/7d141c35be1720c3-14/s2048x3072/ee4b2fba2dfb83fdcead56fd0c9d88d0cd236560.pnj') 400 fill round;
}

.desc{
  width: 60%;
  height: 8vh;
  box-sizing: border-box;
  border: 10px solid transparent;
  border-image: url('https://64.media.tumblr.com/cf0e37d0f1a2ebbb1c9cfad01ab52e0a/7d141c35be1720c3-14/s2048x3072/ee4b2fba2dfb83fdcead56fd0c9d88d0cd236560.pnj') 400 fill round;
}

/*================*/
/*================*/
/*=====CONTENTS====*/
/*================*/
/*================*/
#reading, #listening, #watching, #playing, #studying{
  color: #70783d;
  text-shadow: 1px 1px 5px #70783d;
  font-style: italic;
  font-size: clamp(0.5rem, 1rem, 1rem);
}
#lastupdate, #laston{
  flex-shrink: 2;
  font-size: clamp(0.3rem, 0.5rem, 1rem);
  font-style: italic;
}
#impdate{
  font-size: 5pt;
}