/* Root and themes itemes */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+Display:wght@300&family=Rubik:wght@400;500;700&display=swap");
:root{
--bg-color : #0d3642;
--bg-color-2nd : #145564;
--alternate-color : #b7cf81;
--light-bg : white;
--dark-bg : #202020;
--icon-color : #FFDE59;
--nav-hover : rgba(0,0,0, 0.6);
--content-container : #E7EEEF;
}
.landing{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: auto;
  min-height: calc(100vh - 150px);
  transition: height 0.5s ease;
}
.land-fig{
  display: flex;
  height: auto;
}
.land-fig img {
  min-width: 275px;
  width: 30vw;
  height: 30vh;
  object-fit: cover;
}
.land-about{
  height: auto;
  width: 100%;
  text-align: center;
}
.land h3{
  color: var(--bg-color);
}
.land-welcome{
  font-size: 6vh;
  font-weight: bold;
  color: var(--bg-color);
  text-transform: uppercase;
}
.land-2nd-line{
  font-size: 4vh;
  color: var(--bg-color);
}
.A-litter,.Z-litter {
  color: var(--alternate-color);
  font-size: 5vh;
  -webkit-text-stroke-color: var(--bg-color);
  -webkit-text-stroke-width: 0.25vh;
  transition: 0.5s;
}
.A-litter:hover,.Z-litter:hover {
  color: var(--bg-color);
  font-size: 5vh;
  -webkit-text-stroke-color: var(--bg-color);
  -webkit-text-stroke-width: 0.25vh;
}
.land-info{
  font-size: 4vh;
  font-weight: bold;
  color: var(--bg-color);
  transition: 0.5s;
}
.land-info:hover{
  font-size: 4vh;
  font-weight: bold;
  color: var(--alternate-color);
}
.land-btns{
  height: auto;
  width: 80vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5%;
}
.land-btn{
  background-color: #0d364200;
  width: 22.5%;
  height: 50px;
  min-width: 100px;
  border-radius: 15px;
  border-color: var(--bg-color);
  border-style: solid;
  color: var(--bg-color);
  font-weight: 600;
  cursor: pointer;
  transition: 0.25s;
}
.land-btn:hover{
  box-shadow: 1px 1px 10px #555;
  background-color: var(--bg-color);
  border-radius: 25px;
  color: #fafafa;  
}

@media (max-width: 768px) and (max-width: 1200px) and (min-height: 700px) {
  .land-fig img{
    width: 50vw;
    height: auto;
  }
  .land-welcome {
    font-size: 5vh;
  }
  .land-2nd-line {
    font-size: 3.5vh;
  }
  .land-info {
    font-size: 3.5vh;
  }
  .land-info:hover {
    font-size: 3.5vh;
  }
  .land-btns{
    display: flex;
    flex-direction: column;
    gap: 2.5vh;
  }
  .land-btn {
    width: 70%;
    height: 45px;
    font-size: large;
  }
}
@media (max-width: 960px) and (max-height: 540px) {
  .landing {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: auto;
    transition: height 0.3s ease;
  }
  .land-fig {
    display: none;
  }
  .land-about{
    height: auto;
  }
  .land-welcome {
    font-size: 16px;
  }
  .land-2nd-line {
    font-size: 14px;
  }
  .land-info {
    font-size: 12px;
  }
  .land-btns {
    flex-direction: column;
    gap: 5px;
    width: 100%;
  }
  .land-btn {
    width: 30%;
    height: 50px;
    font-size: 12px;
  }
}
@media (max-width: 768px) {
  .landing {
    transition: height 0.3s ease;
    height: auto;
  }
  .land-fig{
    height: auto;
    display: flex;
    justify-content: center;
  }
  .land-fig img {
    width: 40vw;
    height: auto;
  }
  .land-about{
    height: auto;
  }
  .land-welcome {
    font-size: 4.5vh;
  }
  .land-2nd-line {
    font-size: 3vh;
  }
  .land-info {
    font-size: 3vh;
  }
  .land-info:hover {
    font-size: 3vh;
  }
  .land-btns {
    height: auto;
    flex-direction: column;
    gap: 15px;
  }
  .land-btn {
    width: 70%;
    height: 45px;
  }
}
@media (max-width: 480px) {
  .landing{
    height: auto;
    transition: height 0.3s ease;
    min-height: calc (100vh - 175px);
  }
  .land-fig{
    height: auto;
    width: 100vw;
  }
  .land-fig img{
    height: max-content;
    width: 40vh;
    height: 25vh;
  }
  .land-about{
    height: auto;
  }
  .land-welcome {
    font-size: 4vh;
  }
  .land-2nd-line {
    font-size: 2.5vh;
  }
  .A-litter,.Z-litter {
    font-size: 3.5vh;
    -webkit-text-stroke-width: 0.15vh;
  }
  .A-litter:hover,.Z-litter:hover {
    font-size: 3.5vh;
    -webkit-text-stroke-width: 0.15vh;
  }
  .land-info {
    font-size: 2.5vh;
  }
  .land-info:hover {
    font-size: 2.5vh;
  }
  .land-btns{
    height: auto;
  }
  .land-btn {
    width: 80%;
    height: 50px;
  }
}
@media (max-width: 275px){
  .landing{
    transition: height 0.3s ease;
    height: auto;
  }
  .land-fig {
    display: none;
  }
}