@charset "utf-8";

h1 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: italic;
    padding: 4rem 0 1rem 0;
}

main > div {
   margin: 2em 0 2em 0;
}



.horizontal-scroll {
    overflow: auto;
    white-space: nowrap;
    padding: 1rem 0rem;
}

.horizontal-scroll > li {
    position: relative;
    display: inline-block;
    padding: 0 2rem 0 2rem;
    border-width: 0px 0px 0px 0.3rem;
    border-style: solid; 
}



#photos img {
    max-height: 20rem;
    -webkit-border-radius: 0.7rem;
       -moz-border-radius: 0.7rem;
            border-radius: 0.7rem;
}

#photos li p {
    color: transparent;
    font-size: large;
    font-style: italic;
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left:0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
            flex-direction: column;
}

#photos li:active img {
    -webkit-filter: blur(0.5em) brightness(0.5);
            filter: blur(0.5em) brightness(0.5);
    -webkit-transition: 0.1s;
    -moz-transition: 0.1s;
    transition: 0.1s;
}



#computing li {
    position: relative;
    width: 32rem;
    overflow: auto;
    white-space: wrap;
    height: 24rem;
}

#computing li div {
    padding: 2rem;
    -webkit-border-radius: 0.7rem;
       -moz-border-radius: 0.7rem;
            border-radius: 0.7rem;
    height: 24rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
            flex-direction: column;
}

#computing li img {
    display: block;
    -webkit-filter: opacity(0);
            filter: opacity(0);
    position: absolute;
    width: 100%;
}

#computing li:active img{
    -webkit-filter: opacity(1);
            filter: opacity(1);
    -webkit-transition: 0.1s;
    -moz-transition: 0.1s;
    transition: 0.1s;
}



footer a:hover, nav.horizontal ul li a:hover, #computing li:hover h2 {
    letter-spacing: 0.1rem;
    -webkit-transition: 0.1s;
       -moz-transition: 0.1s;
            transition: 0.1s;
}