/*Mobile first view settings */
body {
  background-image: url("./images/generativeCranes.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  /*background: linear-gradient(to right, rgb(30 75 115 / 100%), rgb(255 255 255 / 0%));*/
  font-family:  sans-serif, Tahoma ;
  font-size: 18px;

}

.home-heading {
  color: white;
  text-shadow: 4px 4px black;
  letter-spacing: 2px;
  font-size: 4em;
  text-align: center;
 }

.nav-text {
  font-weight: bold;
  font-size: 1.6em;
  color: black;
  text-shadow: 1px 1px 2px white, 2px 2px 2px gray;
}

.nav-text-active {
  font-weight: bold;
  font-size: 1.6em;
  color: blue;
  text-shadow: 1px 1px 2px white, 2px 2px 2px gray;
}

.nav-transparency {
  background-color: rgba(255, 255, 255, 0.5); /* Black with 50% opacity */
 }
 
.home-content-filter {
  font-weight: 600;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);  
}

@keyframes slideInFromRight {
  from {
    transform: translateX(100%); /* Starts 100% off-screen to the right */
  }
  to {
    transform: translateX(0); /* Ends at its original position */
  }
}

@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%); /* Starts 100% off-screen to the left */
  }
  to {
    transform: translateX(0); /* Ends at its original position */
  }
}

@keyframes rotateImage {
      from {
        transform: rotate(0deg); opacity: 0; /* Starting rotation */
      }
      to {
        transform: rotate(360deg); opacity: 1;/* Ending rotation (one full turn) */
      }
}

.slide-right {
  animation-name: slideInFromRight;
  animation-duration: 1s; /* Adjust as needed */
  animation-timing-function: ease-out; /* Optional: for smoother animation */
  animation-fill-mode: forwards; /* Optional: keeps the element in its final state */
}

.slide-left {
  animation-name: slideInFromLeft;
  animation-duration: 1s; /* Adjust as needed */
  animation-timing-function: ease-out; /* Optional: for smoother animation */
  animation-fill-mode: forwards; /* Optional: keeps the element in its final state */
}


.logo-rotate{
  animation-name: rotateImage;
  animation-duration: 3s;
}

.list-lighter {
  font-weight: normal;
}

.custom-bullets-square {
  list-style-type: square;

}

.custom-bullets-square li::marker {
  color: #0dcaf0;
  font-size: 2em;

}


.footer-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.link-common {
  color: blue;
}

.link-common:visited {
  color: #3333FF;
}

.link-common:hover {
  color: purple;
}
#subscribe-button {
  background-color: #00AACC;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 8px 20px;
  margin-top: 6px;
  margin-bottom: 4px;
  font-size: 1.2em;
  cursor: pointer;
}
#subscribe-button:hover {
  background-color: #00BBCC;
}


.home-footer {
	/*background-color: #B13FE8;*/
	background: linear-gradient(90deg,rgba(123, 104, 238, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);
	border-top: 1rem solid #7B68EE;
	}

.home-final-link a{
	color: whitesmoke;
	}

.home-final-link a:link{
	color: whitesmoke;
	}
.home-final-link a:hover{
	color: hotpink;
	}
.home-final-link a:active {
	color: blue;
}


.screen-adapt {
  font-size: 10px;

}

.screen-adapt-less {
 font-size: 11px;
}

.wide-view{
  display: none;
}
.legend th, td {
  border-bottom: 1px solid #ddd;
}

/* small-medium phone view settings*/ 
@media (min-width: 390px){
.screen-adapt {
  font-size: 12px;
  font-weight: normal;
  
}
@media (min-width: 390px){
.screen-adapt-less {
  font-size: 13px;
  font-weight: normal;  
}

}


/* Large phone view settings*/ 
@media (min-width: 480px){
.screen-adapt {
  font-size: 14px;
  font-weight: normal;  
}
.screen-adapt-less {
  font-size: 16px;
  font-weight: normal;  
}

}


/* Tablet view settings */
@media (min-width: 768px){
.screen-adapt {
  font-size: 16px;
  font-weight: normal;
}
.screen-adapt-less {
  font-size: 17px;
  font-weight: normal;  
}
}

/* Desktop view settings */
@media (min-width: 992px){
.screen-adapt {
  font-size: 18px;
  font-weight: normal;
}
.screen-adapt-less {
  font-size: 18px;
  font-weight: normal;  
}
.narrow-view{
  display: none;
}
.legend {
 display: none;
 }
.wide-view{
  display: table-header-group;
}
}
/* Wide Desktop view settings */
@media (min-width: 1400px){
.screen-adapt {
  font-size: 18px;
  font-weight: normal;
  table-layout: fixed;
}
.screen-adapt-less {
  font-size: 18px;
  font-weight: normal;
}
.narrow-view{
  display: none;
}
.legend {
 display: none;
 }
.wide-view{
  display: table-header-group;
}
}