Portfolio/pages/AllProjects.css

#Title{
    max-width: 15vw;
    margin-bottom: 10vh;
    transition: background-color 0.5s
}

#Title:hover{
    background-color: var(--highlight);
    color: var(--base);
}

h1{
    font-size: 2rem;
}

.item{
    display: flex;
    margin-top: 4vh;
}

.itemText{
    padding: 10px;
}

.galleryLinkContainer{
    text-decoration: none;

    transition: background-color 0.5s;
    color: var(--secondary);
}

.galleryLinkContainer:hover{
    background-color: var(--highlight);
    color: var(--base);
}

.galleryLinkContainer:hover, .galleryLinkContainer:hover a{
    color: var(--base);
}

.galleryImage{
    min-width: 100%;
    margin-bottom: 20px;

    overflow: clip;

    visibility: hidden;
    max-height: 0px;


    transition: max-height 1s;
    -moz-transition: max-height 1s;
}

.galleryImage img{
    width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center center;
}

.galleryLinkContainer:hover .galleryImage{
    visibility: visible;
    max-height: 20vh;
}

.galleryImage:hover{
    visibility: visible;
    max-height: 20vh;
}

/* overwriting <a> effects */
a.galleryLink{  
    text-decoration: none;
}

@media (orientation:portrait){
    body{
        padding: 5vw;
    }

    .galleryLink{
        font-size: 2rem;
    }

    .galleryImage{
        visibility: visible;
        max-height: 10vh;
        margin-top:5px;
    }

    #Title{
        max-width: 80vw;
        font-size: 3rem;
    }

    h1{
        font-size: 5rem;
    }
}