@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Play", sans-serif;
  font-weight: 400;
}


* {
  --sb-track-color: var(--JaBuvo1);
  --sb-thumb-color: var(--JaBuvo2);
  --sb-size: 10px;
}

*::-webkit-scrollbar {
  width: var(--sb-size)
}

*::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 0px;
}

*::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 0px;
  
}

@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-color: var(--sb-thumb-color)
                     var(--sb-track-color);
  }
}

h1,
h2, 
h3 {
  font-weight: 700;
}

a {
  text-decoration: none;
  color: var(--JaBuvo2);
}

a:visited {
  color: var(--JaBuvo2);
}

a:hover {
  color: var(--JaBuvo3);
  text-shadow: 1px 1px var(--JaBuvo2);
}

#aside {
  position: fixed;
  width: 350px;
  height: 100svh;
  background-color: var(--JaBuvo1);
  top: 0px;
  left: -400px;
  transition: 1s ease;
  z-index: 2;
}

.open {
  left: 0px !important; 
  transition: 1s ease;
}

main {
  width: 90%;
  margin: auto;
}

main section {
  display: inline-block;
  width: 100%;
  min-height: 50px;
  margin: 5px 0px;
  border-radius: 5px;
}

.yesPhone {
  display: none;
}

aside a {
  display: block;
  margin: 5px 0px 5px 0px;
}

.asideScroll {
  max-height: 250px;
  overflow-y: auto;
}

.lowAside {
  width: calc(100% - 20px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: absolute;
  bottom: 10px;
}

@media (max-width: 700px) {
  .noPhone {
    display: none;
  }
  #menuKnop {
    left: auto !important;
    right: 15px !important;
  }
  .yesPhone {
    display: inline;
  }
}