/* Home page */
/* Background */
body, html {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: impact, impact-w01-2010, impact-w02-2010, impact-w10-2010, sans-serif;
}
.blur-bg {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0; left: 0;
  z-index: -1;
}
.gradient {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.6;
}
.gradient.one {
  width: 300rem; height: 60rem;
  left: -150rem; top: -20rem;
  background: radial-gradient(circle, rgb(6, 127, 6), transparent 50%);
  z-index: -2;
}
.gradient.two {
  width: 300rem; height: 60rem;
  right: -150rem; top: -20rem;
  background: radial-gradient(circle, #e4b16b, transparent 50%);
  z-index: -3;
}
.gradient.three {
  width: 1000rem; height: 60rem;
  left: -450rem; bottom: -40rem;
  background: radial-gradient(circle, #7084e8, transparent 30%);
}

/* Content */
.content_home {
    margin: 12vh 20vw;
    opacity: 1;
    transition: opacity 0.5s ease;
    /* border: 1px solid black; */
}

/* Logo */
.logo_container img {
    top: 10vh;
    left: 10vw;
    width: 20%;
    height: auto;
    z-index: 1; 
    /* border: 1px solid black; */
}

/* Carousel */
.photo_container {
    position: relative;
    width: 25vw;
    height: 70vh;
    overflow: hidden;
    margin: auto;
    z-index: 0;
    margin-top: -10vh;
    /* border: 1px solid black; */
}
.carousel {
    display: flex;
    transition: transform 1s ease-in-out;
}
.carousel img {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Site Title */
.title_tagline {
  /* border: 1px solid black; */
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  cursor: pointer;
}
.title_container {
    text-align: center;
    font-size: 10rem;
    font-weight: bold;
    white-space: nowrap;
    margin: 0;
}
#over_flag {    
    background: url('pages/images/utilities/flag2.png') no-repeat center;
    background-size: 100% 70%;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}
#no_flag {
    color: rgb(23, 13, 242);
    display: inline-block;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

/* Tagline */
.tagline {
    margin: 0;
    color: rgb(23, 13, 242);
    font-size: 2rem;
    font-weight: normal;
    font-family: madefor-display,helveticaneuew01-45ligh,helveticaneuew02-45ligh,helveticaneuew10-45ligh,sans-serif;
    text-align: right;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

/* Acknowledgement of Country */
#acknowledgement_country {
    font-family: madefor-display,helveticaneuew01-45ligh,helveticaneuew02-45ligh,helveticaneuew10-45ligh,sans-serif;
    font-weight: lighter;
    padding-left: 1rem;
    /* border: 1px solid black; */
    text-align: center;
    width: 80%;
    margin: 0 auto;
}
/* Transition */
.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* For phone screens */
@media (max-width: 800px) {
    /* Reset & Base */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      font-family: impact, impact-w01-2010, impact-w02-2010, impact-w10-2010, sans-serif;
      color: white;
    }

    /* Layout container */
    .content_home {
      top: 0%;
      transform: translateY(-10%);
      justify-self: center;
      width: 95vw;
      height: 95vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 1rem;
      text-align: center;
      /* border: 1px solid black; */
      padding-bottom: 2rem;
    }

    /* Logo */
    .logo_container img {
      width: 35vw;
      max-width: 250px;
      height: auto;
      margin: .5rem auto;
      display: block;
      justify-content: center;
      transform: translateX(1%);
    }

    /* Carousel wrapper */
    .photo_container {
      position: relative;
      width: 65vw;
      height: 60vh;
      justify-content: center;
      aspect-ratio: 3/4; 
      overflow: hidden;
      margin: 1rem auto;
      border-radius: .5rem;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25), 
                  0 4px 8px rgba(0, 0, 0, 0.15);
    }

    .carousel {
      display: flex;
      width: 100%;
      height: 100%;
      transition: transform 0.6s ease-in-out;
    }

    .carousel img {
      flex: 0 0 100%;             
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;   
    }

    .carousel img.active {
      display: block;
    }

    /* Text over carousel */
    .text_container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -40%);
      width: 90vw;
      padding: 0 1rem;
      color: white;
      text-shadow: 1px 1px 3px rgba(0,0,0,0.9);
    }

    .title_container {
      /* border: 1px solid black; */
      width: 80vw;
      justify-self: center;
      font-size: 2.5rem;
      font-weight: bold;
      margin-bottom: 0.5rem;
      white-space: nowrap;
      text-align: justify;
      text-shadow: 2px 2px 5px rgba(0,0,0,0.8);
    }

    #over_flag {    
      background: url('pages/images/utilities/flag2.png') no-repeat center;
      background-size: 100% 70%;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    #no_flag {
      color: rgb(23, 13, 242);
    }

    .tagline {
      font-size: clamp(1rem, 4vw, 1.5rem);
      font-weight: normal;
      margin-top: 0.5rem;
      text-shadow: 1px 1px 3px rgba(0,0,0,0.8);

      transform: translateY(10%);
    }

    /* Acknowledgement */
    #acknowledgement_country {
      display: block;
      justify-self: center;
      margin-top: 1rem;
      font-size: clamp(0.9rem, 3vw, 1.1rem);
      line-height: 1.5;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
      text-align: justify;
      font-family: madefor-display, helveticaneuew01-45ligh,
                  helveticaneuew02-45ligh, helveticaneuew10-45ligh, sans-serif;
      font-weight: lighter;
      color: rgb(0, 0, 0);
      text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
      margin-bottom: 2rem;
    }
}