/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
   html, body {
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="48" viewBox="0 0 24 24"><path fill="%23FFFFFF" stroke="%23000" stroke-width="1.5" d="M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.35Z"></path></svg>'), default; 
    overflow-y: scroll;
    scrollbar-width: none;
  }

  body {
    background-color: black;
    color: white;
    font-family: "Junge", cursive; 
    font-weight: 400;
    font-style: normal;
  }

  mark {
    background-color: #52282C;
    color: white;
    padding: 0.2em;
  }

  h2, h3, h4 {
    text-align: center;
    font-family: "Junge", cursive;
    font-weight: 400;
    font-style: normal;
  }

  a.all-links:link, a.all-links:visited {
   color: white;
   transition: 0.5s;
   text-decoration: underline;
 }

 a.all-links:hover, a.all-links:active {
   color: #52282C;
   text-decoration: underline;
 }

 iframe {
  border: none;
  width: 800px;
}

button {
  text-align: center;
  font-family: 'Aboreto', system-ui;
  font-weight: 400;
  font-style: normal;
}

.fade-in {
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 0.8s;
}

@keyframes fadeInOpacity {
 0% {
  opacity: 0;
}
100% {
  opacity: 1;
}
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
   supported by Chrome, Edge, Opera and Firefox */
 };


/*INDEX.HTML*/
.index {
  /* background-color: #0060df; */
  position: inherit;
  width: 100%;
  max-width: 800px;
  /* top: 50%;
  left: 50%;
  transform: translate(-50%,-50%); */
  text-align: center;
  padding: 25px;
  margin: 70px auto;
}

#header-index {
  text-align: center;
  font-family: 'Aboreto', system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 2.5em;
}

.dogteeth {
  width: 400px;
  height: 400px;
  display: inline-block;
}

.index-c {
  position: relative;
  width: 400px;
  height: 400px;
  margin: auto;
}

.warning {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 93%;
  width: 93%;
  opacity: 0;
  transition: .5s ease;
  background: black;
  border: double white;
  padding: 10px;
}

.index-c:hover .warning {
  opacity: 1;
}

.warning-text {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 400px;
}

a.index-enter:link, a.index-enter:visited {
  font-size: 25px;
  font-family: 'Aboreto', system-ui;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
  padding: 5px;
  color: white;
  transition: 0.5s;
}

a.index-enter:hover, a.index-enter:active {
  background-color: #52282C;
}

.zoom {
 transition: transform .5s;
}

.zoom:hover {
  -ms-transform: scale (1.05);
  -webkit-transform: scale (1.05);
  transform: scale(1.05);
}

/*NAVBAR*/
#p-nav {
  color: white;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-evenly;
  font-size: 20px;
  padding: 10px 25px 30px 25px;
  margin: 20px 0;
}

a.nav-link:link, a.nav-link:visited {
  color: white;
  width: 20px;
  padding: 10px 20px;
  display: inline-block;
  text-decoration: none;
  border-style: double;
  transition: 0.5s;
}

a.nav-link:hover, a.navlink:active {
  background-color: white;
  color: black;
  width: 20px;
  text-decoration: none;
  border-style: double;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 95px;
  background-color: white;
  color: black;
  text-align: center;
  font-size: 16px;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  margin-left: -10.1%;
  opacity: 0;
  transition: opacity 0.5s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: white transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/*HOME.HTML*/
.body {
  color: white;
  position: relative; 
  margin: 70px auto;
  width: 100%;
  max-width: 800px;
  text-align: center;
}

.container-home {
  display: flex;
  width: 95%;
  margin: 0 auto;
}

/* LEFT SIDEBAR */
.scene {
  height: 576px;
  perspective: 600px;
}

.card {
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
  cursor: pointer;
  position: relative;
}

.card.is-flipped {
  transform: rotateY(180deg);
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card__face--back {
  background: transparent;
  transform: rotateY(180deg);
}

.container-left {
  flex: 1;
  height: 576px;
}

.sidebar {
  display: inline-block;
  width: 250px;
  height: 550px;
  border-color: white;
  border-style: double;
  text-align: center;
  padding: 10px;
}

#redlight {
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  width: 100% !important;.
  border-radius: inherit !important;
}

.updates {
  font-size: 14px;
  text-align: left;
  color: white;
  background-color: black;
  margin: 0 10px;
  line-height: 1.5;
}

#h2-updates {
  font-family: 'Aboreto', system-ui;
  font-weight: 400;
  font-style: normal;
  margin: 20px 0;
}

.upd-container {
  display: inline-block;
  height: 50%;
  width: 100%;
  overflow: auto;
  scrollbar-width: thin;
}

