body { 
  background-color: #F6F7EC
}
html, body{
  margin: 0;
}

h2{
  color:#0d2b44;
  text-align: center;
}

/*Hero image section*/
.hero-image {
  background-image: linear-gradient(rgba(243, 208, 221, 0.5), rgba(0, 0, 0, 0.5)), url("Images/Pinktree.webp");
  height: 500px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgb(49, 31, 5);;
  font-family: 'Apple Chancery', serif;
}

h1 {
  color: #072a47;
  text-align: center;
  font-size: x-large;
}

.hero-text button {
  border: none;
  border-radius: 60%;
  outline: 0;
  display: inline-block;
  padding: 15px 25px;
  color: #CFB893;
  background-color: #011627;
  text-align: center;
  cursor: pointer;
  transition-duration: 0.4s;
}

.hero-text button:hover {
  background-color: #9DC7E4;
  color: #A55166;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
/*End of hero section*/

/* navbar with section buttons */
.topnav {
  position:sticky;
  top:0;
  overflow: hidden;
  background-color: #AC7B78;
  z-index: 999;
  display: flex;
  justify-content: center;
  gap: 50px;
}

.topnav a {
  float: Right;
  color: #2D1910;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-family: 'Apple Chancery';
}

.topnav a:hover {
  background-color: #F5DEB3;
  color: #B37152;
}

.topnav a.active {
  background-color: #011627;
  color: #CFB893;
}

.topnav a.active:hover {
  background-color: #9DC7E4;
  color: #A55166;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
/*The end of navbar*/

/*This is to style the back to top button*/
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #011627;
  color: #AC7B78;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #91daff;
}
/*This is the end of back to top styling.*/

/*The begining of the about me section*/
#about {
  padding: 20px 30px 50px;
  border: 2px solid #eab6b3;
  background-color: #f3e4ca;
  height: 400px;
}
#about img {
  float: left;
  clip-path: circle(40%);
  shape-outside: circle(45%);
}
#about h2{
  font-family: Georgia, serif;
  color: #072a47;
  text-align: center;
  padding-right: 210px;
}
#about p{
  font-size: large;
  font-family: Georgia, 'Times New Roman', Times, serif;
  color: #1d0a02;
  text-align: center;
  padding: 10px;
}
/*The end of the about me section*/

/*The begining of the skills and experience section with modals*/
#skills {
  background: radial-gradient(circle,rgba(238, 174, 202, 1) 0%, rgba(137, 230, 245, 1) 100%);
  height:1200px;
  padding: 30px;
}

.intro{
  text-align: center;
  font-size: large;
}

.title {
  color: rgb(95, 57, 57);
}

/* cards in skill section*/
.card {
  box-shadow: 0 4px 8px 0 rgba(7, 5, 113, 0.2);
}
.card p{
  text-align: center;
}
.container {
  padding: 0 16px;
}

.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 20px;
  border: 4px solid #888;
  border-radius: 10px;
  width: 80%;
  max-width: 600px;
  box-shadow: 0 0 10px black;
  font-size: large;
}

/*Card Button*/
.button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

.button:hover {
  background-color: #555;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
/*The end of skills section*/

/*The begining of the Non-fiction section*/
.write {
  background: rgb(247, 230, 238);
  padding: 10px;
}

.tales{
  text-align: center;
  text-indent: 1em;
  padding: 40px 10px;
  display:inline-block;
  border-radius: 20px;
  box-shadow: 0 0 10px #34a6db;
  border:2px solid #130338 ;
  height: 90px;
  font-size: large;
  background: linear-gradient(180deg, rgb(233, 126, 149), lightskyblue)
}
h4{
  text-align: center;
  color: #011627;
  font-size: large;
}

.button-row {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  gap: 20px; /* spacing between buttons */
  padding: 40px;
}

/*Iridescent buttons*/
.bubble-btn {
  position: relative;
  padding: 0.75em 1.5em;
  font-size: 1rem;
  color: #A55166;
  background:  #031536;
  border: 10px #0d2b44;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.3s;
  width: 200px;
  height: 200px;
  box-shadow: 0 4px 8px #072a47;
}
.iridescent {
  background: linear-gradient(
    60deg,
    #799df1 5%,
    #60c1ec 15%,
    #7bd9de 25%,
    #cfb0d2 35%,
    #799df1 45%,
    #60c1ec 55%,
    #7bd9de 65%,
    #cfb0d2 75%,
    #799df1 85%,
    #60c1ec 95%,
    #7bd9de 100%
  );
  background-size: 200% 200%;
  animation: iridescent-shift 8s infinite;
}

/* Ripple shadow on hover */
.bubble-btn:hover {
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}

@keyframes iridescent-shift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}
/* Bubble hover effect from previous example */
.bubble-btn:hover {
  background: #91daff;
}
.bubble-btn::before,
.bubble-btn::after {
  content: "";
  position: absolute;
  background: rgba(255,255,255,0.3);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.6s;
}
.bubble-btn::before {
  width: 200%; height: 200%;
  top: -50%; left: -50%;
}
.bubble-btn::after {
  width: 50%; height: 50%;
  bottom: -25%; right: -25%;
}
.bubble-btn:hover::before {
  transform: scale(0);
  opacity: 1;
}
.bubble-btn:hover::after {
  transform: scale(3);
  opacity: 1;
}

/* Staggered vertical offsets */
.bubble-btn:nth-child(1) { margin-top:   0px; }
.bubble-btn:nth-child(2) { margin-top:  10px; }
.bubble-btn:nth-child(3) { margin-top:  20px; }
.bubble-btn:nth-child(4) { margin-top:  30px; }
.bubble-btn { position: relative; overflow: hidden; }
.bubble-btn .ripple {
  position: absolute;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 0.6s ease-out;
}
@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}
.bubble-btn {
  opacity: 0;
  transform: translateY(20px);
}
/*The end of the non-fictions section*/

/*Begining of Hobbies section*/
.fun {
  background-color: #2D1910;
  padding: 10px;
}
.fun h2{
  color: #AC7B78;
  padding: 10px;
  font-family:Georgia, serif ;
  text-align: center;
}
.fun p{
  color: lightskyblue;
  font-size: large;
  text-align: center;
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: #60c1ec;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Caption text */
.text3 {
  color: white;
  font-size: 18px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 14px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
*{
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.column {
  float: left;
  width: 32%;
  margin-bottom: 16px;
  padding: 0 8px;
}

@media screen and (max-width: 650px) {
  .column {
    width: 100%;
    display: block;
  }
}
/*The end of the hobbies section*/