:root {

  --not-color: red; /*rgba(243, 144, 87, 0.9);*/
  --font-prim-color: black;

  --bg-base-color: transparent;
  --bg-prim-color: rgba(255, 255, 255, 0.5);
  
  --bg-alert-color: rgba(243, 144, 87, 0.7);
  --bg-neutral-color: rgba(156, 159, 255, 0.7);
  --bg-success-color: rgba(0, 194, 158, 0.7);

  --bg-occupied-color: rgba(243, 144, 87, 0.7);
  --bg-not-occupied-color: rgba(0, 194, 158, 0.7);
 
  --fg-hotel-color: rgba(48, 0, 51);
  --bg-hotel-color: rgba(223, 139, 229, 0.6);

  --fg-hostel-color: rgba(191, 68, 0);
  --bg-hostel-color: rgba(255, 224, 20, 0.6);

  --fg-campground-color: rgba(0, 158, 25);
  --bg-campground-color: rgba(93, 189, 108, 0.6);

  --fg-accomodation-color: rgba(0, 142, 189);
  --bg-accomodation-color: rgba(0, 189, 251, 0.6);

  --bg-elements-list-color: rgba(240,240,240, 0.8);

  --bg-attribution-color: rgba(112, 112, 238, 0.452);
  --fg-attribution-color: aliceblue;

  --top-nav-background: rgba(0, 37, 59, 0.8);
  --top-nav-color: #E5F6FF;

  --box-shadow:
      0px 0px 1.2px rgba(0, 0, 0, 0.159),
      0px 0px 2.8px rgba(0, 0, 0, 0.265),
      0px 0px 4.3px rgba(0, 0, 0, 0.332),
      0px 0px 7.4px rgba(0, 0, 0, 0.368),
      0px 0px 10.5px rgba(0, 0, 0, 0.382),
      0px 0px 22px rgba(0, 0, 0, 0.41)
    ;
  --box-shadow-clicked:
      0px 0px 1.2px rgba(0, 0, 0, 0.259),
      0px 0px 1.8px rgba(0, 0, 0, 0.365),
      0px 0px 2.3px rgba(0, 0, 0, 0.432),
      0px 0px 3.4px rgba(0, 0, 0, 0.468),
      0px 0px 4.5px rgba(0, 0, 0, 0.482),
      0px 0px 7px rgba(0, 0, 0, 0.51)
    ;
}

body {
  overflow: hidden;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

input {
  background-color: var(--bg-prim-color);
}

*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: 'Raleway';
  background-color: var(--bg-prim-color);
  color: var(--font-prim-color);
}

input {
  font-family: 'Raleway';  
}

input[type="radio"]:focus {
  outline: none;
  box-shadow: none;
}

*:focus-visible {
  outline: none;
}

a:focus {
  color: var(--font-prim-color);
  outline-style: none;
}
a:link {
  color: var(--font-prim-color);
}
a:visited {
  color: var(--font-prim-color);
}
a:hover {
  color: var(--font-prim-color);
}
a:active {
  color: var(--font-prim-color);
}

ul {
  margin-inline-start: 1rem;
  margin-top: 0.3rem;
  margin-bottom: 0.2rem;
}

ol {
  padding-left: 0.5rem;
  margin: 1rem;
}

p {
  margin-bottom: 0.5rem;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.6rem;
}

h3 {
  font-size: 1.4rem;
}

address {
  font-size: 1.1rem;
  font-style: normal;
}