/* RIGHT SIDEBAR */
.container-right {
  flex: 1;
  height: 576px;
}

.home-info {
  display: inline-block;
  margin: 42% 0;
  text-align: center;
  max-height: 550px;
  padding: 0 30px;
}

#h1-info {
  text-align: center;
  font-family: 'Aboreto', system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 50px;
  margin: 10px 0px;
}

#h3-info {
  text-align: center;
  font-family: "Junge", cursive; 
  font-weight: 400;
  font-style: normal;
  font-size: 25px;
  margin: 10px 0px;
}

hr.dotted {
  border-top: 1px dotted white; 
  width: 50%;
}

/*BANNER*/
.banner {
  width: 100%;
  margin: 0 auto;
  position: relative;
  text-align: center;
  color: white;
}

.banner-main {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  height: 175px;
  border-color: white;
  border-style: double;
  text-align: center;
  padding: 10px;
}

.banner-img {
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
  border-radius: inherit;
}

.banner-header {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

#h1-banner {
  text-align: center;
  font-family: 'Aboreto', system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 65px;
  text-shadow: 5px 3px 3px black;
}

/*ABOUT.HTML*/
#h2-about {
  text-align: center;
  font-family: 'Aboreto', system-ui;
  font-weight: 400;
  font-style: normal;
  width: 95%;
  margin: auto;
}

.about-main {
  width: 100%;
  max-width: 800px;
  margin: 50px auto;
}

.p {
  display: inline-block;
  position: relative;
  text-align: justify;
  line-height: 2.1;
  width: 95%;
  font-family: "Junge", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
}

#p-links {
  color: white;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-evenly;
  font-size: 15px;
  margin: auto;
  width: 95%;
}  

a.about-link:link, a.about-link:visited {
  color: white;
  width: auto;
  padding: 10px 20px;
  display: inline-block;
  text-decoration: none;
  border-style: double;
  transition: 0.5s; 
}

a.about-link:hover, a.about-link:active {
  background-color: white;
  color: black;
  width: auto;
  text-decoration: none;
  border-style: double;
}  

/* OCS.HTML */  

/* OC CONTAINER LEFT */
.oc-img-container {
  /*float: left;*/
  margin: 50px auto;
  display: flex;
  /*align-items: center;*/
  justify-content: center;
  max-height: 301px;
}

.oc-img-space {
  display: inline-block;
  width: 275px;
  height: 275px;
  border-color: white;
  border-style: double;
  text-align: left;
  padding: 10px;
}

.oc-img {
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  /*width: 100% !important;*/
  border-radius: inherit !important;
}

.oc-text {
  float: left;
  padding: 0 20px;
  width: 499px;
  text-align: justify;
  margin: 0;
  overflow: auto;
  scrollbar-width: thin;
}

.oc-h2 {
  text-align: center;
  font-family: 'Aboreto', system-ui;
  font-weight: 400;
  font-style: normal; 
  font-size: 35px;
  margin: 0 auto;
}

/*OC SLIDEDOWN*/
.oc-banner-main {
  display: inline-block;
  width: 95%;
  box-sizing: border-box;
  height: 110px;
  border-color: white;
  border-style: double;
  text-align: center;
  padding: 10px;
}

#panel-lucien, #panel-cassio {
  display: none; 
  width: 95%;
  height: 500px;
  overflow: auto;
  margin: 30px auto 0 auto;
  text-align: justify;
  scrollbar-width: thin;
  font-size: 16px;
}

#h1-oc-banner {
  text-align: center;
  font-family: 'Aboreto', system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 50px;
  text-shadow: 5px 3px 2px black;
}

.oc-row {
  display: flex; 
  margin-bottom: 20px;
}

.oc-column {
  flex: 50%;
  padding: 0 10px;
}

.oc-p {
  padding: 0 10px; 
  margin: 0;
}

.oc-info {
  text-align: justify;
  width: 95%;
  padding: 10px;
  margin: 0 auto 30px auto;
  line-height: 1.5;
  font-size: 16px;
}

#oc-links {
  color: white;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-evenly;
  font-size: 15px;
  margin: 0;
} 

a.oc-link:link, a.oc-link:visited {
  color: white;
  width: auto;
  padding: 10px 20px;
  display: inline-block;
  text-decoration: none;
  border-style: double;
  transition: 0.5s; 
}

a.oc-link:hover, a.oc-link:active {
  background-color: white;
  color: black;
  width: auto;
  text-decoration: none;
  border-style: double;
}

/*STORY.HTML*/
.story-wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  height: 585px;
}

