@font-face
      {
      font-family:'Namaku';
      src:url("fonts/Namaku.ttf") format('truetype');
      font-weight: normal;
      font-style: normal; 
      font-display: swap;
      }
      
      @font-face
      {
      font-family:'Arco';
      src:url("fonts/ARCO.ttf") format('truetype');
      font-weight: normal;
      font-style: normal; 
      font-display: swap;
      }
      
      @font-face
      {
      font-family:'BreakDown';
      src:url("fonts/font breakdown.ttf") format('truetype');
      font-weight: normal;
      font-style: normal; 
      font-display: swap;
      }
      
      @font-face
      {
      font-family:'Nunito';
      src:url("fonts/Nunito-Bold.ttf") format('truetype');
      font-weight: normal;
      font-style: normal; 
      font-display: swap;
      }
      
      @font-face
      {
      font-family:'Chivo';
      src:url("fonts/Chivo-SemiBold.ttf") format('truetype');
      font-weight: normal;
      font-style: normal; 
      font-display: swap;
      }
      
      @font-face
      {
      font-family:'Newyear';
      src:url("fonts/Newyear-Coffee.ttf") format('truetype');
      font-weight: normal;
      font-style: normal; 
      font-display: swap;
      }
      
     

:root {
  --coral: #EC8A8A;
  --peach: #FFB990;
  --jasmine: #FFE18E;
  --tea: #C6EFC2;
  --ice: #ABD4FF;
  --plum: #E394CD;
  
  --coral-text: #63190f;
  --peach-text: #ffffff;
  --jasmine-text: #66481f;
  --tea-text: #34802d;
  --ice-text: #242061;
  --plum-text: #631f50;
  
  --coral-link: #cc2334;
  --peach-link: #ffffff;
  --jasmine-link: #e8a527;
  --tea-link: #34802d;
  --ice-link: #3c71e6;
  --plum-link: #631f50;
}

::selection {
  background-color: #f065e4;
  color: white;
}

html {
       background-color: #ebdac0;
      background-image: linear-gradient(rgba(128, 128, 128, 0.4), rgba(0, 0, 0, 0.5)), url("fishies.jpg");
      background-size:  100%;
      background-attachment: fixed
      /*background-image:url("images/background3.webp");*/
      /*background-size:  6%;*/ 
}

body {
      font-size: 20px;
      font-family: 'Nunito', Arial, sans-serif;
      font-weight: 600;
        color: white;
       text-align: center;  
        }
        
    h1 {
      font-family:'Arco', Arial, sans-serif;
      font-size: 50px;
      }
      
    h2 {
      font-family:'Namaku', Arial, sans-serif;
      font-size: 40px;
      }
      
    h3 {
      font-family:'Namaku', Arial, sans-serif;
      }

        .top-box {
          display: flex;
          align-items: center;
          padding: 0.4em;
          gap: 10px;
          border-radius: 10px;
          background-color:#4d4d4d;
          -webkit-box-shadow: 11px 10px 7px 0px rgba(18,22,49,0.28);
          box-shadow: 5px 5px 2px 0px rgba(18,22,49,0.18);
        }
        
          .top-option {
          border-radius: 4px;
          padding: 0.0em 1.0em;
          line-height: 0.0;
          background-color:var(--jasmine);
        }
        
          .top-option a {
      color: var(--jasmine-text);
      text-decoration: none;
      }
        

        .info-box {
          border-radius: 10px;
          padding: 14px;
          max-width: 800px;
          margin: 10px auto;
          background-color:#c2c2c2; 
          color:#262626;
          -webkit-box-shadow: 11px 10px 7px 0px rgba(18,22,49,0.28);
          box-shadow: 5px 5px 2px 0px rgba(18,22,49,0.18);
        }
        
        .sidebar {
          height: 80vh;
          width: 250px;
          position: sticky;
          z-index: 1;
          top:  20px;
          align-self: start;
          margin: 10px 20px;
          border-radius: 10px;
          padding: 4px;
          color:white;
          background-color: #4d4d4d;
          -webkit-box-shadow: 11px 10px 7px 0px rgba(18,22,49,0.28); 
          box-shadow: 5px 5px 2px 0px rgba(18,22,49,0.18);
        }
        
      .sidebar a {
      color:#e3e3e3;
      text-decoration: none;
      }


        .coral-box {
          color: var(--coral-text);
          background: var(--coral);
        }
        
        .coral-box a {
        color: var(--coral-text);
        }
        
        
      
        .peach-box {
          color: var(--peach-text);
          background: var(--peach);
        }
        
        .peach-box a {
        color: var(--peach-link);
        }
        
        
        
        .jasmine-box {
          color: var(--jasmine-text);
          background: var(--jasmine);
        }
        .jasmine-box a {
        color: var(--jasmine-link);
        }
        
        
        
        .tea-box {
          color: var(--tea-text);
          background: var(--tea);
        }
        .tea-box a {
        color: var(--tea-link);
        }
        
        
        
        .ice-box {
          color: var(--ice-text);
          background: var(--ice);
        }
        
        .ice-box a {
        color: var(--ice-link);
        }
        
        
        
        .plum-box {
          color: var(--plum-text);
          background: var(--plum);
        }
        
        .plum-box a {
        color: var(--plum-link);
        }
        
             
.halftone {
  position: relative;
  background-color: #c2c2c2;
}

.halftone::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #adadad;
  border-radius: inherit;

  mask-image: url(halftone.png);
  mask-repeat: repeat-x;
  mask-size: auto 100%;   /* keeps native aspect ratio, no squish */
  mask-position: center bottom;

  -webkit-mask-image: url(halftone.png);
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-size: auto 100%;
  -webkit-mask-position: center bottom;
  
}

.halftone > * {
  position: relative;
  z-index: 1;
}