body {

    background-image: url("pageback.jpg");
    z-index: -1;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    min-height: 100%;
    max-height: 100%;
    width: 100vh;
    min-width: 100%;
    max-width: 100%;

}

.mainTitle {

    font-family: "Brush Script MT", cursive; 
    font-size: 70px;
    text-align: center;
    transform: rotate(-10deg);

}

#cauliflower {

    padding-top: 5%;

}

#avatars {

    padding-top: 1%;

}

.link {

    text-decoration: none;
    color: #000;
    font-size: 30px;
    font-weight: bold;
    

}

a:hover {

    color: #fff;

}

#mainLinks{

    padding-top: 13%;
    text-align: center;
    font-family: fantasy;

}

#mainGallery {

    padding-right: 20%;

}

#mainContact {

    padding-left: 20%;

}

.contactText{

    color: #000;
    font-size: 30px;
    font-family: fantasy;

}

#contactContainer {

    padding-top: 15%;
    text-align: center;

}

#contactLinks{

    padding-top: 5%;
    text-align: center;
    font-family: fantasy;

}

#contactIndex {

    padding-right: 20%;

}

#contactGallery {

    padding-left: 20%;

}

#galleryText{

    color: #000;
    font-size: 30px;
    font-family: fantasy;

}

#galleryContent {

    padding-top: 15%;
    text-align: center;

}

.galleryPic {

    transition: transform .2s;
    cursor: pointer;

}

.galleryPic:hover {

    transform: scale(5);
    margin: 50px;

}

#galleryLinks{

    padding-top: 5%;
    text-align: center;
    font-family: fantasy;

}

#galleryIndex {

    padding-right: 20%;

}

#galleryContact {

    padding-left: 20%;

}

footer {

    color:#fff;
    position: absolute;
    bottom: 0;

}


@media only screen and (max-width: 600px) {
    
    footer {
      
      font-size: 5px;
      
    }
    
    .mainTitle {

        content: 'CAULIFLOWERS AVATARS';
        word-wrap: break-word;
        font-family: "Brush Script MT", cursive; 
        font-size: 20px;
        text-align: center;
        transform: rotate(-10deg);
    
    }

    .link {

        text-decoration: none;
        color: #000;
        font-size: 10px;
        font-weight: bold;
        
    
    }

    .contactText{

        color: #000;
        font-size: 25px;
        word-wrap: break-word;
        font-family: fantasy;
    
    }

    #galleryText{

        color: #000;
        font-size: 25px;
        word-wrap:break-word;
        font-family: fantasy;
    
    }
    
    #galleryContent {
    
        padding-top: 15%;
        text-align: center;
    
    }
    
    .galleryPic {
    
        transition: transform .2s;
        margin: 2%;
        cursor: pointer;
    
    }
    
    .galleryPic:hover {
    
        transform: scale(3);
        margin: 50px;
    
    }


}