.toc {
  width: 30%;
  margin-top: 30px;
  padding: 10px;
  border-style: double;
  color: white;
  flex: 0 0 300px;
}

a.toc-entry:link, a.toc-entry:visited {
  color: white;
  transition: 0.5s;
  text-decoration: none;
}

a.toc-entry:hover, a.toc-entry:active {
  color: #52282C;
  text-decoration: none
}

.entries {
  width: 59.7%;
  margin: 30px 0 0 30px;
  padding: 10px;
  border-style: double;
  color: white;
  overflow: auto;
  scrollbar-width: thin;
  flex: 0 0 527px;
}

#toc {
  padding: 0;
  margin: 0 0 0 30px;
  list-style-type: '↳';
  text-align: left;
  font-size: 16px;
}

li span {
 position: relative;
 left: 10px;
}

.p-entry {
  margin: 10px;
  font-size: 16px;
  line-height: 1.3;
  text-align: justify;
  padding-top: 10px;
}

#ao3-link {
  color: white;
  display: inline-block;
  text-align: center;
  font-size: 15px;
  margin: 0;
} 

a.ao3-link:link, a.ao3-link:visited {
  color: white;
  width: auto;
  padding: 10px 20px;
  display: inline-block;
  text-decoration: none;
  border-style: double;
  transition: 0.5s; 
}

a.ao3-link:hover, a.ao3-link:active {
  background-color: white;
  color: black;
  width: auto;
  text-decoration: none;
  border-style: double;
}

.filler-img {
  width: 33.3%;
  margin-top: 30px;
  padding: 10px;
  text-align: center;
  border-style: double;
  border-color: white;
  box-sizing: border-box;
  flex: 0 0 190px;
}

#couple-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

/* MISC.HTML */
.grid-container {
  display: inline-grid;
  position: relative;
  grid-template-columns: auto auto;
  margin: 30px 0;
  gap: 30px;
  justify-content: space-evenly;
  align-content: space-evenly;
  max-width: 800px;
}

.misc-img {
  padding: 10px;
  text-align: center;
  border-style: double;
  border-color: white;
  box-sizing: border-box;
  display: inline-block;
  position: relative;
}

#city1, #city2, #city3, #city4 {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

.misc-header {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
}

#h1-misc {
  text-align: center;
  font-family: 'Aboreto', system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 50px;
  text-shadow: 5px 3px 2px black;
}

.misc-link {
  color: white;
  text-decoration: none;
}

/* BLOG.HTML */
.blog-toc {
  width: 25%;
  margin-top: 30px;
  padding: 10px;
  border-style: double;
  color: white;
  flex: 0 0 527px;
  overflow: auto;
  scrollbar-width: none;
}

.blog-entry {
  display: inline-block;
  height: 19px;
  width: 100%;
  padding: 10px 0;
  border-bottom: 1px dotted white;

}

a.blog-entry:link, a.toc-entry:visited {
  color: white;
  transition: 0.5s;
  text-decoration: none;
}

a.blog-entry:hover, a.toc-entry:active {
  color: #52282C;
  text-decoration: none
}   

#blog-toc {
  padding: 0;
  margin: 0 0 0 30px;
  list-style-type: '↳';
  text-align: left;
  font-size: 16px;
} 

#btn-2024 {
  width: 100%;
  height: 40px;
  background: #52282C;
  color: white;
  text-decoration: none;
  font-size: 18px;
  display: block;
  border: none;
  outline: none;
  cursor: pointer;
  font-family: "Junge", cursive; 
  font-weight: 400;
  font-style: normal;
}

#btn-2024:hover {
  background: white;
  color: black;
  transition: 0.5s;
}

#btn-2025 {
  width: 100%;
  height: 40px;
  background: #52282C;
  color: white;
  text-decoration: none;
  font-size: 18px;
  display: block;
  border: none;
  outline: none;
  cursor: pointer;
  font-family: "Junge", cursive; 
  font-weight: 400;
  font-style: normal;
}

#btn-2025:hover {
  background: white;
  color: black;
  transition: 0.5s;
}

#container-2024 {
  display:none;
} 

#container-2025 {
  display:none;
} 


.blog-entries {
  width: 64.7%;
  margin: 30px 0 0 30px;
  padding: 10px;
  border-style: double;
  color: white;
  overflow: auto;
  scrollbar-width: thin;
  flex: 0 0 527px;
}

/*MUSE.HTML*/
.muse-info {
  text-align: center;
  width: 95%;
  margin: 0 auto;
  line-height: 1.5;
  font-size: 20px;
}

.entry-header {
  width: 100%;
  text-align: center;
  color: white;
  position: relative;
  margin-top: 30px;
}

