:root {
  --font-size-body: 1.0625rem;
  --font-size-mono: 0.9375rem;
  /* --font-size-pre-mono: 12px; */

  --color-background: #f6f6f6;
  --color-offset: #eee;
  --color-faded: #c1c7cd;
  --color-gray-lighter: #808080;
  --color-gray: #767676;
  --color-text: #414141;
  --color-text-extreme: #000;
  --color-accent: #0070e0;
  --color-link: #0070e0;


  --font-family-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --radius: 10px;
  --radius-small: 0.5rem;
  --radius-mini: 0.3rem;

  --width: 700px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #202020;
    --color-offset: #363636;
    --color-faded: #555;
    --color-gray: #767676;
    --color-text: #FFFEFA;
    --color-text-extreme: #fff;
  }
}

/* Reset -------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
}

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  scroll-behavior: smooth;
}

html {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  background: var(--color-background);
  color: var(--color-text);
}

body {
  max-width: var(--width);
  margin: 0 auto;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -ms-font-feature-settings: "kern" 1;
  -o-font-feature-settings: "kern" 1;
  font-feature-settings: "kern" 1,"kern","kern";
  -webkit-font-kerning: normal;
  font-kerning: normal;
}

main {
  padding: 0 1rem 3rem;
  margin: 3.5rem 0;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  object-fit: cover;
  -o-object-fit: cover; /* for older versions of Opera */
  object-position: center; /* for older versions of Safari */
}

img {
  border-radius: var(--radius);
  margin: 1.5rem 0rem 
}  

input,
button,
textarea,
select {
  font: inherit;
  border: 0;
  line-height: 1;
  background: none;
  color: var(--color-text);
}

input,
textarea,
select {
  display: block;
  width: 100%;
}

button {
  cursor: pointer;
  background: var(--color-faded);
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}


@media (max-width: var(--width)){
  html {
      font-size: 15px;
  }

  main {
      padding: 1rem 1rem 4rem;
      margin: 0 0 3.5rem 0;
    }
}

table, th, td {
  border: 1px solid var(--color-faded);
  border-collapse: collapse;
}

th, td {
  padding: 5px 5px;
}
table{
  min-width: 600px;
}

/* horizontalni scrollovani tabulky na mobilu */
@media only screen and (max-width: 700px) {
.scrollmenu {
    width: 100%;
    height: fit-content;
    white-space: wrap;    
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; 
}
}




/* Typography --------------------------------------------------------------- */


h1{
  font-size: 1.875;
  color: var(--color-text);
  font-weight: 600;
  margin-bottom: 1rem;
  text-transform: lowercase;
}


h2 {
  font-size: 1.313rem;
  color: var(--color-text);
  font-weight: 500;
  margin-bottom: 1rem;
  text-transform: lowercase;
}

h3,
h4,
h5,
h6 {
  font-size: 1rem;
  color: var(--color-text);
  font-weight: 400;
}

h1:first-child {
  margin-top: 0rem;
}

h1 {
  margin-top: 3rem;
}

h2 {
  margin-top: 2rem;
}

h3 {
  margin-top: 1rem;
}

h5 {
  color: var(--color-faded)
}

p,
ol,
ul,
pre {
  margin: 0 0 1rem 0; 
}

blockquote {
  margin: 1rem 0; 
}


a {

  /*padding: 2px 6px 3px 6px;
  border-radius: var(--radius-mini);
  background: var(--color-offset);
  */

  color: var(--color-link);
  text-decoration: none;
}

a:hover {
  color: var(--color-link);
}


ul {
  list-style-type: none;
  margin-left: 2rem;
}

ul li:before,
ol ul li:before {
  position: absolute;
  margin-left: -2rem;
  content: "—";
  color: var(--color-faded);
  font-weight: 500;
  margin-right: 0.5rem;
}

ol {
  list-style-type: none;
  margin-left: 2rem;
  counter-reset: list;
}

ol li:before {
  position: absolute;
  margin-left: -2rem;
  color: var(--color-faded);
  font-weight: 500;
  margin-right: 0.5rem;
  content: counter(list) ".";
  counter-increment: list;
}

b,
strong {
  font-weight: 500;
}

aside,
aside p {
  font-size: 0.8rem;
  color: var(--color-gray);
}

aside p:first-of-type {
  margin-top: 0;
}

aside p:last-of-type {
  margin-bottom: 0;
}

aside a {
  text-decoration: none;
}

aside code {
  background: none;
  padding: 0;
  font-size: calc(var(--font-size-mono) * 0.9);
}

pre,
code {
  font-family: var(--font-family-mono);
  font-size: 15px;
}

pre {
  overflow: auto;
  padding: 0.5rem;
  overflow-x: scroll;
  border-radius: var(--radius-mini);
  background-color: var(--color-offset);
  tab-size: 1rem;
  white-space: pre;
  font-size: var(--font-size-pre-mono);
}

code {
  padding: 2px 6px 3px 6px;
  border-radius: var(--radius-mini);
  background: var(--color-offset);
  color: #515151;
}

pre code {
  background-color: var(--color-offset);
  /* font-size: var(--font-size-pre-mono); */
  border-radius: 0;
  padding: 0;
}

blockquote {
  border-left: 2px solid var(--color-offset);
  padding-left: 1rem;
  color: var(--color-gray-lighter);
}

hr {
  border: none;
  border-top: 2px solid var(--color-offset);
  color: var(--color-faded);
  margin: 2rem 0;
}


input#menu{
  display: none;
}

.accordion .content {
    max-height: 0;
    /*opacity: 0;*/
    overflow: hidden;
    transition: all 1s;
}

.accordion input[type="checkbox"]:checked + label + .content {
    /*opacity: 1; */
   max-height: 1000px;
    transition: all 1s;

    /*overflow: visible;*/

}

.accordion{
  position: fixed;
  top: 3rem;
  right: 30px;
 
}

.content{
  padding: 0px;
  border-radius: 20px;

  background-color: rgba(211, 211, 211, 0.6);
  border-radius: 20px;
  --tw-backdrop-blur: blur(40px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur);
  backdrop-filter: var(--tw-backdrop-blur);


  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;

}

.menu{
  cursor: pointer;
  width: fit-content;
  margin-left: auto;

  background-color: rgba(211, 211, 211, 0.6);
  padding: 10px 20px;
  border-radius: 20px;
  --tw-backdrop-blur: blur(40px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur);
  backdrop-filter: var(--tw-backdrop-blur);
}


.menu_list{
list-style: none;
padding: 10px 20px;
border-bottom:1px solid var(--color-faded);
}

.menu_list:hover{
list-style: none;
padding: 10px 20px;
border-bottom:1px solid var(--color-faded);
background-color: var(--color-offset);
mix-blend-mode: normal;

}

.menu_list:last-child:hover {
border-radius: 0 0 20px 20px;
}

.menu_list:first-child:hover {
border-radius: 20px 20px 0 0;
}

.menu_list:last-child{
  border-bottom: none;
}

.sticky_menu{
  position: sticky;
  top: 30px;

  padding: 20px;
  border-radius: 20px;

  background-color: rgba(211, 211, 211, 0.6);
  padding: 20px;
  border-radius: 20px;
  --tw-backdrop-blur: blur(40px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur);
  backdrop-filter: var(--tw-backdrop-blur);
}