/* Lost Font (is called Vi Quan Tu) */
/* @import url("elements/fonts/Lost-alt.TTF"); */
@import url("https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700");
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@font-face {
src: url("https://fonts.cdnfonts.com/css/pp-neue-montreal") format("woff2");
font-family: "PP Neue Montreal", sans-serif;
font-weight: 400;
}

:root {
--font-size: 1em;
--font-size-base: 14px;
--bg-color: #f5f5f5;
--color-fg: 37 54 112;
--highlight: #f8f9fc;
--black: #000;
--white: #ffffff;
--navy: #032A4A;
--accent: #007f8c;
--ppNeue: "PP Neue Montreal", sans-serif;
--verdana: Verdana, Geneva, sans-serif;
--lost: "lost", Geneva, sans-serif;
--bangers: "Bangers", Geneva, sans-serif;
--oswald: "Oswald", sans-serif;
--spacing-base: 1rem;
--spacing-md: 1.5rem;
--spacing-lg: 2rem;
--ui-pad: 1.25rem;
--color-text: #1d1d1d;
--transition-medium: 0.3s ease;
--header-height: 220px;
--footer-height: 70px;
--radius: 14px;
--shadow: 0 8px 24px rgba(0,0,0,0.1);
}

*, *::before,*::after {
box-sizing: border-box;
}

html {
line-height: 1.5;
tab-size: 4;
font-feature-settings: normal;
}

html,
body {
margin: 0;
padding: 0;
font-family: var(--ppNeue);
width: 100%;
min-height: 100vh; 
min-height: auto;
overflow-y: scroll;
animation: fadein ease-in 1s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
overscroll-behavior: none;
}

body {
transition: 0.2s ease;
touch-action: auto;
--tw-bg-opacity: 1;
background-color: var(--bg-color);
--tw-text-opacity: 1;
color: rgb(var(--color-fg) / var(--tw-text-opacity));
}

img {
-moz-user-drag: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-drag: none;
-ms-user-select: none;
user-drag: none;
user-select: none;
}

a {
position: relative;
cursor: pointer;
color: var(--color-text);
z-index: 1;
text-decoration: none;
opacity: 1;
transition:color var(--transition-medium);
font-weight: 700;
}


/* Mobile menu overlay */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

.menu-toggle {
background: transparent;
border: none;
 color: var(--navy); 
padding: 1rem 2rem;
cursor: pointer;
font-size: 1.2em;
position: absolute;
}

.mobile-menu {
position: fixed;
inset: 0; 
background: var(--navy);
 color: var(--white);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: calc(2 * var(--ui-pad));
transform: translateY(-100%);
transition: transform 420ms cubic-bezier(.2,.9,.2,1), opacity 300ms ease;
opacity: 0;
pointer-events: none;
z-index: 1100;
-webkit-font-smoothing:antialiased;
}

/* Open state */
.mobile-menu.open {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}

.mobile-menu-close {
position: absolute;
top: calc(var(--ui-pad) * 1.2);
right: calc(var(--ui-pad) * 1.2);
background: transparent;
border: 2px solid rgba(255,255,255,0.12);
 color: var(--white);
padding: .4rem .6rem;
border-radius: 8px;
font-size: 1.25rem;
cursor: pointer;
}

/* Menu list styling */
.mobile-menu-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 1rem;
width: 100%;
max-width: 28rem;
text-align: center;
}

.mobile-link {
display: block;
padding: .75rem 0;
font-family: var(--ppNeue);
font-weight: 800;
font-size: clamp(20px, 6.2vw, 30px);
 color: var(--white);
text-decoration: none;
letter-spacing: .02em;
text-transform: uppercase;
transition: transform 180ms ease, opacity 160ms ease;
}

.mobile-link:hover, .mobile-link:focus, .menu-toggle:focus-visible, .menu-toggle i:focus-visible {
transform: translateY(-4px);
opacity: 0.95;
}

.mobile-link:hover, .mobile-link:focus, .menu-toggle:focus-visible, .menu-toggle i:focus-visible {
outline: none;
}

.mobile-menu-foot {
margin-top: 1.5rem;
font-weight: 600;
opacity: 0.9;
}

.mobile-foot-link {
 color: rgba(255,255,255,0.9);
text-decoration: underline;
}

