@font-face {
  font-family: 'Chillax-Regular';
  src: url('../fonts/Chillax-Regular.woff2') format('woff2'),
       url('../fonts/Chillax-Regular.woff') format('woff'),
       url('../fonts/Chillax-Regular.ttf') format('truetype');
       font-weight: 400;
       font-display: swap;
       font-style: normal;
}

@font-face {
font-family: "Chillax-Semibold";
src: url("../fonts/Chillax-Semibold.woff2") format("woff2"),
        url("../fonts/Chillax-Semibold.woff") format("woff"),
        url("../fonts/Chillax-Semibold.ttf") format("truetype");
        font-weight: 600;
        font-display: swap;
        font-style: normal;
}
  
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: #fffbef;
    font-size: 24px;
    scroll-behavior: smooth;
    scroll-padding-top: 120px;
    user-select: none;
}

html, body {
    overflow-x: clip;
}

a, p {
    font-family: "Chillax-Regular";
    text-decoration: none;
    color: black;
}

h1, h2 {
    font-family: "Chillax-Semibold";
}

button,
div,
img,
a,
li {
    -webkit-tap-highlight-color: transparent;
}

.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fffbef;
    transition: opacity 0.75s, visibility 0.75s;
    z-index: 100;
  }
  
  .loader-hidden {
    opacity: 0;
    visibility: hidden;
  }
  
  .loader::after {
    content: "";
    width: 3rem;
    height: 3rem;
    border: 0.4rem solid #000000;
    border-top-color: #9526ff;
    border-bottom-color: #56fec1;
    border-right-color: #faad81;
    border-radius: 50%;
    animation: loading 0.75s ease infinite;
  }
  
  @keyframes loading {
    from {
      transform: rotate(0turn);
    }
    to {
      transform: rotate(1turn);
    }
  }
  
/* Navigation */
nav {
    background-color: #fffbef;
    position: sticky;
    top: 0;
    z-index: 1;
}

.main-nav {
    display: flex;
    margin: 0rem 10%;
    text-align: center;
    justify-content: space-between;
}

.menu-icon {
    display: none;
}

.logo {
    width: 8rem;
    padding: 0.5rem;
}

ul {
    display: flex;
    min-width: 50%;
    justify-content: space-between;
}

li {
    margin: auto;
    padding: 1rem;
    list-style-type: none;

}

a.menuItem.active {
    font-family: "Chillax-Semibold";
}

.bold {
    font-weight: 700;
}

/* Header */
.cover-photo {
    width: 100%;
    height: auto;
}

/* Titles */
.line {
    width: 100%;
    height: 0.4rem;
    margin-top: 1.7rem;
    background-color: black;
}

.line-bottom {
    position: relative;
    bottom: 1.7rem;
}

.line-title {
    display: flex;
    justify-content: center;
}

.head-title {
    padding: 0 4rem;
    font-size: 2.8rem;
    background-color: #fffbef;
    text-align: center;
    white-space: nowrap
}

.contact-head-title {
    text-align: center;
    font-size: 2.8rem;
    margin: 2rem;
}

/* Notes */
.note { 
    height: 4rem;
    position: relative;
}

.note-text {
    height: 1.2rem;
    rotate: 20deg;
}

.notes-line {
    display: flex;
    gap: 2rem;
}

.n1 {
    left: 20%;
    bottom: 10.5rem;
    rotate: 10deg;
}

.n2 {
    bottom: 6.2rem;
    rotate: -30deg;
}

.n3 {
    float: right;
    right: 20%;
    bottom: 8.5rem;
    rotate: 20deg;
}

.n4 {
    float: right;
    right: 5%;
    bottom: 5rem;
    rotate: -20deg;
}

.notes-container {
    margin-top: -2rem;
}

/* About band */
.about-band-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    margin: 0 10%  4rem 10%;
}

.about-band-row {
    display: flex;
    align-items: center;
    gap: 5rem;
}

.about-img {
    flex-basis: 40%;
}

.about-band-img {
    max-width: 100%;
}

.about-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 1rem;
    flex-basis: 50%;
}
.about-text h1 {
    font-size: 2.5rem;
}

/* Lineup */
.lineup-container {
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-wrap: wrap;
    gap: 2rem;
    margin: 0 10% 4rem 10%;
}

.person {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    width: 30%;

}

.person h1,
.person p {
    text-align: center;
}

.person img {
    width: 12rem;
}

/* Music */
.videos {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: start;
    margin: 0 10% 4rem 10%;
}

.video {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    text-align: center;
    width: 40%;
    margin: 2rem;
}

.video iframe {
    height: 400px;
    width: auto;
    border: none;
    border-radius: 60px;
}

.v1 iframe{
    box-shadow: 10px 10px #faad81;   
}

.v2 iframe{
    box-shadow: 10px 10px #9526ff;   
}

