/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
           /* if you have the URL of a font, you can set it below */

            @font-face { font-family: UbuntuMono; src: url('/fnt/UbuntuMono-Regular.ttf'); }
            @font-face { font-family: UbuntuMono; src: url('/fnt/UbuntuMono-Bold.ttf'); font-weight: bold; }
            @font-face { font-family: UbuntuMono; src: url('/fnt/UbuntuMono-Italic.ttf'); font-style: italic; }
            @font-face { font-family: UbuntuMono; src: url('/fnt/UbuntuBoldItalic.ttf'); font-style: italic; font-weight: bold; }
            
            @font-face {font-family: If; src: url('/fnt/If.ttf'); }
              
            @font-face {font-family: nogard;  src: url('/fnt/nogard_text.ttf'); font-weight: bold; }              
            @font-face { font-family: nogard; src: url('/fnt/nogard.ttf'); }
              
            @font-face { font-family: Texturina; src: url('/fnt/Texturina-Variable.ttf');  }
            @font-face {font-family: Texturina; src: url('/fnt/Texturina-Italic-Variable.ttf'); font-style: italic; }
            
            @font-face { font-family: Macondo; src: url('/fnt/Macondo.ttf');  }
              
            @font-face { font-family: ShareTechMono; src: url('fnt/ShareTechMono.ttf'); }
            
            @font-face {font-family: Jacquard12;src: url('fnt/Jacquard12.ttf');}
              
  :root {font-size: 100%;} /* This ensures our math is based on the (browser default happens to be standard 16px) root */

html,body,p {
  background-color: #22171b;
  color: #e4c3c7;
  font-family: Texturina;
  max-width: 70ch;
  margin-inline: auto;

    /* Min: 1rem (16px) at 1280px width
     Fluid: Starts growing sooner and faster
     Max: 1.5rem (24px) at 2560px width  */
  
  font-size: clamp(1rem, 0.5rem + 0.625vw, 1.5rem);
  line-height: 1.5;
  
}

a:link {
  color: #d2565f;
  background-color: transparent;
  text-decoration: underline;
}

a:visited {
  color: #d2565f;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #d2565f;
  background-color: transparent;
  text-decoration: none;
}

a:active {
  color: #9356d2;
  background-color: transparent;
  text-decoration: underline;
}

body {padding-inline: 1rem;}
hr  { border: 1px solid #694753;}
h1,h2 {font-family: "nogard";}
details,p.mnofnt {font-family: "ShareTechMono";}

h4 {
  /* Scales 20px -> 24px */
  font-size: clamp(1.25rem, 1rem + 0.31vw, 1.5rem);
}

h3 {
  /* Scales ~25px -> 30px */
  font-size: clamp(1.56rem, 1.24rem + 0.4vw, 1.88rem);
}

h2 {
  /* Scales ~31px -> 37.5px */
  font-size: clamp(1.95rem, 1.56rem + 0.49vw, 2.34rem);
}

h1 {
  /* Scales ~39px -> 47px */
  font-size: clamp(2.44rem, 1.95rem + 0.61vw, 2.93rem);
}

#picbrdr, img.picbrdr, img {
  object-fit: contain;
  margin-left: 0px;
  margin-right: 10px;
  margin-top: 1px;
  margin-bottom: 1px;
  border: 3px solid #694753;
  max-width:100%;
  max-height:100%; }
        
#nobrdr, img.nobrdr {
  object-fit: contain;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 3px;
  margin-bottom: 3px;
  border: none;
  max-width:100%;
  max-height:100%; }