@media (min-width: 951px) {
.mobile-menu { display: none; }
.menu-toggle { display: none; } 
}

body.menu-open {
overflow: hidden;
}
/* end mobile menu */

p {
color: #444;
letter-spacing: 0.023vh;
font-size: .8em;
margin-top: 0.4vh;
margin-bottom: 0;
font-weight: 500;
line-height: 1.6;
}

menu, ol, ul {
list-style: none;
margin: 0;
padding: 0;
}

h1 {
font-size: 2em;
animation: filter-animation 5s infinite;
}

h1, h1 a {
margin: 0.5em 0;
font-family: var(--bangers);
color: darkorange;
position: relative;
z-index: 999999;
}

h2 {
font-family: var(--oswald);
font-size: 1.8em;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--black);
user-select: none;
}

h2 img {
width: 2.5em;
vertical-align: middle;
/* animation: bob 2s infinite alternate paused;
transition: transform 0.3s ease-in-out; */
}

h2 img:hover {
animation-play-state: running;
}

h3 {
font-size: 14px;
margin-bottom: var(--spacing-base);
font-weight: 600;
}

h1, h2, h3 {
cursor: pointer;
}

h1 a:hover, h2:hover, h3:hover {
color: var(--accent);
animation: filter-animation 1s infinite;
}

header {
top: 0;
height: var(--header-height);
}

footer {
bottom: 0;
font-family: var(--ppNeue);
height: var(--footer-height);
font-size: 0.9rem;
}

header, footer {
position: fixed;
left: 0;
right: 0;
background: rgba(255,255,255,0.9);
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 6px rgba(0,0,0,0.08);
}

.navigation-bar,
.footer {
position: fixed;
width: 100vw;
display: grid;
grid-template-columns: repeat(12, 1fr);
column-gap: var(--spacing-base);
background-color: #f2e9e966;
z-index: 1;
}

.footer {
    padding: 1em;
}

.navigation-bar p, .content, .footer p {
 text-transform: uppercase;
 font-size: .7em;
}

main {
position: fixed;
top: var(--header-height);
bottom: var(--footer-height);
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
}

main.portfolio {
color: var(--black);
margin-top: 0.3vh;
margin-bottom: 0;
font-family: var(--ppNeue);
font-size: 1.36986vh;
font-weight: 600;
line-height: 1.35vh;
display: block;
}

.content-box {
background: #fff;
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 40px;
max-width: 800px;
width: 90%;
transition: transform 0.2s ease-out;
will-change: transform;
}

.coordinates-section {
grid-column: 1 / span 3;
font-family: var(--ppNeue);
}

.line-link a:hover::after {
width: 100%;
}

.line-link a:hover {
color: black;
opacity: 1;
}

a.line-link {
color: var(--accent);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s;
}

a.line-link:hover {
border-color: var(--accent);
}

.menu-wrapper {
display: grid;
grid-column: 4 / span 6;
transition: transform 0.5s ease;
}

/* Grid columns */
/* Header */
.navigation-bar {
top: 0;
}
/* Logo section */
.navigation-bar > :nth-child(3) {
grid-column: 2 / span 2;
width: 9rem;
margin-bottom: var(--spacing-md);
cursor: pointer;
}

.logo-click {
 animation: flash 1s;
 transition: flash 0.3s ease;
}

.logo-container span {
    position: relative;
    bottom: 25%;
    left: 25%;
    color: white;
    font-family: Bangers;
     font-weight: 100;
    pointer-events:none;
}

.glow {
 animation: goldWhiteGlowBold 2s ease-in-out forwards;
 font-weight: 900;
}
.navigation-bar > :nth-child(3) img {
width: 100%;
}
/* Values section */
.menu-wrapper > :nth-child(1) {grid-column: 4 / span 2;}
/* Location section */
.menu-wrapper > :nth-child(2) {grid-column: 6 / span 2;}
/* Contact section */
.menu-wrapper > :nth-child(3) {grid-column: 8 / span 2;}
/* Links section */
.menu-wrapper > :nth-child(4) {grid-column: 11/ span 1;text-align: right;}
/* Footer */
/* Coordinates */
.footer > :nth-child(1) {
grid-column: 1 / span 3;
}

 /* Right Footer text */
.footer > :nth-child(2) {
grid-column: 9 / span 4;
text-align: right;
}

