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

body {
  background-color: #ffe5ec;
  color: black, #ffc2d1;
  font-family: 'Snell Roundhand', cursive;
}

/* Called the CLASSNAME "container", "header" , "content" , "model" */

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2px;
  padding: 5px;
}

.header {
 text-align: center;
 font-weight: bold;
 grid-area: 1 / span 5;
}
/* About Me section */
.content {
  grid-area: 3 / span 5;
}

/* About Me section */
.model {
 grid-area: 2/ 1/ span 5;
}


@media (min-width: 576px) {
  .crush {
    grid-area: 5/ 7;
  }
  .ads {
    grid-area: 3 / span 2;
    box-sizing: border-box;
  }
  .footer {
    grid-row: 6;
  }
}

/* Called "hisayo" and "vergil" ID using a "#" */
#hisayo 
{
  object-fit: cover;
  object-position: 50% 90%;
  background-repeat: no-repeat;
  width: 90%;
  height: 200%;
}
  
#vergil {
  border-radius: 8px;
  max-width: 200px;
  max-height: 200px;
}

/* nAVIGATION BAR design */
  .topnav {
  overflow: hidden;
  background-color: #fb6f92;
  grid-column: 2 / span 4;
  gap: 20px;

}
.topnav a {
  float: left;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 30px;
}

.topnav a:hover {
  background-color: white;
  color: black;
}

.topnav a.active {
  background-color: #ff8fab;
  color: white;
}

/* search BAR design */
.topnav .search-container {
  float: right;
  padding: 14px 16px;
  height: auto;
  width: 300px;
}

.topnav input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 20px;
  border: none;
  font-family: 'Snell Roundhand', cursive;
  color: black; 
}

.topnav .search-container button {
  color: white;
  float: right;
  padding: 14px 16px;
  margin-top: auto;
  margin-right: 20px;
  margin-left: 5px;
  height: -0%;
  width: -0%;
  background: #fb6f92;
  font-size: 20px;
  border: none;
  cursor: pointer;
  mix-blend-mode: lighten;
}

.topnav .search-container button:hover {
  background: white;
  color: black;
}

@media screen and (max-width: 600px) {
  .topnav .search-container {
    float: none;
  }
  .topnav a, .topnav input[type=text], .topnav .search-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 20px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;  
  }
}
/* SLIDESHOW design */

.slideshow {
  position: relative;
  margin: auto;
  max-width: 420px;
}

.myAds {
  display: none;
}

.myAds img {
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
  border-radius: 10px;
}

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

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}