html, body { 
  background-color: black; 
  position: relative;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  -webkit-tap-highlight-color: none;
  overscroll-behavior: none;
}
:root {
    --verydark: hsla(152, 29%, 12%, 1);
    --dark: hsla(156, 50%, 13%, 1);
    --light: hsla(150, 95%, 40%, 1);
    --camobackground: url('assets/green-camo-bg.webp');
    --themeselector: url('assets/brown-camo-bg.webp');
}
.brown-camo {
    filter: hue-rotate(260deg) saturate(.20) contrast(1.05);
}

body {  
    z-index: 1;
  background-image: var(--camobackground);
  background-size: 800px;
  background-position: top center;
}

img::selection {
    background-color: rgba(0,0,0,0);
}



@font-face {
    font-family: 'Anton';
    src: url('assets/fonts/Anton-Regular.ttf');
    font-display: swap;
    font-weight: 400;
}



h6 {
  	font-family: 'Anton', sans-serif;
	letter-spacing: .04em;
	font-size: clamp(5px, 4vw, 36px);
	margin: 0px;
}


.main-container {
    display: flex;
    flex-direction: column;
	min-height: 100svh;
	width: 100vw;
	text-align: center;
    pointer-events: none;
}



dotlottie-player {
    pointer-events: none;
}


.logo-container {
    position: relative;
    background-color: var(--dark);
    border: 2px solid var(--light);
    margin: 0 auto;
    margin-bottom: -2px;
    pointer-events: none;
}
.logo {
    position: relative;
    background-color: var(--light);
    box-sizing: border-box;
  	width: 100%;
  	aspect-ratio: 4.4 / 1;
  	display: block;
    -webkit-mask-image: url('assets/lanscape-logo-1.svg');
    mask-image: url('assets/lanscape-logo-1.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.button-wrap {
  	display: block;
	text-decoration: none;
    z-index: 1000;
}

.button {
  	background-color: var(--dark);
  	color: var(--light);
  	padding: .5em;
  	border: 2px solid var(--light);
  	transition: color 0.2s background-color 0.2s;
    text-align: center;
}

a, button {
    pointer-events: all;
}


@media screen and (pointer: fine) { 
    .button:hover {
        background-color: var(--light);
        color: var(--dark);
    }
    .charles a:hover {
        opacity: 0.5;
    }
    .header-icon:hover {
        opacity: .6;
    }
}

@media screen and (pointer: coarse) { 
    .button:active {
        background-color: var(--light);
        color: var(--dark);
    }
    .charles a:active {
        opacity: 0.5;
    }
    .header-icon:active {
        opacity: .6;
    }
}



.button-left {
    margin-bottom: -2px;
}

header {
    animation: fadein 1s 1.5s forwards;
    background-image: var(--camobackground);
    background-size: 800px;
    background-position: top center;
}

@keyframes fadein {
    100% {
        opacity: 1;
    }
}

header a {
    transition: opacity .2s;
}



.leaves-lottie {
    z-index: 120;
   position: fixed; top: 0; left: 0;
   height: 100vh;
   min-height: 600px;
   aspect-ratio: 1;
   width: auto!important;
   pointer-events: none;
   filter: brightness(.9);
}




#themeButton {
    margin-right: auto;
    cursor: pointer;
}

.header-icon {
    position: relative;
    backdrop-filter: blur(10px);
}
.header-icon::before {
    z-index: 1;
    content: '';
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0;
    top: 0;
    background-color: var(--light);
    border-radius: 100%;
    opacity: .15;
}

.header-icon div {
    width: 40px;
    height: 40px;
    position: relative;
    background-color: var(--light);
    border-radius: 100px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.header-icon.call div {
    -webkit-mask-image: url('assets/phone-icon-1.svg');
    mask-image: url('assets/phone-icon-1.svg');
}
.header-icon.email div {
    -webkit-mask-image: url('assets/email-icon-1.svg');
    mask-image: url('assets/email-icon-1.svg');
}
.header-icon.swap div {
    -webkit-mask-image: url('assets/swap.svg');
    mask-image: url('assets/swap.svg');
}



#center-area-container {
    flex: 1 70%;
  	position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 80px;
}

#center-area {
	width: clamp(50px, 70%, 750px);
  	text-align: center;
}


.charles {
    width: 100%;
	font-size: clamp(12px, 2.5vw, 15px);
	font-family: sans-serif;
    color: var(--light);
    text-align: center;
    margin: 15px 0px;
    z-index: 10;
}

.charles a {
    text-decoration: none;
    color: var(--light);
    transition: opacity .2s;
}



p::selection {
    color: var(--dark)!important;
    background-color: var(--light)!important;
    opacity: 1!important;
}


.ticker-container {
  width: 100%;
  padding: 6px 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  /* background-color: var(--light); */
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}

.green-camo .ticker-container {
    filter: brightness(.85) saturate(.9);
}

.ticker-lottie {
    height: auto;
    width: 100vw;
    min-width: 1200px;
    margin: auto;
}




#center-area-container, .ticker-container {
    animation: fadeup 1s cubic-bezier(0,.66,.25,1) 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
    transform: translatey(60px);
}

@keyframes fadeup {
    100% {
        opacity: 1;
        transform: translatey(0px);
    }
}


.fadein {
	animation: fadein 1s forwards 2s;
opacity: 0;
}

@keyframes fadein {
    100% {
        opacity: 1;
    }
}






.tree-container {
    pointer-events: none;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    animation: fadeoutup .5s cubic-bezier(.77,-0.01,.83,.67) forwards 1s;
}

@keyframes fadeoutup {
    100% {
        opacity: 0;
        transform: translateY(-100px);
    }
}

@media (max-width: 690px) {
    #center-area {
        width: clamp(50px, 60%, 400px);
    }
	/* body {
    background-image: url('assets/background-portrait.svg');
    } */
    .logo {
    -webkit-mask-image: url('assets/portrait-logo-1.svg');
    mask-image: url('assets/portrait-logo-1.svg');
    aspect-ratio: 1 / 1.15;
	}
   .loader-container lottie-player {
	width: 60%!important;
	}
    .leaves-lottie {
        transform: translateX(-20%);
    }
}