:root {
	color-scheme: dark;
	--ink: #f5f5f5;
	--muted: #b3b3b3;
	--bg: #222222;
	--background: #1e1e1e;
	--active-background: #2d2d2d;
	--inactive-background: #252526;
	--active-text: #ffffff;
	--inactive-text: #cccccc;
	--dark-alt-text: #858585;
	--highlighted-background: #3e3e42;
	--white: #ffffff;
	--blueps: #569cd6; /* Blue-purple for HTML tags */
	--bright-blue: #9cdcfe; /* Lighter blue for HTML attributes */
	--orange: #ce9178; /* Orange-brown for strings and numbers */
	--green: #6a9955; /* Muted green for comments */
	--light-blue: #9cdcfe; /* Light blue for CSS selectors */
	--pink: #c586c0; /* Pink-purple for CSS keywords like @media */
}
.orange{
    color: var(--orange);
}
.green{
    color: var(--green);
}
.blue{
    color: var(--blueps);
}

.dark-alt-text{
    color: var(--dark-alt-text);
}

* { 
    box-sizing: border-box;
    font-family: 'Afacad Flux', sans-serif;
    font-weight: 300;
    font-size: 16px;
 }

html, body { 
    height: 100%; 
    height: 100vh;
    height: 100dvh;
    margin: 0; 
    background: linear-gradient(180deg, #0b8dff 0%, #1cb8ff 35%, #a4d3ff 75%, #ffffff 100%);
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
    }
}
p{
    font-weight: 100;
}

section {    
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    /* -webkit-transform: translateZ(0);
    transform: translateZ(0); */
}


/* hohf */
.hohf {

}



.about {
    
}

/* curves */
.curves-wrap {
    width: 100%;
    height: 100%;
}

.curves {
	display: block;
	object-fit: contain;
	image-rendering: auto;
    height: 100%;
    width: 100%;
    will-change: transform, opacity;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.hohf-header {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    top: 50%;
    width: 100%;
    padding:10px 0;
    pointer-events: none;
    transition: all 0.6s cubic-bezier(0, 0, 0, 1);
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -webkit-transition: all 0.6s cubic-bezier(0, 0, 0, 1);
    will-change: transform, opacity;
}


.hohf-logo {
    display: block;
    object-fit: contain;
    image-rendering: auto;
    height: auto;
    width: 300px;
    opacity: 0.9;
    /* transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity; */
}

.hohf-header.scrolled .hohf-logo {
    height: 100px;
    width: auto;
    opacity: 0.9;
}

@media (max-width: 768px) {
    .hohf-header.scrolled {
        top: 0%;
    }
    
    .hohf-header.scrolled .hohf-logo {
    }
}


.footer {   
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100vw;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
    /* -webkit-transform: translateZ(0);
    transform: translateZ(0); */
}



.footer-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    height: 100%;
    padding-bottom: 5vh;
}

.footer-item {
    color: var(--dark-alt-text);
    text-align: center;
}