/* style.css */

@view-transition {
  navigation: auto;
}

html{
    background-color:black;
}

body {
  font-family:   "Crimson Text", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  color: white;
  margin: 0;
  padding: 0;
 /*background-image: url('https://liminalway.org/wp-content/uploads/2025/10/AdobeStock_85795393-scaled.webp');*/
  background-image: url('https://liminalway.org/wp-content/uploads/2025/10/light-dark-fade.png');
    background-size: 200%;
    background-position: -0% 0%;
    background-repeat:no-repeat;
}

img {
    padding:20px;
    border-radius: 60%;
}



a {
   color:rgb(164, 163, 163);
   text-decoration:none;
   border-bottom: 1px dotted;
}
h1 {
  color: #ffffff;
  font-family: "Crimson Text", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 3em;
  letter-spacing:5px;
  
}

h2 {

  font-family:  "Crimson Text", serif;
  font-weight: 400;
  font-size: 2em;
 
}
p {
  font-style: normal;
  font-size: 1em;
  line-height: 1.5em;
  padding-top:20px;
}

.sans {
    font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase; 
  letter-spacing: 3px;
}
.italic {
    font-family: "Crimson Text", serif;
  font-weight: 400;
  font-style: italic;
}

#nav p {
  padding-top:0px;
  width:80%;
 
 }

#nav a {
  border-bottom:none;
   font-size:1.3em;
     letter-spacing:2px;
      text-align:center;
}
  
#nav a:hover {
color:white;

}
.body-container {
   height: max-content;
   padding:5% 40% 5% 5%;

}

.subpage {
  background: radial-gradient(circle,rgba(255, 255, 255, 1) 81%, rgba(133, 133, 133, 1) 89%, rgba(0, 0, 0, 1) 100%);
  text-align:center;
  padding:10% !important;
}
.subpage a {
    color:rgb(92,92,92);
}
.subpage a:hover {
  color:#080808;
}

.inverse {
  color: #080808;
}

.special {
    color:rgb(164, 163, 163);
}

.announcement {
    background-color:black;
    padding:50px;
    font-size: 1.3em;
}

.copy {
    text-align:center;
    font-size: 0.8em;
    padding-top:40px;
    color:grey;
    font-style: italic;
}

.fade-in-onload {
  animation: fadeIn 3s forwards; /* Apply the fadeIn animation over 2 seconds */
}

.fade-in-onload2 {
  animation: fadeIn 8s forwards; /* Apply the fadeIn animation over 2 seconds */
  width:80%;
  margin:auto;
}

/* base */
.nav {
  position: relative;
}

.menu {
  display: none;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hamburger,
#menu-toggle {
  display: none;
}


@keyframes fadeIn {
  from { opacity: 0; } /* Start from fully transparent */
  to { opacity: 1; }   /* End at fully opaque */
}

/* Customize the default cross-fade duration and easing */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 1s; /* Adjust duration as needed */
  animation-timing-function: ease-in-out; /* Customize timing */
}

/* Optional: Define a specific fade animation */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

::view-transition-old(root) {
  animation: fade-out 4s ease-in-out forwards;
}

::view-transition-new(root) {
  animation: fade-in 3s ease-in-out forwards;
}

/* Styles for screens only, at 768px wide or less */
@media screen and (max-width: 768px) {
 
 .body-container {
   height: max-content;
   padding:5% 25% 5% 5%;

}
 
.subpage {
    background:radial-gradient(circle,rgba(255, 255, 255, 1) 92%, rgba(133, 133, 133, 1) 96%, rgba(0, 0, 0, 1) 100%);
} 

.announcement {
    padding:0px; 
}

#nav {
  display:none;
}

.menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    background: rgb(0, 0, 0);
    width: 100%;
    padding: 2.5rem;
    font-style:italic;
    text-decoration:none;
    
  }

  .menu a {
    border-bottom:none;
    color:white;
    font-size:1.3em;
  }

  #menu-toggle:checked + .hamburger + .menu {
    display: flex;
  }

  .hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding-top:10px;
  }

  .hamburger span {
    width: 25px;
    height: 2px;
    background: rgb(255, 255, 255);
    display: block;
  }
}