html,body,div,span,applet,object,iframe,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,
tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline
}
body,pre,abbr,acronym,address,code,del,em,b,fieldset,kbd,form,label,legend,caption,summary,header,aside,article,input,details,nav,footer,figcaption,p,li,a,h1,h2,h3,h4,h5,h6{margin: 0;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
  display: block
}

ol, ul {
  list-style: inside;
  /* list-style-type: none; */
}

blockquote,q {quotes: none}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

*,
*:before,
*:after,
:host *,
:host(*) {
  box-sizing: border-box;
  font-size: inherit;
}

/* ---------------------- theme ----------------------- */

html {
  position: relative;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  -ms-overflow-style: none;
}

body {
  width: 100%;
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-o-bg);
  overflow-x: hidden;
  word-break: break-word;
  hyphens: auto;
}

section {
  overflow: hidden;
}

h1,h2,h3,h4,h5,h6 {
  margin-block-start: 0;
  margin-block-end: 0;
}
h1 {font-size: var(--f-size-1)}
h2 {font-size: var(--f-size-2)}
h3 {font-size: var(--f-size-3)}
h4 {font-size: var(--f-size-4)}
h5 {font-size: var(--f-size-5)}
h6 {font-size: var(--f-size-6)}
  
  a,li,pre,code,p {
    font-size: var(--f-size-p);
  }
  p {
    word-break: break-word;
    hyphens: auto;
  }
  :where(p, pre, code) { 
    line-height: 1.4;
  }
  a {
    text-decoration: none;
    cursor: pointer;
  }
  hr {
    border-bottom: dotted 1px currentColor;
    border-top: none;
  }
  
  button {
    height: 32px;
    appearance: none;
    border-radius: 4px;
    transition: color var(--lin-norm), box-shadow var(--lin-norm), background-color var(--lin-norm), transform var(--lin-norm);
    border-style: none;
  }
  button:focus {
    outline: none;
  }
  button:hover {
    cursor: pointer;
  }
  
  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="number"],
  input[type="password"],
  input[type="tel"],
  select,
  textarea {
    font-family: var(--ff-2);
  }

   input[type="text"]:focus,
  input[type="email"]:focus,
  input[type="url"]:focus,
  input[type="number"]:focus,
  input[type="password"]:focus,
  input[type="tel"]:focus,
  select:focus,
  textarea:focus {
    outline: none;
  }
  
  input[type="text"]::placeholder,
  input[type="url"]::placeholder,
  input[type="email"]::placeholder,
  input[type="number"]::placeholder,
  input[type="password"]::placeholder,
  textarea::placeholder {
    color: hsla(var(--o-bg),0.5);
  }
  
