/* sarabun-regular - latin-ext_latin */
@font-face {
    font-family: "Sarabun";
    font-style: normal;
    src: url("../font/sarabun-v13-latin-ext_latin-regular.eot");
    /* IE9 Compat Modes */
    src: local(""), url("../font/sarabun-v13-latin-ext_latin-regular.eot?#iefix") format("embedded-opentype"),
        /* IE6-IE8 */
        url("../font/sarabun-v13-latin-ext_latin-regular.woff2") format("woff2"),
        /* Super Modern Browsers */
        url("../font/sarabun-v13-latin-ext_latin-regular.woff") format("woff"),
        /* Modern Browsers */
        url("../font/sarabun-v13-latin-ext_latin-regular.ttf") format("truetype"),
        /* Safari, Android, iOS */
        url("../font/sarabun-v13-latin-ext_latin-regular.svg#Sarabun") format("svg");
    /* Legacy iOS */
}


/* roboto-regular - latin_cyrillic */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    src: url('../font/roboto-v30-latin_cyrillic-regular.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('../font/roboto-v30-latin_cyrillic-regular.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../font/roboto-v30-latin_cyrillic-regular.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../font/roboto-v30-latin_cyrillic-regular.woff') format('woff'),
        /* Modern Browsers */
        url('../font/roboto-v30-latin_cyrillic-regular.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../font/roboto-v30-latin_cyrillic-regular.svg#Roboto') format('svg');
    /* Legacy iOS */
}

body {
    font-family: "Sarabun", "Roboto", "sans-serif";
    font-style: normal;
}





.navbar > li {
    margin: 0 1rem;
    overflow: hidden;
  }
  
  .menu-button-container {
    display: none;
    width: 30px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  #menu-toggle {
    display: none;
  }
  
  .menu-button,
  .menu-button::before,
  .menu-button::after {
    display: block;
    background-color: #000000;
    position: absolute;
    height: 4px;
    width: 30px;
    transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1);
    border-radius: 2px;
  }
  
  .menu-button::before {
    content: "";
    margin-top: -8px;
  }
  
  .menu-button::after {
    content: "";
    margin-top: 8px;
  }
  
  #menu-toggle:checked + .menu-button-container .menu-button::before {
    margin-top: 0px;
    transform: rotate(405deg);
  }
  
  #menu-toggle:checked + .menu-button-container .menu-button {
    background: rgba(255, 255, 255, 0);
  }
  
  #menu-toggle:checked + .menu-button-container .menu-button::after {
    margin-top: 0px;
    transform: rotate(-405deg);
  }