[hidden], .hidden {
 display: none; 
}

.grid {
display: grid;
}

.animate-bounce {
animation: bounce 1s infinite;
}

.select-none {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}

.blur {
--tw-blur: blur(8px);
}

.blur,
.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 0.15s;
}

.scroll-space { 
height: 250vh;
}

.wrap-3d {
transform-style: preserve-3d;
}

.line-link a {
text-decoration: none;
}

.line-link a:hover,
.line-link a:focus {
background-image: url("data:image/svg+xml,%3Csvg width='448' height='192' viewBox='0 0 448 192' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='128' width='64' height='64' fill='rgb(218 165 32)'/%3E%3Crect x='64' y='64' width='64' height='64' fill='rgb(218 165 32)'/%3E%3Crect x='128' width='64' height='64' fill='rgb(218 165 32)'/%3E%3Crect x='192' width='64' height='64' fill='rgb(218 165 32)'/%3E%3Crect x='256' width='64' height='64' fill='rgb(218 165 32)'/%3E%3Crect x='320' y='64' width='64' height='64' fill='rgb(218 165 32)'/%3E%3Crect x='384' y='128' width='64' height='64' fill='rgb(218 165 32)'/%3E%3C/svg%3E");
}

.line-link a:focus,
.line-link a:hover {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-opacity: 1;
--tw-ring-color: rgb(var(--color-fg) / var(--tw-ring-opacity));
--tw-ring-offset-width: 2px;
}

.line-link a:focus,
.line-link a:hover {
background-repeat: repeat-x;
background-size: 12px;
text-decoration: none;
animation: sine 4s linear infinite;
}

.bob {
animation: bob 1s infinite alternate;
animation-timing-function: ease-in-out;
}

.lost {
position: absolute;
transform: translate(0, 90vh);
top: -50%;
left: 0;
z-index: 999999999;
width: 100%;
display: none;
}

@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@keyframes filter-burn {
40% {filter: contrast(100%) saturate(10);
}
}

@keyframes flash {
40% {
filter: brightness(2);
}
}
@keyframes goldWhiteGlow {
0% {
text-shadow: none;
}
50% {
text-shadow:
0 0 8px white,
0 0 16px white,
0 0 22px gold,
0 0 32px gold,
0 0 42px gold,
0 0 52px white;
}
100% {
text-shadow: none;
}
}

@keyframes filter-animation {
0% {filter: hue-rotate(0deg);
}

50% {filter: hue-rotate(100deg);
}

100% {filter: hue-rotate(0deg);
}
}

@keyframes noise-animation {
0% {transform: translate(0, 0);
}

10% {transform: translate(-2%, -3%);
}

20% {transform: translate(-4%, 2%);
}

30% {transform: translate(2%, -4%);
}

40% {transform: translate(-2%, 5%);
}

50% {transform: translate(-4%, 2%);
}

60% {transform: translate(3%, 0);
}

70% {transform: translate(0, 3%);
}

80% {transform: translate(-3%, 0);
}

90% {transform: translate(2%, 2%);
}

100% {transform: translate(1%, 0);
}
}

@keyframes bounce {
0%,
to {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}

50% {
transform: none;
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}

@keyframes scroll {
0% {transform: translateX(0);
}

to {transform: translateX(calc(-100% - var(--gap)));
}
}

@keyframes sine {
0% {
background-position: 0 bottom;
}

to {
background-position: 100% bottom;
}
}

@keyframes bob {
0% {
transform: translateY(0);
}
to {
transform: translateY(-1rem);
}
}

/* Slide out to left */
@keyframes slideLeftOut {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(-40%); opacity: 0; }
}

/* Slide in from left */
@keyframes slideRightIn {
from { transform: translateX(-40%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}

@media (max-width: 950px) {
.menu-wrapper {
display:none;
}

.scroll-space { 
height: calc(var(--stable-vh) * 0.7);
overflow-y: auto; 
-webkit-overflow-scrolling: touch;
}

/* Logo section */
.navigation-bar > :nth-child(3) {
grid-column: 5 / span 4;
width: 10rem;
}

.mobile-menu-foot a {
color: #fff;
padding-right: 1em;
}
}
@media (max-width: 600px) {
main {
position: relative;
margin-top: 4%;
bottom: 0;
}
}