:root {
    --night: #081388;
    --violet: #404fc0;
    --deep: #a4afff;
    --cream: #ffff99;
    --bamboo: hsl(38, 100%, 72%);
    --bamboo2: #C9A15c;
    --marigold: #ff8800;
    --rose: #f9775a;
    --peacock: #55cf78;
    --muted: #bfbdbd;
    --wrap: 1360px;
    --pad: clamp(20px, 4vw, 64px);
    --comicfonts-allofthem: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE';
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--cream);
    background: var(--night);
    font-family: var(--comicfonts-allofthem);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.6;
    overflow-x: hidden;
}

h1,
h2,
h3 {

    font-family: var(--comicfonts-allofthem);
    font-weight: 410;
    margin: 0;
    line-height: 1.0;
}

p {
    margin: 0 0 1.2em;
}

p:last-child {
    margin-bottom: 18px;
}

b {
    font-weight: 500;
    color: var(--bamboo);
}

em {
    font-style: normal;
    color: var(--marigold);
}

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--pad);
}



/*-- Nav --*/
.bar {
    top: 0;
    z-index: 25;
    /*GAP between the yellow hindi word and the buttons beside it*/
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
    border-bottom: 1px solid #000000;
    padding: 15px var(--pad);
    background: rgba(0, 93, 31, 0.87);
}

.mark {
    font-size: 22px;
    font-family: var(--comicfonts-allofthem);
    color: var(--bamboo);
}

.links {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}

.body-with-img {
    display: grid;
    grid-template-columns: 66ch minmax(220px, 1fr);
    gap: clamp(24px, 4vw, 60px);
    align-items: start;
}

.side-img {
    margin: 0;
}

.side-img img {

    display: block;
    width: 100%;
    height: 420px;
    aspect-ratio: 4 / 5;
    /*Basically a vertical rectangle*/
    object-fit: cover;
    border: 1px solid var(--violet);
}

@media (max-width: 900px) {
    .body-with-img {
        grid-template-columns: 1fr;
    }
}




.links a {
    font-size: 15px;
    color: var(--muted);
    text-decoration: none;
}

.links a:hover {
    color: var(--cream);
}

/* No matter what, marigold should be used for the hot class,
so !important is added to override any other styles that may be applied to it. */
.hot {
    color: var(--marigold) !important;
}

/*hero*/
/* I change the view height a bit to make it more visually appealing */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px var(--pad) 70px;
}

.hero-inner {
    max-width: 680px;
}

.eyebrow {
    font-size: 12.5px;
    letter-spacing: 0.22em;
    color: var(--peacock);
    margin-bottom: 25px;
}

.eyebrow.g {
    color: var(--marigold);
}

h1 {
    font-size: clamp(42px, 6.6vw, 96px);
    margin-bottom: 26px;
}

.stand {
    max-width: 56ch;
    font-size: clamp(17px, 2.1vw, 22px);
    color: #7f7f7f;
    margin-bottom: 29px;
}

.cta {
    display: inline-block;
    letter-spacing: 0.05em;
    background: var(--bamboo);
    padding: 14px 29px;
    font-size: 15px;
    color: var(--night);
}

.cta:hover {
    background: var(--marigold);
}

.hero-flute {
    position: absolute;
    right: -5%;
    bottom: 11%;
    width: 62%;
    max-width: 890px;
    transform: rotate(-13.5deg);
    opacity: 0.945;
    pointer-events: none;
    animation: float 9s ease-in-out infinite;
}

/*helps with the animation of the design*/
.scroll-hint {
    position: absolute;
    left: var(--pad);
    bottom: 25px;
    letter-spacing: 0.3em;
    color: var(--muted);
    font-size: 12px;
}

.tabla {
    margin: 26px;
    padding: 18px 22px;
    border-left: 2px solid var(--peacock);
    color: var(--muted);
    font-size: 15px;
}

/*bambooo*/
.instrument {
    max-width: 640px;
    margin: 0 auto 34px;
}

.tube {
    position: relative;
    border-radius: 26px;
    height: 54px;
    background: linear-gradient(180deg, var(--bamboo) 0%, var(--bamboo2) 62%, #7a4e0b 100%);
}

/*be careful of spacing because there was syntax-errors*/
.tube.big {
    height: 62px;
    border-radius: 30px;
}

.node {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 9px;
    background: rgba(223, 41, 31, 0.5)
}

.n1 {
    left: 22%
}

.n2 {
    left: 62%;
}

.n3 {
    left: 90%;
}

.n4 {
    left: 19.8%;
}

.blow {
    position: absolute;
    left: 7%;
    top: 50%;
    width: 26px;
    height: 20px;
    margin-top: -10px;
    border-radius: 50%;
    background: rgba(73, 55, 46, 0.5);
}

.hole {
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    margin-top: -11px;
    border-radius: 50%;
    background: rgba(73, 55, 46, 0.5);
}

.h0 {
    left: 31.5%;
}

.h1 {
    left: 41.5%;
}

.h2 {
    left: 51%;
}

.h3 {
    left: 69%;
}

.h4 {
    left: 76.5%;
}

.h5 {
    left: 84%;
}

/*--the bands*/
/*it is the titles of the whole thing (very important for looks+organization*/
.band {
        /*gives it good spacing from top/bottom*/

    padding: clamp(70px, 9vw, 130px) 0;
    /*cream line*/
    box-shadow: 0 -3px 0 0 var(--cream), 0 -4px 0 0 rgba(201, 161, 92, 0.4);
}

.two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(28px, 5vw, 80px);
    align-items: start;

}

.num {
    font-family: var(--comicfonts-allofthem);
    color: var(--rose);
    margin-bottom: 15px;
    font-size: 16px;
}