*{
    padding: 0; 
    margin: 0;/* to remove the annoying white space between the page margin and the header */
}
header
{
    background-image: url(http://drive.google.com/uc?export=view&id=1gNCGCON5oVUNp-0v7EVNUEKn1Vg8ddy5);/*added the main collage image in the background*/
    background-repeat: no-repeat;
    background-size: 100% 21.6rem;
    background-color: #000000; /*set the background color of header as black*/
    margin: 0;
    font-size: 62.5%;
    
}
.transbox1{/* Black Transparent Box on the top */
    background-color: #000000;
    opacity: 0.88;
    width: 100%;
    height: 3.8rem; 
}
.transbox2{/* Blue Transparent Box in the middle */

    background-color: #4789C0;
    opacity: 0.83;
    width: 100%;
    /* width: 79.9rem; */
    height: 15.6rem; 
    display: flex;
    flex-direction: row;
    /*display: grid; displaying it as grid so that all the texts and logos are in one grid*/
    justify-content: center;
    align-items: center;
    /* align-content: center; */
    /* row-gap: 0rem; */
    /* grid-auto-flow: column; */
}
.transbox3{/*Black Transparent Box below the Blue Transparent Box*/
    background-color: #000000;
    opacity: 0.88;
    width: 100%;
    height: 17.4rem; 
}
.logo1{ /* DITU ACM SC White LOGO on the left side of the blue box*/
    content: url(../Images/DITU_ACM_WhiteLogo.png);
    height: 8.0rem;
    width: 9.0rem;
    margin-left: 1.2rem;
    margin-top: 2rem;
    filter: drop-shadow(.2rem .2rem .2rem #454545);
    animation: fadeInAnimation 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes fadeInAnimation{
    0% {
        opacity: 0;
    }
   100% {
        opacity: 1;
    }
}
.logo2{/*DITU ACM-W SC White LOGO on the right side of the blue box*/
    content: url(../Images/ACM-W_dituChap_White.png);
    height: 8.0rem;
    width: 9.0rem;
    margin-top: 1.8rem;
    margin-left: 2.4rem;
    margin-right: 3rem;
    filter: drop-shadow(.2rem .2rem .2rem #454545);
    animation: fadeInAnimation 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.Text{/*common properties for all the text present on the blue box*/ 
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    margin-top: 0.6rem;
    margin-left: 2.0rem;
    filter: drop-shadow(.1rem .1rem .1rem #454545);
    animation: fadeInAnimation 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
   
}
.heading1{/*Setting properties for WELCOME TO Text*/
    font-family: sans-serif;
    font-weight: bolder;
    font-size: 2.7rem;
    line-height: 1.2em;
    color: #000000;
}
.heading2{/*Setting properties for DITU ACM STUDENT CHAPTER Text*/
    font-family: sans-serif;
    font-weight: bolder;
    font-size: 2.9rem;
    color: #ffffff;
    line-height: 1.1em;
}
.heading3{/*Setting properties for "ADVANCE COMPUTING AS A SCIENCE AND PROFESSION" Text*/
    font-family: sans-serif;
    font-weight: bolder;
    font-size: 1.5rem;
    color: #ffffff;
    line-height: 1.6em;
}
span{/*Setting properties for < and > symbol which is present before and after the DITU ACM STUDENT CHAPTER Text */
    font-family: sans-serif;
    font-weight: bolder;
    font-size: 2.6rem;
    color: #000000;
}
.heading2{/*Making DITU ACM STUDENT CHAPTER Text animated with typing effect*/
    overflow: hidden;
    border-right: .03em solid #ffffff;
    width: 0;
    animation: 
      typing 2.6s steps(30) forwards,
      blink .85s infinite;
}
@keyframes typing {/*Keyframe for typing animation*/
    from { width: 0 }
    to { width: 100% }
}
@keyframes blink {/*Keyframe for infinte blinking of the cursor*/
    from { border-color: transparent }
    to { border-color: #ffffff; }
}
.Gallery{/*setting properties for the gallery section*/
    height: 43vh;
    display: flex;
    justify-content: space-around;
    padding: 1.0rem;
}
#gallery_imgs{
    display: flex;
    overflow: hidden;
}
.item{/*setting properties for the gallery images present inside the gallery section*/
    margin: 1.4rem;
    height: 11.5rem;
    width: 16.0rem;
    border-radius: .8rem;
    margin-top: 1.6rem;
    filter: drop-shadow(.3rem .3rem .3rem #4789C0);
    transition: transform .2s;/*giving transition for the hover effect*/
    animation: fadeInAnimation 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    max-width: 100%;
    margin-right: 4.5vw;
}
.item:hover{
    box-shadow: .2rem .2rem .2rem #0db6cc;/*to shine brighter with bluish light on being hovered*/
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.leftgallerybttn{/*setting properties for the left and right gallery buttons*/
    background-color: transparent;
    fill: transparent;
    stroke: #ffffff;
    border: transparent;
    margin-top: 1.5rem;
    transform: scale(0.7);/*adjusting scaling of the gallery buttons*/
    animation: fadeInAnimation 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.rightgallerybttn{/*setting properties for the left and right gallery buttons*/
    background-color: transparent;
    fill: transparent;
    stroke: #ffffff;
    border: transparent;
    transform: scale(0.7);/*adjusting scaling of the gallery buttons*/
    animation: fadeInAnimation 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
/* RESPONSIVE CODE STARTS FROM HERE */
@media (min-width: 1201px)
{
    html{
        font-size: 95%;
        }
}
/* For smaller laptops */
@media (max-width:1200px) and (min-width: 1025px)
{
    html{
        font-size: 75%;
        }
        .leftgallerybttn, .rightgallerybttn{
            display: flex;
            align-items: center;
            margin-bottom: 3vh;
        }
        .item{
            margin-left: 2.2vw;
        }
        .Gallery{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .transbox3{
            height: 30rem;
            
        }
}
/* For ipad */
@media (max-width:1024px) and (min-width: 769px)
{
    html{
        font-size: 55%;
        }
        .leftgallerybttn, .rightgallerybttn{
            display: flex;
            align-items: center;
            margin-bottom: 25vh;
        }
        .item{
            margin-left: 2vw;
        }
       
}

@media (max-width:768px) and (min-width: 481px)
{
    html{
        font-size: 35%;
    }
    .leftgallerybttn, .rightgallerybttn{
        display: flex;
        align-items: center;
        margin-bottom: 14vh;
    }
}
/* For mobile devivces */
@media (max-width:480px) and (min-width: 320px)
{
    .transbox1{
        height: 3rem;
    }
    .transbox2{
        height: 11rem;
    }
    .transbox3{
        height: 25rem;
    }
    .heading1, .heading2{
        margin-right: 2.1rem;
    }   
    .heading3{
        font-size: 0.7rem;
        margin-right: 2.4rem;
        line-height: 1.6rem;
    }
    span{
        font-size: 1.4rem;
    }
    .logo1, .logo2{
        display: none;
    }
    .heading1{
        font-size: 1.8rem;
    }
    .heading2{
        font-size: 1.2rem;
    }
    @keyframes typing {/*Keyframe for typing animation*/
        from { width: 0 }
        to { width: 88% }
    }
    .Gallery{/*setting properties for the gallery section*/
        display: flex;
        /* flex-direction: column; */
        justify-content: center;
        align-items: center;
        padding: 1.0rem;
        overflow-x: scroll;
    }
    .leftgallerybttn, .rightgallerybttn{
        /* display: none; */
    }
}