.bg {
    background-color:#fad8d8;
    padding: 50px 10%;
}

.bg h1 {
    color:#fad8d8;
    background-color:#fad8d8;
    font-size: 7rem;
}

.bg p {
    color:#fad8d8;
}


/*---------Dynamic text----------*/
.glam {
    background: linear-gradient(135deg,#25336b,#FFDE5A,#25336b, #FFDE5A,#25336b,#FFDE5A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 300% 300%;
    animation: gradient 4s ease-in infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

/*---------Big text------------*/
.big_text {
    font-size: 2em;
    text-align: center;
}

/*-------Collage---------------*/
.collage-bg {
    background-color: #fad8d8;}

body{overflow-x: hidden;}
.collage1 {
    position: relative;
    width: 90vw;
    height: calc(90*0.5vw);
    margin-left: auto;
    margin-right: auto;
}

.collage2 {
    position: relative;
    width: 90vw;
    height: calc(90*0.75vw);
    margin: auto;
}

.collage3 {
    position: relative;
    width: 90vw;
    height: calc(90*0.89vw);
    margin-left: auto;
    margin-right: auto;
}

.collage4 {
    position: relative;
    width: 90vw;
    height: calc(90*0.75vw);
    margin-left: auto;
    margin-right: auto;
}

.collage5 {
    position: relative;
    width: 90vw;
    height: calc(90*1.7vw);
    margin-left: auto;
    margin-right: auto;
}


/*Hover effect*/
.collage-bg img {
    position: absolute;
    transition: transform 0.3s ease-out;
    }
    .collage-bg img:hover{
    transform: scale(1.3);
    transition: transform 0.3s ease-in;
    z-index: 100;
    }


/* Define positions and z-index for each image */
/* Brainstorming weekend */
#image101 { bottom: 73%; left: 6%; width: 30%; height: auto; }
#image102 { bottom: 73%; left: 39.5%;  width: 25%;height: auto;}
#image103 { bottom: 73%; left: 68%; width: 40%;height: auto; }
#image104 { bottom: 40%; left: 8.5%;  width: 30%; height: auto;}
#image105 { bottom: 5%; left: 45%; width: 42%; height: auto; }
#image106 { bottom: 7%; left: 7%; width: 32%; height: auto;}

/*Everyday life*/
#image201 { bottom: 75%; left: 6.5%; height: auto ; width: 17%;}
#image202 { bottom: 75%; left: 27.5%; height: auto ; width: 20%;}
#image203 { bottom: 75%; left: 50%; height: auto ; width: 15%;}
#image204 { bottom: 37.5%; left: 4.5%; height: auto ; width: 20%;}
#image205 { bottom: 39.5%; left: 28.5%; height: auto ; width: 15%;}
#image206 { bottom: 39%; left: 47%; height: auto ; width: 17%;}
#image207 { bottom: 56.25%; left: 70%; height: auto ; width: 20%;}
#image208 { bottom: 3.5%; left: 5.5%; height: auto ; width: 15%;}
#image209 { bottom: 1%; left: 26%; height: auto ; width: 18%;}
#image210 { bottom: 3.5%; left: 48.5%; height: auto ; width: 15%;}
#image211 { bottom: 18.75%; left: 68.5%; height: auto ; width: 18%;}

/*Events*/
#image301 { bottom: 68%; left: 5%;width: 40%; height: auto;}
#image302 { bottom: 70%; left: 50%;width: 18%; height: auto;}
#image303 { bottom: 35%; left: 6.5%;width: 18%; height: auto;}
#image304 { bottom: 35%; left: 26%;width: 18%; height: auto;}
#image305 { bottom: 35%; left: 48%;width: 20%; height: auto;}
#image306 { bottom: 47%; left: 72%;width: 22%; height: auto;}
#image307 { bottom: 10%; left: 3%;width: 40%; height: auto;}
#image308 { bottom: 7.5%; left: 72%;width: 23%; height: auto;}
#image309 { bottom: 7%; left: 45%;width: 25%; height: auto;}

/* Wiki freeze */
/* Define positions and z-index for each image */
#image601 { bottom: 65%; left: 10%; width:20%; height: auto;}
#image602 { bottom: 70%; left: 39%; width: 18%; height: auto; }
#image603 { bottom: 62%; left: 68%;width: 23%; height: auto; }
#image604 { bottom: 28%; left: 4%; width: 19%; height: auto; }
#image605 { bottom: 42%; left: 27%; width: 20%; height: auto;}
#image606 { bottom: 14%; left: 69%; width: 24%; height: auto; }
#image607 { bottom: 5%; left: 8%; width: 21%; height: auto; }
#image608 { bottom: 40%; left: 49.5%;width: 15%; height: auto; }
#image609 { bottom: 5%; left: 35%; width: 30%; height: auto;}

/*Jamboree*/
#image1001 { bottom: 89%; left: 5.5%; width: 28%; height: auto;}
#image1002 { bottom: 83%; left: 39%;width: 23%; height: auto;}
#image1003 { bottom: 83%; left: 68%;width: 23%; height: auto;}
#image1004 { bottom: 72%; left: 9%;width: 20%; height: auto;}
#image1005 { bottom: 70.5%; left: 35%;width: 28%; height: auto;}
#image1006 { bottom: 60%; left: 71%;width: 20%; height: auto;}
#image1007 { bottom: 58%; left: 2.5%;width: 30%; height: auto;}
#image1008 { bottom: 57.5%; left: 35%;width: 15%; height: auto;}
#image1009 { bottom: 57.5%; left: 53%;width: 15%; height: auto;}
#image1010 { bottom: 49%; left: 69%;width: 23%; height: auto;}
#image1011 { bottom: 45%; left: 3.5%;width: 30%; height: auto;}
#image1012 { bottom: 34.5%; left: 7%;width: 20%; height: auto;}
#image1013 { bottom: 32.5%; left: 71%;width: 20%; height: auto;}
#image1014 { bottom: 43.5%; left: 38%;width: 28%; height: auto;}
#image1015 { bottom: 1%; left: 5%;width: 20%; height: auto;}
#image1016 { bottom: 15.5%; left: 71.5%;width: 20%; height: auto;}
#image1017 { bottom: 18%; left: 5%;width: 20%; height: auto;}
#image1018 { bottom: 18%; left: 40%;width: 22%; height: auto;}
#image1019 { bottom: 3%; left: 70.5%;width: 25%; height: auto;}
#image1020 { bottom: 28.5%; left: 34%;width: 31%; height: auto;}
#image1021 { bottom: 0.5%; left: 29.5%;width: 38%; height: auto;}