.v3 iframe{
    box-shadow: 10px 10px #56fec1;   
}

/* Contact */
.contact-head-title {
    margin-top: 0;
}

.contact-staff {
    display: flex;
    align-items: center;
}

.contact-lines {
    width: 100%;
}

.contact-info {
    display: flex;
    justify-content: center;
    gap: 8rem;
    margin: 2rem 0 6rem 0;
}

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

.contact-icon {
    width: 5rem;
    margin: 1rem;
}

.contact-staff img {
    height: 13rem;
}

/* Social media */
.social-media {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Footer */
.copyright {
    text-align: center;
    font-size: 0.8rem;
    margin: 3rem 0 3rem 0;
}

.sm-icon {
    height: 3rem;
}

.cabel {
    height: 3rem;
}


@media only screen and (max-width: 1300px) {
    html {
        font-size: 16px;
    }

    /* Navigation */
    nav {
        background-color: #fffbef;
    }
   
    .main-nav {
        width: 100%;
    }
    
    ul {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background-color: #fffbef;
        transform: translateY(-100%);
        z-index: -3;
    }

    .active {
        font-family: "Chillax-Regular";
    }

    .menu-icon {
        display: block;
        position: absolute;
        top: 0.6rem;
        right: 10%;
    }

    .showmenu {
        display: flex;
        flex-direction: column;
        transform: translateY(70px);
        transition: 1s;
    }

    .video iframe {
        height: 250px;
    }
}

@media only screen and (max-width: 820px) {

    /* Navigation */
    .menu-icon {
        width: 2.4rem;
    }

    .showmenu {
        transform: translateY(60px);
    }

    .logo {
        width: 6.5rem;
    }

    a.menuItem.active {
        font-family: "Chillax-Regular";
    }

    /* Header */
    header {
        display: flex;
        justify-content: center
    }

    .cover-photo {
        width: 140%;
    }
    
    /* Titles */
    .line {
        height: 0.2rem;
        margin-top: 1.2rem;
    }

    .head-title {
        padding: 0 2rem;
        font-size: 2.2rem;
    }

    .contact-head-title {
        font-size: 2.2rem;
        margin: 0;
    }

    /* Notes */
    .note { 
        height: 2.8rem;
        position: relative
    }

    .n1 {
        left: 15%;
        bottom: 7rem;
        rotate: 10deg;
    }

    .n2 {
        right: 5%;
        bottom: 4.2rem;
    }

    .n3 {
        right: 14%;
        bottom: 5.5rem;
        rotate: 10deg;
    }

    .n4 {
        left: 2%;
        bottom: 2rem;
    }

    /* About band */
    .about-band-container p {
        padding: 0 0 1rem 0;
        text-align: center;
    }
        
    .about-band-row {
        flex-direction: column;
        gap: 2rem;
    }

    .about-img {
        width: 70%;
        order: 1;
    }

    .about-text h1 {
        font-size: 2.2rem;
    }


    /* Lineup */
    .lineup-container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .person {
        width: 100%;  
    }

    /* Music */
    .videos {
        margin: 0 10% 2rem 10%;
    }

    .video {
        width: 100%;
    }

    .video iframe {
        height: 250px;
    }

    /* Contact */
    .contact-info {
        gap: 4rem;
        margin: 2rem 0 4rem 0;
    }

    .contact-icon {
        width: 3rem;
        margin: 1rem;
    }
 
    .contact-staff img {
        height: 10rem;
    }

    /* Social media */
    .sm-icon {
        height: 3rem;
    }

    .cabel {
        height: 2rem;
    }

    .c1 {
        margin-left: -6rem;
    }

    .c2 {
        margin-right: -6rem;
    }

    /* Footer */
    .copyright {
        margin: 2rem 0;
    }

}

@media only screen and (max-width: 400px) {

    /* Navigation */
    .menu-icon {
        width: 2rem;
    }

    .showmenu {
        transform: translateY(60px);
    }

    .logo {
        width: 6rem;
    }

    /* Header */
    .cover-photo {
        width: 160%;
    }

    /* Notes */
    .note { 
        height: 2.2rem;
        position: relative
    }

    .n1 {
        left: 15%;
        bottom: 7rem;
        rotate: 10deg;
    }

    .n2 {
        right: 9%;
        bottom: 4.2rem;
    }

    .n3 {
        right: 6%;
        bottom: 5.5rem;
        rotate: 10deg;
    }

    .n4 {
        left: 10%;
        bottom: 2rem;
    }

    /* About band */
    .about-img {
        width: 90%;
    }

    /* Contact */
    .contact-info {
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .contact-icon {
        width: 3rem;
        margin: 1rem;
    }

    .contact-staff img {
        height: 8rem;
    }

    /* Social media */
    .sm-icon {
        height: 2rem;
    }

}