/* GOOGLE FONTS IMPORTS */
@import url('https://fonts.googleapis.com/css2?family=Inria+Serif:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&family=Inter&family=Erica+One&family=Kanit:wght@900&family=Mukta&family=Overpass&family=Rammetto+One&family=Roboto&family=Syncopate:wght@700&family=Titillium+Web:wght@900&family=Work+Sans:wght@400;900&display=swap');

/* FONT VARIABLES */

/* GLOBAL RESET */
:root {
  --bodyfont: 500 11px/18px 'IBM Plex Sans', sans-serif;
  --serifcaps: 700 10px/10px 'Inria Serif', serif;
  --display: 'DM Serif Display', serif;
}


body {
  margin: 0;
  padding: 0;
  font: 500 11px/18px 'Manrope', sans-serif;
  font-size: 0.8125rem;
  line-height: 1.8;
  letter-spacing: 1px;
  color: #ce4a56; /* accent color */
  background: #090d14 url(https://64.media.tumblr.com/adab6da9e9130698d73d2c5967ae0f25/afa400d7278e362b-4f/s2048x3072/01a58d3abb5be7f1efea94a58e3ef417abc90357.jpg) center fixed;
  background-size: cover;
}

  /* Core darks / text */
  --dgreen: rgba(17, 18, 24, 1);   /* #111218 – primary body text */
  --black: rgba(1, 1, 2, 1);       /* #010102 – deepest background */

  /* Backgrounds */
  --cream: rgba(9, 13, 20, 1);     /* #090D14 – main page background */
  --cream70: rgba(9, 13, 20, .7); 
  --beige: rgba(26, 29, 35, 1);    /* #1A1D23 – section background */
  --beige70: rgba(26, 29, 35, .7);

  /* Nav + secondary accents */
  --green: rgba(5, 6, 15, 1);      /* #05060F – header/sidebar bg */
  --green70: rgba(5, 6, 15, .7);

  /* Accent / highlight */
  --peach: rgba(206, 74, 86, 1);   /* #CE4A56 – bold red-pink accent */
  --peach70: rgba(206, 74, 86, .7);
  --peach80: rgba(206, 74, 86, .8);

  /* Links */
  --indigo2: rgba(206, 74, 86, 1);  /* same accent for strong emphasis */
  --indigo10: rgba(206, 74, 86, .9);  


/* LINKS */
a {
  position: relative;
  text-decoration: none;
  font: var(--serifcaps);
  text-transform: uppercase;
  color: var(--dgreen);
}

/* SERIF LINKS */
.btop a{
  position: relative;
  color: rgba(206, 74, 86, 1);
}
.btop a:before{
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0px;
  width: 0px;
  height: 1px;
  background-color: rgba(206, 74, 86, .9);
  transition: width 1s .5s;
  -webkit-transition: width 1s .5s;
}
.btop a:hover:before{
  width: 100%;
  height: 1px;
  background-color: rgba(206, 74, 86, .9);
  transition: width 1s;
  -webkit-transition: width 1s;
}
a {
  position: relative;
  text-decoration: none;
  font: 700 10px/10px 'Inria Serif', serif;
  text-transform: uppercase;
  color: #111218;
}

/* NAVBAR TOP */
.btop {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: #05060f;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* FOOTER */
.bfooter {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
  background-color: #05060f;
  text-align: center;
  padding: 10px 20px;
}

/* DECORATIVE STRIPS */
.btopr {
  width: calc(100vw - 40px);
  background: transparent;
  height: 40px;
  z-index: 3;
  left: 20px; 
  top: 50px; 
  position: fixed;  
  border-radius: 40px; 
  box-shadow: 0px -20px 0px 0px #05060f; 
}

.bbotr {
  width: calc(100vw - 40px);
  background: transparent;
  height: 40px;
  z-index: 3;
  left: 20px; 
  bottom: 40px; 
  position: fixed;  
  border-radius: 40px; 
  box-shadow: 0px 20px 0px 0px #05060f; 
}

/* SIDE BARS */
.left, .right {
  width: 23px; 
  height: 100vh; 
  top: 0; 
  position: fixed; 
  background-color: #05060f;
}

.left { left: 0; }
.right { right: 0; }


/* MOBILE OVERRIDES */
@media (max-width: 768px) {
  .btopr, .bbotr {
    width: 100vw;
    left: 0;
    border-radius: 0;
  }

  .left, .right {
    display: none; /* hide side bars on small screens */
  }

  #content {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 5px !important; /* small padding for breathing room */
    position: relative;
    z-index: 1;
  }

  /* Make wrappers fill more space and reduce internal padding */
  .wrapper {
    margin: 10px auto;  /* smaller top/bottom margin */
    padding: 10px;      /* reduced padding inside wrapper */
    border-radius: 10px; /* smaller radius on mobile */
  }

  /* Reduce padding for text sections */
  .text, .ftext {
    padding: 5px;      /* smaller padding on mobile */
  }

  /* Make text readable */
  .text p, .ftext p {
    font-size: 1rem;
    line-height: 1.6;
  }
  

  .header a.hdr {
    top: 80px!important;
    left: 20px!important;
    position:fixed;
    font-size: 50px;
    padding: 20px;
    max-width: 90%;
  }

  .header .subhead {
    top: 150px;
    left: 20px;
    font-size: 12px;
    word-spacing: 2px;
  }
}


h1 {
  font-family: 'kanit';
  font-weight:900;
  font-size: 2.5rem;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(206, 74, 86, 1);
  padding: 0px;
  margin: 0px;
}

.header {
  display: block;
  position: relative;
  top: 40px;
  left: 40px;
  z-index: -1;
  width: calc(100vw - 80px);
  height: calc(100vh);
}
.header a.hdr {
  display: block;
  position: fixed;
  top: 95px;
  left: 120px;
  width: 100%;
  max-width: 1000px;
  margin: 0px auto;
  padding: 50px;
  color: rgba(206, 74, 86, 1);
  font: 80px/80px var(--display);
  text-transform: capitalize;
}

.header .subhead {
  display: block;
  position: fixed;
  top: 230px;
  left: 170px;
  color: rgba(206, 74, 86, .7);
  font: var(--serifcaps);
  text-transform: uppercase;
  word-spacing: 3.5px;
}

#content {
  position: relative;
  z-index: 5;
  width: calc(100% - 160px);
  margin: 0px auto 10px auto;
}

.wrapper {
  margin: 60px auto; /* 20px on top/bottom, auto on left/right */
  padding: 20px;
  border-radius: 20px;
  background-color:  rgba(9, 13, 20, .7);
}
  

.text{
  border-radius:20px;
  padding:40px;
  background-color:  rgba(9, 13, 20, 1);
  }
  
.full {
  z-index:5;
  margin-top: 60px;
  padding-top: 20px;
  background-color:  rgba(9, 13, 20, .7);
}

.ftext{
  z-index:5;
  padding:80px;
  background-color:  rgba(9, 13, 20, 1);
  }