@font-face {
    font-family: 'Fern';
    font-style: normal;
    font-weight: normal;
    src: url(fonts/FernText-Regular-Testing.woff) format('woff');
    src: url(fonts/FernText-Regular-Testing.woff2) format('woff2');

}
@font-face {
    font-family: 'Portrait';
    font-style: normal;
    font-weight: normal;
    src: url(fonts/PortraitText-Regular-Trial.otf) format('truetype');
}

:root {
  --container-w-val: 100;
  --container-h-val: 200;
  --container-w: calc(var(--container-w-val) * 1vw); 
  --container-h: calc(var(--container-h-val) * 1vh);
  --logo-w: 20vw;
  --logo-h: 10vw;
  --duration-y: 10s;
  /* Calculate the aspect ratio as a pure unitless number */
  --aspect: calc(var(--container-w-val) / var(--container-h-val));
  
  /* Use the unitless aspect number to scale the duration */
  --duration-x: calc(var(--duration-y) * var(--aspect)); 
}

@keyframes x {
  from { left: 0; }
  to { left: calc(100% - var(--logo-w)); }
}

@keyframes y {
  from { top: calc(100% - var(--logo-h)); }
  to { top: 0; }
}

@keyframes colorX {
  from { --color--x: 0; }
  20% { --color-x: 2; }
  40% { --color-x: 4; }
  60% { --color-x: 1; }
  80% { --color-x: 3; }
  to { --color-x: 0; }
}

@keyframes colorY {
  from { --color-y: 0; }
  20% { --color-y: 2; }
  40% { --color-y: 4; }
  60% { --color-y: 1; }
  80% { --color-y: 3; }
  to { --color-y: 0; }
}

.logo {
  position: absolute;
  width: var(--logo-w);
  height: var(--logo-h);
  animation:
    x var(--duration-x) linear infinite alternate,
    y var(--duration-y) linear infinite alternate,
    colorX calc(var(--duration-x) * 5) step-start infinite,
    colorY calc(var(--duration-y) * 5) step-start infinite;
  color:
    hsl(calc(
      360 / 25 * (var(--color-y) * 5 + var(--color-x)) * 1deg
    ) 100% 75%);
    mix-blend-mode: overlay;
    /*     mix-blend-mode: color-dodge; */
}

