body {
    background-color: gray; 
    height: 100vh; /* Make the body take the full viewport height */
    display: flex; 
    justify-content: center; /* Horizontally center the content inside the body */
    align-items: flex-start; /* Align the content at the top vertically */
    padding: 30px; /* Add 30px padding around the body content */
    padding-bottom: 100px; /* Prevent content from being hidden behind the footer */
}

header {
    display: flex; 
    justify-content: center; /* Horizontally center the content in the header */
    align-items: center; /* Vertically center the content in the header */
    position: relative; /* Use relative positioning so that it can be moved*/
    width: 100%; 
    right: -400px; /* it moves the header 400px to the left */
}

h1 {
    font-family: 'Bangers', cursive; /*using punk aestetic text and if it is not working subbing it up with cursive*/
    color: white;
    margin: 0;
    font-size: 80px;
    letter-spacing: 1px;
    flex-grow: 1;
    text-align: center;
}

.search-icon { 
    font-size: 30px;
    color: white;
    cursor: pointer;
    transition: color 0.3s ease; /* time for transition*/

}

.search-icon:hover { /*the icon's color swithces to black*/
    color: black;
}

.description { /*script for text on the lext */
    width: 30%;
    padding: 20px;
    color: white;
    box-sizing: border-box; /* Padding is included in the total width*/
    position: absolute;
    top: 100px; /*giving some space on the top*/
    left: 0;
    font-family: 'Roboto Condensed', sans-serif;
}

.highlight {
    font-weight: bold; /*styling signs 'About us' and 'Defy. Express. Rebel!'*/
    font-size: 30px;
    color: white;
}

#image-gallery {
    display: flex;
    flex-direction: row;
    margin-top: 200px;
    margin-left: -550px; /* increase negative padding to shift left */
}

.image-gallery-img {
    border-radius: 20px;
    padding: 7px;
    width: 20vw; /*Let's make the pictures smaller so that there is more space for them to move */
    height: auto;
    align-items: center;
    margin-left: 30px;
    transition: transform 0.3s ease, filter 0.3s ease;;
    
}
.image-gallery-img:hover {
    transform: scale(1.15); /* Enlarge the image by 15%*/
    filter: brightness(1.15); /*increacing britghtness by 15%*/
    
}

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    border-radius: 2%;
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px;
    font-family: 'Roboto Condensed', sans-serif;
    z-index: 100;
}