/* zenrebelrocks zstyle.css */

@property --gradient-angle  {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes rotation {
  from {
    --gradient-angle: 0deg;
  }
  to {
    --gradient-angle: 360deg;
  }  
}

:root {

--clr-1: #302d2d;
--clr-2: #242121;
--clr-3: #85d310;
--clr-4: #79964d;
--clr-5: #d3e8b5;
--clr-6: #f0f0f0;
--clr-7: #1a1a1a;
--clr-8: #0d0d0d;
--clr-9: #ffffff;
--clr-10: #000000;
--clr-11: #181818;
--clr-12: #3e3b3b;
--clr-20: #f6b26f;
--clr-21: rgb(53, 53, 137);
--clr-22: rgb(58, 56, 56);
--clr-23:rgb(230, 88, 5);
--clr-24:rgb(0, 195, 255);
--clr-fir: rgb(28, 206, 147);


}
html {
  box-sizing: border-box;
  scroll-behavior: smooth;
  color-scheme: dark light;
}

body {
  font-family: system-ui, Arial, sans-serif;
  /* background-color: var(--clr-12); */
  background-color: var(--clr-10);
  min-height: 90vh; /*backwards compatibility*/
  min-height: 90svh;
  text-align: left;
 /*  max-width: 100%;
  overflow-x: hidden; */
  /* overflow-y: hidden; */
  line-height: 1.5;
  display: grid;
  place-content: start center;
  margin-top: -2rem;
/* background-image: url(../imgs/hazel.png);
  background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top;
    background-size: middle 100vh; */
  
}

.topimage {
  width: 100%;
  height: auto;
  margin-top: -2rem;
  margin-bottom: -2rem;
  z-index: 1;
}

  p {
    font-size: 1rem;
    color: whitesmoke;
    text-align: left;
    margin: 1rem 2rem;
    z-index: 1;
  }



  /* contact form styles */
form {
  display: flex;
  flex-direction: column;
  width: 80;
  gap: 1rem;
  margin: 1rem 2rem;
  z-index: 1;
}

.button1 {
  background-color: var(--clr-fir);
  color: var(--clr-10);
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

/* styles for cards */

.card1 {

  height: 100vh; /*backwards compatibility*/
height: 70svh;
aspect-ratio: 1 / 1.25; 
background-color: var(--clr-12);
border-radius: 1rem;
border-left: 0px solid var(--clr-12);
border-bottom: 0px solid var(--clr-12);
position: relative;
margin-top: 2rem;
}


.card1::before,
.card1::after {
  content: "";  
  position: absolute;
inset: -0.5rem;
z-index: -2;
  background: conic-gradient(
from var(--gradient-angle),
    var(--clr-6),
    var(--clr-24),
    var(--clr-6),
    var(--clr-24),
    var(--clr-6));

  border-radius: inherit;
  animation: rotation 5s linear infinite;
    filter: blur(1rem);
  } 


.card2 {

  height: 70vh; /*backwards compatibility*/
height: 70svh;
aspect-ratio: 1 / 1.25; 
background-color: var(--clr-12);
border-radius: 1rem;
border-left: 0px solid var(--clr-12);
border-bottom: 0px solid var(--clr-12);
position: relative;
margin-top: 2rem;
}


.card2::before,
.card2::after {
  content: "";  
  position: absolute;
inset: -1.5rem;
z-index: -2;
background-image: url(../imgs/fir.jpg);
  /* background: conic-gradient(
from var(--gradient-angle),
    var(--clr-6),
    var(--clr-24),
    var(--clr-6),
    var(--clr-24),
    var(--clr-6)); 
    
    
    animation: rotation 5s linear infinite;
    
    */

  border-radius: inherit;
  
    /* filter: blur(1rem); */
  } 

  .wrapper {
    max-width: 50rem;
  margin-inline: auto;
  padding-inline: 1rem;
  background-color: var(--clr-12);
  }


  section {
    padding-block: 0rem;
    z-index: 1;
    /* background: var(--clr-3);*/
  }


  
  .site-title {
    font-size: 1.5rem;
    color: whitesmoke;
    text-align: center;
    z-index: 1;

  } 

  .section-title {
    font-size: 1.25rem;
    color: var(--clr-9);
    text-align: left;
    z-index: 1;
      --skew-angle: 0deg;
  position: relative; 
  isolation: isolate;
  padding: 0.5rem;
  border-radius: 0.5rem;
  border-bottom: 0;
  background-image: linear-gradient(
      45deg,
      var(--clr-10),
      var(--clr-10),
      var(--clr-10),
      var(--clr-10),
       var(--clr-12),
            var(--clr-12)
    );

  }


/* Section: Navigation Styles */

nav {
width: fit-content;
margin: 3rem auto 0;
background: hsl(0 0% 0% / 0.8);
padding: 0.5px;
border-radius: 8px;
isolation: isolate;
/* font-size: .8; */

/* position: relative; */

anchor-name: --hovered-link;

li:hover {
  anchor-name: --hovered-link;
}

&::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(anchor(bottom) - 10px);
  left: calc(anchor(left) + 0.8rem);
  right: calc(anchor(right) + 0.8rem);
  bottom: calc(anchor(bottom) + 5px);
  /* height: 6px; */
  background: var(--clr-fir); /* background color for links in nav header */
  border-radius: 10px;

position-anchor: --hovered-link;
/* transition: 300ms; */

/* easing wizard for below at easingwizard.com */
transition: 1000ms linear(0, 0.029 1.6%, 0.123 3.5%, 0.651 10.6%, 0.862 14.1%, 1.002 17.7%, 1.046 19.6%, 1.074 21.6%, 1.087 23.9%, 1.086 26.6%, 1.014 38.5%, 0.994 46.3%, 1);

  }

  &:has(a:hover)::after {
  top: anchor(top);
  left: anchor(left);
  right: anchor(right);
  bottom: anchor(bottom);
  }


@supports (corner-shape: squircle) {
  border-radius: 24px;
  corner-shape: squircle;
  /* border-radius: 50%; */
} 
> ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
}

a {
  display: block;
  padding: 0.8rem;
  color: var(--clr-9);
  text-decoration: none;
  font-weight: bold;

  &:hover {
    color: black;
  }
  
}
}