html {
    background-color: #cee3dc;
    font-family:
		system-ui,
		-apple-system, /* Firefox supports this but not yet `system-ui` */
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji';
}

.hero {
  height: 17rem;
  background-image: url(/images/hero.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.my-atuo {
  margin-top: auto;
  margin-bottom: auto;
}

.event-bg {
  background-image: url(/images/bg.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.week-active {
  background: linear-gradient(122deg, #FB5088 0%, #E81472 100%);
}

.triangle-arrow {
  border: 6px solid transparent;
  border-top: 6px solid #fa6b05;
}

.event-list {
  min-height: 20rem;
}

.room-name.green {
  background: rgba(198, 225, 217, 0.7);
}

.room-name.yellow1 {
  background: rgba(233, 236, 216, 0.7);
}
.room-name.yellow2 {
  background: rgba(234, 235, 212, 0.7);
}

.room-item {
  box-shadow: 5px 5px 8px 0px rgba(62,127,96,0.1), inset 0px 1px 1px 0px rgba(255,255,255,0.2);
  border-radius: 16px;
  /* border: 1px solid; */
  position: relative;
  z-index: -0;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background-clip: content-box,padding-box;
  background-image: linear-gradient(141deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.1));
  /* border-image: linear-gradient(141deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.1)) 1 1; */
}
/* .room-item:after {
    content: '';
    position: absolute;
    border-radius: 16px;
    background: linear-gradient(141deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.1));
    top: -1px;
    left: -1px;
    z-index: -1;
} */

.room-content{
  position: relative;
  background: linear-gradient(141deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.1));
}

.room-name-text {
  z-index: 0;
  opacity: 100!important;
}

.room-name-text::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background: url(../images/logo.png) no-repeat center / contain;
  z-index: -1;
  opacity: .05;
}

@media (min-width: 640px) {
  .triangle-arrow {
    border: 6px solid transparent;
    border-top: 6px solid #fa6b05;
  }
}

@media (min-width: 768px) {
  .triangle-arrow {
    border: 6px solid transparent;
    border-top: 6px solid #fa6b05;
  }
}

@media (min-width: 1024px) {
  .triangle-arrow {
    border: 6px solid transparent;
    border-top: 6px solid #fa6b05;
  }
}

@media (min-width: 1280px) {
  .triangle-arrow {
    border: 12px solid transparent;
    border-top: 12px solid #fa6b05;
  }
}

@media (min-width: 1536px) {
  .triangle-arrow {
    border: 12px solid transparent;
    border-top: 12px solid #fa6b05;
  }
}

.footer {
  background-image: url(/images/footer_bg.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}