portfolio.css

@import url(main.css);

/******** Main ********/

main {
    display: flex;
    flex-wrap: wrap;
}

main article {
    max-width: 300px;
    margin: auto;
    position: relative;
}

main a img {
    width: 100%;
}

main article a .label {
    font-size: 2em;
}

main a:link,
main a:visited,
main a:hover,
main a:active {
    text-decoration: none;
}

/*** responsive for desktops ***/

@media only screen and (min-width: 1025px) {
    main .breakout {
        max-width: 300px;
    }

    main #project-ug {
        max-width: 425px;
    }

    main #advent-of-py {
        max-width: 375px;
    }

    main .doubletet {
        max-width: 350px;
    }
}

/*** responsive for phone/tablet ***/

@media only screen and (max-width: 1024px) {
    main article {
        max-width: 100%;
        margin-bottom: 100px;
    }

    main #project-ug {
        max-width: 80%;
    }

    main #advent-of-py {
        max-width: 80%;
    }

    main a .label {
        font-size: 3em;
    }
}


/*** Fancy Hover (not for phones) ***/

@media only screen and (min-width: 1025px) {
    main a img {
        opacity: .45;
        transition: var(--transition-speed);
        transition-delay: var(--transtion-delay);
    }

    main article .label {
        opacity: 0;
        transition: var(--transition-speed);
        transition-delay: var(--transtion-delay);
    }

    main article:hover img,
    main article:hover .label,
    main article:focus img,
    main a:focus img,
    main a:focus .label,
    main article:focus .label {
        opacity: 1;
        transition: var(--transition-speed);
        transition-delay: var(--transtion-delay);
    }
}