/*------ Root properties ------*/

:root {
  /* fonts */
  --font-decimamonopro: 'DecimaMonoPro', monospace;
  --font-theinhardt: 'Theinhardt', sans-serif;
  
  /* font sizes */
 
  --font-size-lg: clamp(1rem, 1.2vw, 1.125rem); /* ~16px to 18px */
  --font-size-17xl: clamp(2.5rem, 6vw, 3rem); /* 40px to 48px */
 
  /*-- theinhardt --*/
  --font-size-base: clamp(1rem, 1.2vw, 1.125rem); /* Base body size */
  --font-size-pg-heading: clamp(2rem, 5vw, 4rem); /* H1 */
  --font-size-pg-title: clamp(1.6rem, 5vw, 3rem); /* H2 */
  --font-size-pg-subtitle: clamp(1.5rem, 4vw, 2.25rem); /* H3 */
 
  /*-- mono --*/
  --font-size-pg-sm-tags: clamp(0.775rem, 1vw, 0.9rem); /* Small tags */
  --font-size-pg-tags: clamp(0.875rem, 1vw, 1rem); /* Small tags */
  --font-size-pg-item: clamp(1.25rem, 2vw, 1.5rem); /* H4 */

  
  /* Colors */
  --color-white: #fff;
  --color-black: #3c3c3c;
  --color-deepskyblue: #0075C9;
}


/*------ Page properties ------*/

body {
  margin: 0 auto;
  line-height: normal;
  background-color: var(--color-white);
  text-align: left;
  font-size: var(--font-size-base);
  color: var(--color-black);
  font-family: var(--font-theinhardt);
  /* font-weight: 500; */
  /* cursor: none; */
}

a {
  /* cursor: none; */
  text-decoration: none;
}

p {
  margin: 0;
}

.panel-maxwidth {
  max-width: 75%;
  margin: 0 auto;
}

@media only screen and (max-width: 768px) {
  .panel-maxwidth.mobile {
    max-width: 85%;
  }
}

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

a {
  user-select: none;
  -webkit-user-drag: none;
  outline: none;
}



/* .custom-cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  background: var(--color-deepskyblue);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
} */
 


/*------ Typography: Mono ------*/
.mono {
  font-family: var(--font-decimamonopro);
  text-transform: uppercase;
}

.mono.tag {
  font-size: var( --font-size-pg-tags);
  color: var(--color-deepskyblue);
}



/*------ Typography: Headings ------*/

:is(h1, h2, h3, h4) {
  display: inline-block;
  margin: 0;
}

h1 {
  font-size: var(--font-size-pg-heading);
  font-weight: 500;
}

h2 {
  font-size: var(--font-size-pg-title);
  font-weight: 500;
  color: var(--color-deepskyblue)
}

h3 {
  font-size: var(--font-size-pg-subtitle);
  font-weight: 500;
}


/*------ Typography: Theinhardt ------*/

h4 {
  font-family: var(--font-decimamonopro);
  text-transform: uppercase;
  font-size: var(--font-size-pg-item);
  font-weight: 500;
}


/*---- Search Bar ------*/

.search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #fff;
  padding: 5px 10px;
  border-radius: 25px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  width: 100%;
  max-width: 400px;
  border: 1px solid #ddd;
}

.search-form input[type="text"] {
  flex: 1;
  padding: 10px 15px;
  border: none;
  border-radius: 20px;
  outline: none;
  font-size: 16px;
  background-color: transparent;
}

.search-form button[type="submit"] {
  padding: 10px 15px;
  border: none;
  border-radius: 20px;
  background-color: var(--color-deepskyblue);
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-family: var(--font-decimamonopro);
  font-size: var(--font-size-pg-sm-tags);
}

.search-form button[type="submit"]:hover {
  background-color: #007bbd; /* Slightly darker for hover effect */
}


@media only screen and (max-width: 768px) {
  .search-form button[type="submit"] {
    display: none;
  }

  .search-form {
    width: auto;
    max-width: 100%;
  }
}


/*------ Mobile Menu ------*/
/* Menu Button */
#mobile-menu {
  position: fixed;
  z-index: 999;
  width: 100%;
  display: none;
  top: 0;
  left: 0;
}


#mobile-menu .menu-button {
  top: 20px;
  right: 20px;
  z-index: 1100;
  background: var(--color-white);
  border: none;
  backdrop-filter: blur(5px);
  color: var(--color-deepskyblue);
  font-size: 1rem;
  cursor: pointer;
  width: fit-content;
  font-weight: 600;
}

#mobile-menu .menu-button .inner {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

#mobile-menu .menu-button .inner img {
  width: 12px;
}
/* Full-screen Glassmorphic Overlay */
#mobile-menu .menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1); /* Transparent white */
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px); /* Frosted glass effect */
  opacity: 0;
  z-index: 1000;
  pointer-events: none;
}

#mobile-menu .menu-overlay.open {
  pointer-events: auto;
}

/* White Background Container for Links */
#mobile-menu .menu-links-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Navigation Items */
#mobile-menu .menu-item {
  font-size: 1.5rem;
  margin: 10px 0;
  opacity: 0; /* Initially hidden for GSAP animation */
  transform: translateY(30px);
}


#mobile-menu .menu-item a {
  color: var(--color-deepskyblue);
  font-weight: 500;
}


#mobile-menu .outer-container {
  width: 100%;
  height: 100%;
}

#mobile-menu .inner-container{
  background: var(--color-white);
  margin: 20px;
  padding: 65px 25px 25px 25px;
  border-radius: 25px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

#mobile-menu .wrapper {
  display: flex;
  align-items: center;
  margin: 20px;
  background: rgba(255, 255, 255);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  padding: 10px 25px;
  border-radius: 50px;
  justify-content: space-between;
}

#mobile-menu .wrapper a {
  z-index:1100;
}


@media only screen and (max-width: 768px) {
	#mobile-menu {
		display: block;
	}
}







/*------- Fonts --------*/
@font-face {
  font-family: 'DecimaMonoPro';
  src: url('../fonts/DecimaMonoPro.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Theinhardt';
  src: url('../fonts/Theinhardt-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Theinhardt';
  src: url('../fonts/Theinhardt-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Theinhardt';
  src: url('../fonts/theinhardt-medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Theinhardt';
  src: url('../fonts/Theinhardt-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}