.eh-style {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  height: 85px;
  border-color: white;
  border-style: double;
  text-align: center;
  padding: 10px;
  background-color: #52282C;
  background-clip: content-box, padding-box;
}

.eh-header {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

#h2-eh {
  cursor: pointer;
  text-align: center;
  font-family: 'Aboreto', system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 28px;
  text-shadow: 5px 3px 2px black;
}

.muse-entry {
  display: none; 
  width: 95%;
  max-height: 400px;
  overflow: auto;
  margin: 30px auto 0 auto;
  text-align: justify;
  scrollbar-width: thin;
  font-size: 16px;
  line-height: 1.6;
  padding: 0 10px;
}

.muse-p {
  margin: 0;
}

.nanum-gothic-coding {
  font-family: "Nanum Gothic Coding", monospace;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
}


/*NOT_FOUND.HTML*/
.notfound-container {
  width: 100%;
  margin: 0 auto;
  position: relative;
  text-align: center;
  color: white;
}

.notfound-main {
  display: inline-block;
  width: 75%;
  text-align: center;
}

#tv {
  width: 100%;
}

.notfound-header {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
}

#tv-text {
  text-align: center;
  font-family: 'Aboreto', system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 60px;
  text-shadow: 5px 3px 3px black;
}

/* EXTRA */
.extra-wrapper {
  width: 100%;
  height: 600px;
  border: double white;
  margin: 30px 0;
  box-sizing: border-box;
}

.tab {
  float: left;
  background-color: black;
  width: 27%;
  height: 594px;
}

.tab button {
  display: block;
  background-color: black;
  color: white;
  padding: 10px;
  width: 100%;
  border: none;
  border-right: white double;
  border-bottom: white double;
  outline: none;
  font-size: 18px;
  text-align: left;
  cursor: pointer;
  transition: 0.5s;
  height: calc(100% / 6);
}

.tab button:hover {
  background-color: white;
  color: black;
}

.tab button.active {
  background-color: black;
  color: white;
  border-right: none;
}

.tabcontent {
  float: left;
  padding: 10px;
  border: 1px solid blue;
  width: 70.4%;
  border: none;
  height: 574px;
}

#overview {
  background: black url(images/hands.jpg) no-repeat top;
  background-size: 620px;
}

#overview h2 {
  margin: 0;
  padding: 0;
  position: absolute;
}

/* NEIGHBORS */
#btn {
  width: 88px;
  height: 31px;
}

#gifs {
  color: white;
  width: auto;
  padding: 10px 20px;
  display: inline-block;
  border: 3px double white;
  transition: 0.5s; 
  background-color: black;
  margin: 10px 10px;
  font-size: 15px;
}

#gifs:hover {
  background-color: white;
  color: black;
  width: auto;
  text-decoration: none;
  border: 3 px double white;
}

.buttons {
  width: 100%;
  margin: 10px;
}

/* MUSIC */
.music h2 {
  margin: 10px auto 20px auto;
  font-family: 'Aboreto', system-ui;
  font-weight: 400;
  font-style: normal;
}
.music-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.music-box {
  position: relative;
  aspect-ratio: 1/ 1;
  display: flex;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
  border: 3px double white;
  cursor: pointer;
}

.music-box .album-front, .music-box .album-back {
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  color: white;
  transition: 1s ease;
  backface-visibility: hidden;
  padding: 10px;
}

.music-box .album-back {
  transform: rotateY(180deg);
}

.music-box.album-flip .album-back {
  transform: rotateY(0deg);
}

.music-box.album-flip .album-front {
  transform: rotateY(-180deg);
}

.album-cover {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

.album-overlay {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px;
  opacity: 0;
  transition: .3s ease;
}

.music-box:hover .album-front:hover .album-overlay {
  opacity: 1;
}

.album-back {
  width: -moz-available;
}

.album-back h3 {
  margin: 10px;
  font-family: 'Aboreto', system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;

}

.album-back h4 {
  margin: 10px;
  text-decoration: underline;
  text-underline-offset: 5px;
  font-size: 16px;
}

.album-back p {
  overflow: auto;
  text-align: justify;
  margin: 18px 10px;
  font-size: 14px;
}

.album-flip {
  overflow: auto;
  scrollbar-width: thin;
}

.ribbon {
  width: 55px;
  height: 55px;
  font-size: 15px;
  line-height: 3.8;
  position: absolute;
  left: 10px; 
  top: 10px;
  text-align: center;
  border-radius: 25px;
  transform: rotate(-30deg);
  background-color: #52282C;
  color: white;
  box-shadow: 0 2px 5px black;
  border-radius: 50%;
  z-index: 100;
}