/* ###################################### reset CSS ###################################### */

:root {
  --main-bg-color: #eed89a;
  --main-text-color: #fff;
  --main-font-family: "Roboto", Arial, Helvetica, sans-serif;
  --main-font-size: 16px;
}

/* ###################################### blocchi ###################################### */
html,
body {
  font-family: var(--main-font-family);
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
  font-size: var(--main-font-size);
}

/* ###################################### elementi ###################################### */
.div-container-header {
  padding: 10px;
  height: 60px;
}

.div-menu {
  height: 100vw;
  width: 30%;
  position: absolute;
  top: 60px;
  left: 0;
  border-radius: 0 0 10px 0;
  font-size: 0.8rem;
  z-index: 100;
}

.div-btn {
  position: absolute;
  width: 25px;
  top: 60px;
  left: 30%;
  cursor: pointer;
  font-size: 1.3rem;
  font-weight: bold;
  color: #000;
  margin: 0;
  padding: 0;
  border-radius: 0 5px 5px 0;
  display: flex;
  z-index: 101;
}

.div-btn:hover {
  color: red;
}

.div-btn i {
  margin: 0 auto;
}

/* ###################################### utilità ###################################### */

.color-dark {
  color: #404040;
}

.bor-arrotonda {
  border-radius: 10px;
}

.width-100 {
  width: 100%;
}

.bg-green {
  background-color: rgb(88, 151, 88);
}

.bg-blu {
  background-color: rgb(88, 88, 151);
}

.bg-acqua {
  background-color: rgba(88, 151, 151, 0.84);
}

.margin-center {
  margin: 0 auto;
}

.link-switch {
  color: #393939;
  /* Colore del link */
  text-decoration: none;
  /* Rimuove la sottolineatura del link */
  cursor: pointer;
  /* Cambia il cursore al passaggio del mouse */
}

.link-switch:hover {
  text-decoration: underline;
  /* Aggiunge la sottolineatura al passaggio del mouse */
  color: #0056b3;
  /* Cambia il colore del link al passaggio del mouse */
}

.justify {
  text-align: justify;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.list-style-none {
  list-style: none;
}

.font-size-sm {
  font-size: 0.8rem;
}

.position-inline {
  display: inline-block;
}

.position-inline-block {
  display: inline-block;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
}

.position-sticky {
  position: sticky;
}

.align-center {
  text-align: center;
}

.align-right {
  text-align: right;
}

.align-left {
  text-align: left;
}

.align-justify {
  text-align: justify;
}

.align-top {
  vertical-align: top;
}

.align-bottom {
  vertical-align: bottom;
}

.align-middle {
  vertical-align: middle;
}

.align-baseline {
  vertical-align: baseline;
}

.align-text-top {
  vertical-align: text-top;
}

.align-text-bottom {
  vertical-align: text-bottom;
}

.align-text-middle {
  vertical-align: text-middle;
}

.align-text-baseline {
  vertical-align: text-baseline;
}

.align-text-bottom {
  vertical-align: text-bottom;
}

.align-text-top {
  vertical-align: text-top;
}

.align-item-center {
  align-items: center;
}

.align-item-start {
  align-items: flex-start;
}

.align-item-end {
  align-items: flex-end;
}

.align-item-baseline {
  align-items: baseline;
}

.align-item-stretch {
  align-items: stretch;
}