@import url('https://fonts.googleapis.com/css2?family=Averia+Serif+Libre&family=Montserrat:wght@200;600&display=swap');

body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: left;
  align-items:left;
  background-image: url('../Assets/extract1_jpg/water\ fin.jpg');
  margin: 0; /* Remove default margin to ensure full-page coverage */
  padding: 0; /* Remove default padding to ensure full-page coverage */
  background-size: cover; /* This ensures the background image covers the entire container */
  background-repeat: no-repeat; /* This prevents the background image from repeating */
  background-attachment: fixed; /* This keeps the background image fixed when scrolling */
  overflow: hidden;
  cursor: auto;
  word-spacing: 0;
  margin: 0; /* Remove default margin to ensure full-page coverage */
  padding: 0; /* Remove default padding to ensure full-page coverage */
  letter-spacing: 1px;
}

.ac-climate-font {
  font-family: 'Montserrat', sans-serif;
  font-size: 42px;
  letter-spacing: 10px;
  span:nth-child(1) {
    font-weight: 200;
  }

  span:nth-child(2){
    font-weight: 600;
  }
}

.climate-font {
  margin-left: -5%;

}

/* ACCLIMATE style */
.title_animation{
  font-size: 32px;
  color: #808080;
  letter-spacing: 12px;
  filter: blur(5px); /* Apply initial blur effect */
  padding-left: 20%;
  padding-top: 0%;
  padding-bottom: 0%;
  margin-top: 0%;
  margin-bottom: 0%;
  
  position: relative;
  transition: font-size 2s, filter 2s; /* Add transition for font-size and filter properties */
}

/* ACCLIMATE style on hover */
.title_animation:hover {
  font-size: 48px; /* Zoom in to 48px on hover */
  color: white;
  filter: blur(0); /* Remove blur on hover to make it clear */
}

/* Center the text vertically */
.title_animation::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

/* Position the link at the center of the page */
.title_animation > span {
  display: inline-block;
  vertical-align: middle;
}


/* A tag #nopurple_afterclick */
a {color:#808080;}         /* Unvisited link  */
a:visited {color:#ffffff;} /* Visited link    */
a:hover {color:#808080;}   /* Mouse over link */
a:active {color:#808080;}  /* Selected link   */