www_mycelium/css/index.css

/* Tailwind CSS Base */
@import "tailwindcss/base";

/* Tailwind CSS Components */
@import "tailwindcss/components";

/* Tailwind CSS Utilities */
@import "tailwindcss/utilities";

/* Importing external CSS files */
@import "code.css";
@import "layout.css";
@import "admonition.css";

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Montserrat:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Reddit+Sans:ital,wght@0,200..900;1,200..900&display=swap');

/* Global styles */
.backdrop-blur {
  -webkit-backdrop-filter: blur(40px);
}

* {
  font-family: 'Reddit Sans', sans-serif;
}

.bg-semi-white {
  background-color: rgba(255, 255, 255, 0.75);
}

.bg-purple {
  background-color: #4207ab ;
}

/* Image styling in markdown */
img[src*="#mx-auto"] { margin: auto; }
img[src*="#small"] { width: 68px; margin: auto; }
img[src*="#sm"] { width: 200px; }
img[src*="#md"] { width: 300px; }
img[src*="#medium"] { width: 500px; }
img[src*="#logo"] { max-width: min(250px, 100%); margin: auto; }
img[src*="#large"] { width: min(60vw, 100vh); margin: auto; }
img[src*="#fill"] { width: 100%; height: 100%; }
img[src*="#tft_img"] { width: 150px; margin: 8px; }
img[src*="#icon"] { width: 65px; margin: 4px; }
img[src*="#fig"] { width: 150px; }
img[src*="#3col"] { width: 100px; margin-left: auto; margin-right: auto; }
.logo_size { width: 200px; }

/* Layer components */
@layer components {
  h1 { @apply text-xl lg:text-4xl xl:text-7xl font-bold leading-4 my-4; font-family: "Reddit Sans", sans-serif; font-weight: 900; line-height: 1em; }
  h1 strong { @apply font-extrabold; }
  h2 { @apply text-xl md:text-2xl lg:text-4xl font-bold leading-4 my-4; font-family: "Reddit Sans", sans-serif; line-height: 1; font-weight: 600; }
  h2 strong { @apply font-medium; }
  h3 { @apply text-xl lg:text-2xl font-normal my-4; color: #4207ab; font-family: "Reddit Sans", sans-serif;  font-weight: 400; }
  h3 strong { @apply font-medium; font-weight: 400; }
  h4 { @apply text-xl lg:text-xl font-normal my-4; color: #4207ab;  font-family: "Reddit Sans", sans-serif; font-weight: 400; }
  h5 { @apply text-xl lg:text-xl font-normal; font-family: "Reddit Sans", sans-serif; font-weight: 300; }
  h6 { @apply text-lg not-italic font-normal my-1; font-family: "Reddit Sans", sans-serif; font-weight: 300; letter-spacing: 0.02em; }
  p { @apply text-lg lg:text-xl leading-tight tracking-normal font-normal my-0; font-family: "Reddit Sans", sans-serif; font-weight: 300;  letter-spacing: 0.03em; }
  blockquote { @apply border-l-4 border-gray-400 mx-2 my-2 p-2; font-family: "Reddit Sans", sans-serif; font-weight: 300;  }
  li { @apply text-sm lg:text-sm font-light my-2; font-family: "Reddit Sans", sans-serif; font-weight: 200;  }
  li li { @apply text-sm lg:text-sm font-light;font-family: "Reddit Sans", sans-serif; font-weight: 200;  }
  button { @apply inline-block text-base lg:text-lg px-8 py-1 my-3 border-2 shadow;font-family: "Reddit Sans", sans-serif; font-weight: 400;  }
  article h2 { @apply text-xl lg:text-3xl font-medium; font-family: "Reddit Sans", sans-serif; font-weight: 500;  }
  article { @apply text-base lg:text-lg; font-family: "Reddit Sans", sans-serif; font-weight: 400;  }
}



/* Link styles */
a:hover { color: #4207ab; }
button:hover { color: #4207ab; }
button { font-weight: 500; }
.experience-btn { border: none; margin: 0; padding: 0; color: black; padding: 10px; width: fit-content; }
.experience-btn p { @apply text-lg; }
.experience-btn:hover { background: white; }
.experience-btn h4 { white-space: normal; }
header .customize { background-color: transparent; position: absolute; }
footer .customize { color: #fff; background-color: #4207ab; display: flex; flex-direction: column; align-items: center; padding-top: 24px; padding-bottom: 24px; }
footer .customize img { width: 60px; }
header .customize div { box-shadow: none; text-transform: uppercase; font-weight: 700 !important; }

/* Header styles */
button { background: transparent; color: black; border-radius: 2px; border: 1px solid black; box-shadow: none; }
a { border: none; }
header { font-family: "Reddit Sans"; }
.nav_btn { margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; }
.link2 {  margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; color: #4207ab !important; font-weight: 600 !important; border: 0px !important; }



/* Quicklinks styles */
.quicklinks { box-sizing: border-box; display: inline-block; margin: 0 auto; border-radius: 10px; margin-top: 30px; margin-bottom: 20px; }
.quicklinks img { height: auto; max-width: 200px; display: inline-block; padding: 10px; filter: grayscale(100%); position: relative; margin-right: 30px; transition: all 0.2s ease; opacity: 0.5; }
.quicklinks img:hover { opacity: 1; filter: grayscale(0%); }

/* Banner and Header styles */
.banner, .header { width: 100%; margin: 0; padding: 120px 0; text-align: center; position: relative; display: block; color: #fff !important; letter-spacing: 0.5px; overflow: hidden; transition: 1.5s; }
.header { height: auto; background: none; padding: 200px 0; }
.banner h2, .header h1 { margin: auto; color: #fff; position: relative; transition: 0.3s; z-index: 1; white-space: nowrap; }
.header h1 { color: #000; transition: none; }
.banner h2 svg { font-size: 40px; margin-left: 15px; position: absolute; top: 55%; transform: translateY(-50%) scale(0.5); opacity: 0; transition: 0.3s; }
.banner .back, .header .back { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-position: center; background-size: cover; filter: grayscale(1) contrast(1.4); opacity: 0.25; transition: 1.5s; }
.header .back { filter: none; opacity: 1; background-position: center; background-size: cover; background-repeat: no-repeat; }
.banner:hover { background: #4b3a92; }
.header:hover { background: none; }
.banner:hover h2 svg { transform: translateY(-50%) scale(1); opacity: 1; }
.banner:hover h2 { padding-right: 40px; }
.header:hover h1 { padding-right: 0; }
.banner:hover .back { transform: scale(1.03); }
.header:hover .back { transform: none; }

/* Responsive styles */
@media (max-width: 768px) { /* h2 { font-size: 4rem; } */ .flex-col-reverse { flex-direction: column-reverse; } }
@media (max-width: 640px) { .banner h2 { font: 600 7vw/10vw; } .header h1 { font-size: 20px; } .banner h2 svg { font-size: 30px; } }
@media (max-width: 480px) { .banner, .header { padding: 80px 0; } footer { text-align: center; } /* h2 { font-size: 3rem; } */ }