/*--pallette--*/
    :root {
        --black: #0c1519;
        --white: #eaceaa;
        --color1: #34150f;
        --color2: #d39858;
        --color3: #724b39;
        --color4: #3a3534;
        --color5: #162127;
        --accent: #cf9d7b;
    }

/*-- tool tip --*/
  
    #s-m-t-tooltip{
      font-family: 'Quicksand', sans-serif;
      font-size: 11px;
      line-height: 16px;
      color: var(--white);
      background-color: var(--accent);
      max-width:500px;
      padding:8px;
      -moz-border-radius:3px;
      -webkit-border-radius:3px;
      border-radius:3px;
      -moz-box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255,0.3);
      -webkit-box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255,0.3);
      box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255,0.3);
    }

/*-- webkits --*/
   ::-webkit-scrollbar {
        display: block;
        scrollbar-width: 0.5px;
        background-color: transparent;
        scrollbar-color: var(--white);
    }

    ::-webkit-scrollbar-thumb {
      background-color: transparent;
    }

/*-- text style --*/
    
    body {
            background-color: var(--black);
            color: var(--white);
            font-family: 'Quicksand', sans-serif;
            font-size: 13px;
        }

        a {
            background-color: transparent;
            color: var(--color2);
        }
        a[title]:hover:after {
            content: attr(title);
            position: absolute;
            top: -100%;
            left: 0;
            background-color: var(--color3)
            color: var(--white);
        }

        blockquote {
            font-style: italic;
            border-left: 5px solid var(--accent);
            padding: 10px 20px;
        }

        li {
            padding: 5px;
        }

        h1 {
            background-color: transparent;
            color: var(--accent);
            font-family: 'Chonburi';
            font-weight: 700;
            font-size: 28px;
            text-align: center;
        }

        h2 {
            background-color: transparent;
            color: var(--color4);
            font-family: 'Chonburi';
            font-size: 24px;
            font-weight: 600;
            text-align: center;
        }

        h3 {
            background-color: transparent;
            color: var(--color1);
            font-family: 'Chonburi';
            font-size: 20px;
            font-weight: 400;
            text-align: left;
        }

        h4 {
            background-color: transparent;
            color: var(--color5);
            font-family: 'Chonburi';
            font-size: 18px;
            font-weight: 300;
            text-align: left;
        }

        h5 {
            background-color: transparent;
            color: var(--color2);
            font-family: 'Chonburi';
            font-size: 16px;
            font-weight: 300;
            text-align: left;
        }

    /*-- elements --*/

        button {
            background-color: var(--accent);
            color: var(--black);
            font-family: 'Quicksand';
            padding: 3px;
        }

        table.info { 
            width: 100%; 
            text-align: left; 
            border-collapse: collapse; 
            border:1px solid transparent;
        } 
        
        table.info tbody td { 
            width: 60%; 
            padding: 15px;
        }


    /*-- container --*/

        .container {
            background-color: transparent;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            padding: 10px;
            margin-left: 20%;
            margin-right: 10%;
            padding: 10px;
            align-content: center;
        }
              
    /*-- boxes --*/

        .info-box {
            width: 35%;
            background-color: var(--black);
            font-size: 13px;
            border: none;
            line-break: normal;
            padding: 5%;
        }

        .box {
          background-color: var(--black);
          border: 1px solid var(--black);
          border-radius: 8px;
          padding: 20px;
          line-break: normal;
          width: 100%;
        }

    /*-- sidebar --*/
        #sidebar {
            width: 15%;
            background-color: var(--white);
            position:fixed;
            margin-top: 50px;
            margin-left: 20px;
            padding: 10px;
        }

        #sidebar button {
            background-color: var(--accent);
            font-family: 'Quicksand';
            width: 100%;
            height:80px;
            position: auto;
            padding: 10px;
            border: transparent;
            vertical-align: center;
        }
        #sidebar button:hover {
            background-color: var(--white);
            color: var(--color3);
        }
        #sidebar button:active {
            background-color: var(--white);
            color: var(--color3);
        }

        #sidebar ul {
          list-style-type: none;
        }

    /*-- pages --*/
        .tabcontent {
          padding: 20px;
          display: none;
          border: none;
        }
        
        .img {
          display: flex;
          align-content: center;
          width: 100%;
          height: auto;
          object-fit: cover;
        }