:root {
  --selection-text: 255 255 255;
  --selection-color: 29 78 216;
}
.dark {
  --selection-text: 30 30 30;
  --selection-color: 234 179 8;
}

html {
  scroll-behavior: smooth;
  font-family: 'Ubuntu', sans-serif;
}

::selection {
	color: rgb(var(--selection-text));
	background: rgb(var(--selection-color));
}

[data-toggle-nav][data-open-nav="true"] #line1 {
  transform: translateY(0.375rem) rotate(40deg);
}
[data-toggle-nav][data-open-nav="true"] #line2 {
  transform: scaleX(0);
  opacity: 0;
}
[data-toggle-nav][data-open-nav="true"] #line3 {
  transform: translateY(-0.375rem) rotate(-40deg);
}

[data-nav-overlay][data-is-visible="true"] {
  visibility: visible;
  display: flex;
}

.glass {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(35px);
}

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(35px);
  border-radius: 20px;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
}
section {
  padding: 6rem 0;
}
section:nth-child(2n+1) {
  background-color: #eee;
}
.dark section:nth-child(2n+1) {
  background-color: #222;
}
#hero {
  padding: 0;
}
#hero picture {
  max-height: 768px;
  height: 100%;
  width: 100%;
  background-color: orange;
}