* {
    margin: 0px;
    padding: 0px;
    border: 0;
    box-sizing: border-box;
}

img,svg{
    width: 100%;
    height: auto;
}

.grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 28px;
}


@font-face {
    font-family: Punk Kid;
    src:url(tipos/punk_kid/punkkid.ttf)
}

@font-face {
    font-family: Alte Haas;
    src: url(tipos/alte_haas_grotesk/AlteHaasGroteskRegular.ttf)
}

@font-face {
    font-family: Alte Haas Bold;
    src: url(../Downloads/alte_haas_grotesk/AlteHaasGroteskBold.ttf)
}


/* a) header | attention */

#headerimg{
    grid-column: 1/13;
    grid-row: 1/4;
}

#logoheader{
    grid-column: 2/12;
    grid-row: 2;

    margin-top: 100px;
    justify-self: center;
}

#headerpaper{
    grid-row: 3;
    grid-column: 1/13;

    margin-top: 50px;
}

#homebtn{
    grid-column: 1/3;
    grid-row: 1;

    z-index: 10;
    margin-top: 20px;
    margin-left: 10px;
}




.btnhoover:active{
    transform:  translateY(7px);
}



#aboutbtn{
    grid-column: 4/6;
    grid-row: 1;

    z-index: 10;
    margin-top: 20px;
}

#merchbtn{
    grid-column: 8/10;
    grid-row: 1;

    z-index: 10;
    margin-top: 20px;
}

#ticketsbtn{
    grid-column: 11/13;
    grid-row: 1;

    z-index: 10;
    margin-top: 20px;
    margin-right: 10px;
}



/* b) body | interest */


#interest{
    background-image: url(figma_paa/interestbackground.jpg) ;

    margin-top: -80px;
    height: 1800px;
}

#forma1homepage{
    grid-column: 2/6;
    grid-row: 1;
    margin-top: 200px;

    width: 100%;
    height: 120px;
}

#sideshows{
    color: #F5EA13;
    font-family: "Punk Kid";
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

    grid-column: 2/6;
    grid-row: 1;

    margin-top: 230px;
    margin-left: 20px;

} 

#rectangulo1homepage{
    grid-column: 1/7;
    grid-row: 1;

    margin-top: 280px;

    width: 517px;
    height: 390px;

    justify-self: center;

}

#sideshowstxt{
    color: whitesmoke;
    font-family: "Alte Haas";
    font-size: 20px;

    grid-column: 2/6;
    grid-row: 1;

    margin-top: 350px;
}





#forma2homepage{
    grid-column: 8/12;
    grid-row: 2;
    margin-top: 100px;

    width: 100%;
    height: 130px;
}

#stagesmerch{
    color: #F5EA13;
    font-family: "Punk Kid";
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

    grid-column: 8/12;
    grid-row: 2;

    margin-top:140px;
    margin-left: 20px;
} 

#rectangulo2homepage{
    grid-column: 7/13;
    grid-row: 2;

    margin-top: 220px;

    width: 536px;
    height: 232px;

    justify-self: center;

}

#stagesmerchtxt{
    color: whitesmoke;
    font-family: "Alte Haas";
    font-size: 20px;
    text-align: right;

    grid-column: 8/12;
    grid-row: 2;

    margin-top: 250px;
}




#forma3homepage{
    grid-column: 2/6;
    grid-row: 3;
    margin-top: 100px;

    width: 100%;
    height: 130px;
}


#look{
    color: #F5EA13;
    font-family: "Punk Kid";
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

    grid-column: 2/6;
    grid-row: 3;

    margin-top: 140px;
    margin-left: 20px;
} 

#rectangulo3homepage{
    grid-column: 1/7;
    grid-row: 3;

    margin-top: 230px;

    width: 510px;
    height: 250px;

    justify-self: center;

}

#looktxt{
    color: whitesmoke;
    font-family: "Alte Haas";
    font-size: 20px;

    grid-column: 2/6;
    grid-row: 3;

    margin-top: 250px;
}


#belts{
    margin-top: -100px;
    width: 100%;
}


/* b) body | desire */