.animate-width-variable {
  width: calc(var(--width) * 1%);
  animation: frames 1s linear infinite alternate;
}
body {
    background-color: #1a1a1a;
    color: #bbb;
    margin: 0;
    font-family:'Fern';
    font-optical-sizing: auto;
    font-weight:normal;
    font-style:normal;
    font-size:17px;
    line-height:22px;
}
img {
    width: 100%;
    filter:drop-shadow(0px 0px 32px #222) grayscale(100%);
}
video {
    width: 100%;
    filter:drop-shadow(0px 0px 32px #222) grayscale(100%);
}
p {
    margin: 0px;
    margin-bottom: 17px;
}
a {
    color: #bbb;
    transition: color 0.75s, border-color 0.75s;
    &:hover { transition:color 0.5s, border-color 0.75s; color: white; border-color: #bbb;}
    text-decoration: none;
    border-bottom: solid;
    border-width: 1px;
    border-color: #666;

}
a.external {
    /* text-decoration: underline dotted; */
    transition: color 0.75s, border-color 0.75s;
    text-decoration: none;
    border-bottom: dotted;
    border-width: 1px;
    border-color: #999;
    &:hover { transition:color 0.5s, border-color 0.75s; color: white; border-color: white;}
}
a img{
    transition: filter 0.5s, transform 0.5s ;  
    &:hover { transition:filter 0.5s transform 0.5s ; filter:drop-shadow(0px 0px 48px #111) ; transform:scale(1.01) ;
    }
}
a:has(img) {
    border: none;
}
a:has(video) {
    border: none;
}
a video{
    transition: filter 0.5s, transform 0.5s ;  
    &:hover { transition:filter 0.5s transform 0.5s ; filter:drop-shadow(0px 0px 48px #111) ; transform:scale(1.01) ;
    }
}
hr {
    border: none;
    border-top: 1px dotted #777;
}
pre {
    font-size:0.8em;
    a {
        color: hotpink;
        transition: color 0.75s, border-color 0.75s;
        &:hover { transition:color 0.5s, border-color 0.75s; color: white; border-color: #bbb;}
        text-decoration: none;
        border-bottom: solid;
        border-width: 1px;
        border-color: hotpink;
    }
}

main {
    overflow: hidden;
    position: relative;
    width: calc(var(--container-w) * 1px);
    height: calc(var(--container-h) * 1px);
    margin: auto;
}

.highlight {
    background-color: black; 
    padding: 6px;
    /* color: hotpink; */
}
.quote {
    padding: 2lvh 8lvh 2lvh 4lvh;
}
.disclaimer {
    display: none;
}
.notes {
    font-size: 0.75em;
}
.what {
    position: relative;
    padding-top: 4lvh;
    padding-bottom: 10lvh;
    transition: display 2s ease-in;
}
.what::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-size: cover;
    /* background-image: url('images/marinatowers_rot.jpg'); */
    background-repeat: no-repeat;
    background-position: center;
    /* i can't figure out how to rotate an image and still have it cover the entire background - help */
    /* transform: rotate(90deg); */ 
    filter: grayscale(80%) contrast(40%) brightness(35%);
    z-index: -1; /* Place behind the content */
}
.once {
    transition: color 1s, opacity 1s, transform 1s, rotate 1s, filter 1.5s;
    margin:2lvh 10lvw 2lvh 10lvw;
    max-width: 760px;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    /* Use a custom property for staggering */
    animation-delay: calc(var(--item-index) * 0.5s); 
    @starting-style {
  /*          transform: translateX(-140px) rotate(20deg); */
            filter: blur(32px);
            opacity: 0;
    }
    p {
        line-height:32px;
    }
    img {
    padding-top: 3lvh;
    padding-bottom: 3lvh;
    }
}
.homeonce {
    transition: color 1s, opacity 1s, transform 1s, rotate 1s, filter 1.5s;
    margin:2lvh 10lvw 2lvh 10lvw;
    max-width: 760px;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    /* Use a custom property for staggering */
    animation-delay: calc(var(--item-index) * 0.5s); 
    @starting-style {
  /*          transform: translateX(-140px) rotate(20deg); */
            filter: blur(32px);
            opacity: 0;
    }
    img {
    padding-top: 3lvh;
    padding-bottom: 3lvh;
    }
}
#highlighted {
    position: relative;
    left: calc(-40px + -0.5em);
    padding-left:40px;
    padding-top: 1em;
    padding-bottom: 1em;
    border-left: 0.5em;
    border-offset: 100px;
    border-left-style: solid;
    border-left-color: #f70;
}
header {
    background-color: black;
    height: 10lvh;
    padding:3lvh 3lvw 3lvh 10lvw;
    align-content: flex-end;
}
footer {
    background-color: black;
    height: 10lvh;
    padding:7lvh 10lvw 0px 10lvw;
}

/* Hide the actual checkbox */
.hidden-checkbox {
    display: none;
}
#flex-toggle:checked ~ .what {
    display: flex;
    flex-wrap: wrap;
    padding-left: 4lvw;
    padding-right: 4lvw;
} 
#boxes-toggle:checked ~ .once {
    margin: 0px 36px 36px 0px;
    font-size: 14px;
    line-height: 18px;
    max-width: 800px;
    width: 160px;
    background-color: black;
    padding: 2em;
    color: white;
    border-style: solid;
    border-color: white;
    border-width: 0.5em;
}
.style-switcher-button {
    display: inline-block;
    line-height: 1em;
    margin-left: 24px;
    padding: 8px;
    background-color: white;
    color: black;
    cursor: pointer;
    &:hover {
        background-color: red;
    }
    &:active {
        background-color: black;
    }
}
#style-toggle:checked + .style-switcher-button {
    background-color: darkgray;
}