@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap");
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@keyframes fromright {
  from {
    transform: translateX(100vw);
  }
  to {
    transform: translateX(0);
  }
}
body {
  display: flex;
  font-family: "Roboto", sans-serif;
  line-height: 1.5;
  width: 100vw;
  overflow-x: hidden;
}
body .container {
  width: 100%;
  margin: 0 auto;
}
@media screen and (min-width: 1600px) {
  body .container {
    width: 1600px;
  }
}
body .container > * {
  padding: 2rem;
}
@media screen and (min-width: 1200px) {
  body .container > * {
    padding: 4rem;
  }
}
body a {
  text-decoration: none;
  color: hsl(220deg, 60%, 25%);
  font-weight: bold;
  transition: color 250ms linear;
}
body a:hover {
  color: hsl(0deg, 58%, 35%);
}
body ul {
  list-style: none;
}
body .plain {
  width: 100%;
  height: auto;
  padding: 0;
}
body .plain > img {
  width: 100%;
  display: block;
}
body .adrxxx {
  unicode-bidi: bidi-override;
  direction: rtl;
  user-select: none;
}
body .logo {
  width: 100%;
  padding: 1rem 10%;
  animation: fromright 1250ms ease-in-out forwards;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
body .logo > svg {
  min-width: 15rem;
  max-width: 90%;
}
body .logo > svg .st0,
body .logo > svg .st14 {
  fill: hsl(209deg, 100%, 10%);
}
body .logo > svg .st1,
body .logo > svg .st2,
body .logo > svg .st3,
body .logo > svg .st4 {
  fill: #ffffff;
}
body .logo > svg .st5,
body .logo > svg .st13 {
  fill: hsl(36deg, 65%, 65%);
  transition: all 500ms ease-in-out;
}
body .logo > svg .st6,
body .logo > svg .st7,
body .logo > svg .st8,
body .logo > svg .st10,
body .logo > svg .st11,
body .logo > svg .st12 {
  fill: #ffffff;
}
body .logo > svg .st9 {
  fill: hsl(135deg, 80%, 30%);
  transition: all 500ms ease-in-out 500ms;
}
body .logo > svg:hover .st5,
body .logo > svg:hover .st13 {
  fill: hsl(50deg, 100%, 50%);
}
body .logo > svg:hover .st9 {
  fill: hsl(135deg, 100%, 40%);
}
body .header,
body .footer {
  background-color: rgba(224, 177, 108, 0.5);
  width: 100%;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
body .header {
  background-color: rgba(224, 177, 108, 0.35);
  justify-content: center;
  align-items: center;
}
body .footer {
  margin-top: 2rem;
}
body .band {
  text-align: center;
}
body .band h1 {
  font-size: 2rem;
}
@media screen and (min-width: 1024px) {
  body .band h1 {
    font-size: 3rem;
  }
}
@media screen and (min-width: 1400px) {
  body .band h1 {
    font-size: 4rem;
  }
}
@media screen and (max-width: 320px) {
  body .band h1 {
    font-size: 1.6rem;
  }
}
body .history {
  columns: 280px 3;
}
body .gigs {
  margin-top: 1.5rem;
  min-height: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}
body .gigs .gig {
  background-color: rgba(171, 173, 133, 0.2);
  padding: 1rem;
  border-radius: 1rem;
}
body .gigs .gig_date {
  border-bottom: 1px solid hsl(64deg, 20%, 60%);
}
body .gigs .gig_title {
  color: hsl(0deg, 58%, 35%);
  text-transform: uppercase;
  font-size: 1.5rem;
  margin: 0.5rem 0;
}
body .gigs .gig_contact {
  color: hsl(64deg, 50%, 30%);
}
body .gigs .gig img {
  width: max(50vw, 40rem);
  max-width: 100%;
  margin-top: 1rem;
  border-radius: 1rem;
}
body .bandmembers {
  min-height: 50px;
  background-color: #1a3366;
  color: #ffffff;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: minmax(50px, auto);
  grid-gap: 20px;
  width: 100%;
  margin: 0;
}
body .bandmembers .card figure {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
body .bandmembers .card figure img {
  display: block;
  width: 100%;
  max-width: 200px;
  border-radius: 50%;
  box-shadow: 3px 3px 27px -2px #000000, inset 3px 3px 9px -1px #ffffff;
  transition: border-radius 300ms ease-in-out;
}
body .bandmembers .card figure figcaption {
  text-align: center;
  margin: 1rem 0 2rem 0;
  transition: transform 300ms ease-in-out, font-weight 300ms ease-in-out;
}
body .bandmembers .card figure:hover img {
  border-radius: 40%;
}
body .bandmembers .card figure:hover figcaption {
  transform: scale(1.25);
  font-weight: bold;
}
body .bandmembers .color_1 {
  background-color: hsl(36deg, 65%, 65%);
}
body .bandmembers .color_2 {
  background-color: hsl(0deg, 58%, 35%);
}
body .bandmembers .color_3 {
  background-color: hsl(64deg, 20%, 60%);
}
body .bandmembers .color_4 {
  background-color: hsl(220deg, 60%, 25%);
}
body .bandmembers .color_5 {
  background-color: hsl(50deg, 100%, 50%);
}
body .bandmembers .color_6 {
  background-color: hsl(135deg, 100%, 40%);
}
body .bandmembers .color_7 {
  background-color: hsl(36deg, 95%, 70%);
}
body .bandmembers .color_8 {
  background-color: hsl(135deg, 80%, 30%);
}
body .fa-youtube {
  color: #ff0000;
}
body a .fa-youtube {
  transition: color 250ms linear;
}
body a:hover .fa-youtube {
  color: hsl(0deg, 58%, 35%);
}
body address {
  font-style: normal;
}

/*# sourceMappingURL=style.css.map */