* {
    font-family: 'Roboto', sans-serif;
}
#body{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: stretch;
    min-height: 100vh;
    background: firebrick;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, rgb(200, 66, 66), firebrick);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, rgb(92, 28, 28), firebrick); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    
}
#header{
    display: flex;
    flex-direction: row;
    padding: 20px;
    width: 100%;
    justify-content: center;
    background-color: #0005;
    margin-bottom: 60px;
}
#header #info{
    width: 300px;
}
#header #info a{
    color: grey;
}
#header h1{
    color: #EEE;
}
#header h3{
    font-size: 20px;
    color: #DDD;
}
.image-circle{
    border-radius: 100%;
}

#header .image-circle{
    margin: 20px;
}

a.button {
    border: solid 1px grey;
    padding: 5px 12px;
    border-radius: 5px;
    text-decoration: none;
    color: initial;
    background-color: #4447;
    color: white !important;
}
.see-resume{
    float: right;
}
.see-resume i{
    margin-right: 5px;
}

#list{
    width: 80%;
    max-width: 80%;
}
#list > article{
    -border:  1px solid lightgray;
    -box-shadow: #CCCA 2px 3px 5px;
    -background-color: #EEE;
    background-color: #0006;
    color: white;
    margin-bottom: 60px;
    padding: 20px;
    width: 100%;
    box-shadow: #0004 20px 0px 40px 0px;
    animation: fadeInBottom .5s ease;
}

.images-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: stretch;
    height: 500px;
    gap: 20px;
    overflow-x: scroll;
}

.images-list > img {
    height: 100%;
    cursor: zoom-in;
}




#zoom{
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: #000C;
    cursor: zoom-out;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: fade .2s ease;
}
#zoom > img{
    max-height: 80%;
    max-width: 80%;
    animation: zoom .3s ease;
}







@keyframes zoom {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

@keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeInBottom {
    from {
        opacity: 0;
        transform: translateY(50%);
    }
    to { opacity: 1 }
}