/* 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." */

@font-face {
  font-family: "kokoro";
  /* Name your font family */
  src: url('Love.ttf');
  /* Locate the .ttf file within your directory*/
}

#landing-header {
  cursor: url("cursor.cur"), auto;
  text-shadow: 1px 1px 2px white;
  font-size: 500%;
  color: mediumVioletRed;
  font-family: "kokoro";
  text-align: center;
}
@media (max-width: 1800px) {
  #landing-header {
   font-size: 200%;
  }
}
.container {
  display: grid;
  grid-template-areas:
    "header header"
    "menu content"
    "footer footer";
  grid-template-columns: (3, 1fr);
  grid-template-rows: (3, 1fr);
  gap: 3px;
  padding: 5px;
}

.grid-header {
  grid-column: 1 / 4;
  grid-row: 1/2;
  grid-area: header;
  position: relative;
  text-align: center;
}

.navbar {
  grid-column: 1 / 2;
  grid-row: 2 / 4;
  position: absolute;
  grid-area: menu;
  
}

.bottom-navbar {
  grid-column: 1 / 4;
  grid-row: 3 / 4;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #cefad0;
  height:9%;
  grid-area: footer;
  text-align: center;
}

.content {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  position: relative;
  grid-area: content;
}

@media (max-width: 1800px) {
 .content {
   font-size: 100%;
  }
}
.right-side{
  grid-column: 3 / 4;
  grid-row: 2 / 4;
  position: relative;
}

.overlay-text {
   grid-column: 2/4;
  grid-row: 2/4;
  position: absolute;
  top: 20%;
  /* Position from bottom */
  left: 34%;
  /* Position from left */
  padding: 10px;
  text-align: center;
  width: 30%;
}

.container div.footer {
  grid-area: footer;
  text-align: center;
}
@media (max-width: 850px) {
  .overlay-text {
    font-size: 10px;
  }
}

/* Media query for wider browser windows */
@media (min-width: 850px) {
  .overlay-text {
    font-size: 14px;
  }
}
a:link {
 border-color: pink;
  border-radius: 25px;
  cursor: url("cursor.cur"), auto;
  font-family: "kokoro";
  src: url('Love.ttf');
  color: pink;
  font-size: large;
  text-decoration: none;
}

a:visited {
  border: 10px solid;
  border-color: pink;
  cursor: url("cursor.cur"), auto;
  font-family: "kokoro";
  src: url('Love.ttf');
  color: green;
  font-size: large;
  text-decoration: none;
}

a:hover {
  border: 10px solid;
  border-color: pink;
  cursor: url("cursor.cur"), auto;
  font-family: "kokoro";
  src: url('Love.ttf');
  background-color: lightyellow;
  color: pink;
  font-size: large;
  text-decoration: none;
}

a:active {
  border: 10px solid;
  border-color: pink;
  cursor: url("cursor.cur"), auto;
  font-family: "kokoro";
  src: url('Love.ttf');
  color: pink;
  font-size: large;
  text-decoration: none;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  height: 100%;
  /* Full height */
  position: fixed;
  /* Make it stick, even on scroll */
  overflow: auto;

}

#CultofUsakumya {
  Alignment: center;
}

#cutie-club {
  Alignment: center;
}

a .bottom-navbar-link{
  border: 10px solid;
  border-color: pink;
  border-radius: 25px;
  background-color: #cefad0;
  list-style-type: none;
  font-size: 300%;
  margin: 0;
  padding: 0;
  position: sticky;
  overflow: auto;

}

li {
  position: relative;
  text-align: center;
  margin: 5px;
}

li a {
  z-index: 1000;
  position: relative;
  border: 10px solid;
  border-color: pink;
  border-radius: 25px;
  display: block;
  padding: 8px 16px;
  background-color: #cefad0;
}

.heart-background {
  background-color: #cefad0;
  background-image: url("heart.png");
  background-repeat: repeat;
  background-attachment: fixed;
}

.strawberry-cursor {
  cursor: url("cursor.cur"), auto;

}

#tree-img {
  width: 40%;
  border: 17px solid;
  border-color: pink;
  border-radius: 25px;
  top: 0;
}

#landing-img {
  max-height: 720px;
  border: 17px solid;
  border-color: pink;
  border-radius: 25px;
  top: 0;
}

#carousel {
  border: 17px solid;
  border-color: pink;
  border-radius: 25px;
  top: 0;
}

@media (max-width: 1800px) {
  #landing-img {
    max-width: 50%;
  }
}


.body {
  border-color: pink;
  display: block;
  text-shadow: 1px 1px 2px white;
  font-size: large;
  color: mediumVioletRed;
  font-family: "kokoro";
  text-align: center;
}

/* Container holding the image and the text */
.container {
  position: relative;
  text-align: center;
  color: mediumVioletRed;
}

.text-block {
  position: absolute;
  text-align: center;
  background-color: white;
  padding-left: 20px;
  padding-right: 20px;
}

* {box-sizing:border-box}
.mySlides {display: none;}
img {vertical-align: middle;}

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


/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: pink;
  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;
}

.prev {
  left: 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 */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: mediumvioletred;
  font-size: 16px;
  padding: 8px 12px;
  position: relative;
  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}
}