InigoValentin/app/assets/stylesheets/project.css

section{
    text-align: center;
    width: 90%;
    margin: auto;
}
section h3{
    text-align: left;
}
div#info_summary{
    display: inline-block;
    width: 72%;
    margin: 0;
    vertical-align: top;
    padding: 0;
    min-height: 13em;
    text-align: left;
}
@media screen and (max-width : 800px){
    div#info_summary{
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
    }
}

div#info_summary h4{
    margin: 0.5em;
    font-style: italic;
}

div#info_summary p#text{
    margin: 2em;
}
@media screen and (max-width : 800px){
    div#info_summary p#text{
        margin: 0;
    }
}
div#info_summary p#text img#project_image{
    padding: 0.5em;
    width: 7em;
    height: 7em;
    background-color: #cccccc;
    border: 0.1em solid #60ae29;
    box-shadow: inset 0 0 0.5em #00220077;
    border-radius: 1em;
    float: left;
    margin: 0 2em 1em 0;
}
@media screen and (max-width : 800px){
    div#info_summary p#text img#project_image{
        margin: 0 2em 1em 0.4em;
        padding: 0.2em;
        width: 20vw;
        height: 20vw;
    }
}

div#info_details{
    display: inline-block;
    width: 22%;
    vertical-align: top;
    margin: 0;
    border-left: 0.1em solid #aacaaa;
    border-right: 0.1em solid #aacaaa;
    /*background: linear-gradient(to bottom, #e5f0e500 0%, #e5f0e5ff 20%, #e5f0e5ff 80%, #e5f0e500 100%);*/
    padding: 1em;
    text-align: left;
}
@media screen and (max-width : 800px){
    div#info_details{
        text-align: center;
        display: block;
        width: auto;
        margin: 0.5em auto;
        border-left: 0;
        border-right: 0;
        /*background: linear-gradient(to right, #e5f0e500 0%, #e5f0e5ff 20%, #e5f0e5ff 80%, #e5f0e500 100%);*/
        padding: 0.5em;
    }
}
div#info_details div.details{
    margin: 0.5em 1.5em 0.5em 1.5em;
}
@media screen and (max-width : 800px){
    div#info_details div.details{
        margin: 0.5em 0;
        text-align: left;
    }
}

div#info_details div.details hr.details_separator{
    margin: 1em -0.5em 0.5em -0.5em;
}

div#info_details div#links{
    padding-top: 0.5em;
    border-bottom: 0.1em solid #aacaaa;
    text-align: center;
}

div#info_details div#links a.link{
    display: block;
    margin-bottom: 1em;
    text-align: left;
}
@media screen and (max-width : 800px){
    div#info_details div#links{
        column-count: 2;
        border-top: 0.1em solid #aacaaa;
    }
}
div#info_details div#links a.link img.link{
    vertical-align: middle;
    width: 1.5em;
    height: 1.5em;
    margin-right: 0.5em;
}

div#info_details div#technologies{
    font-size: 90%;
    border-bottom: 0.1em solid #aacaaa;
    padding-bottom: 0.5em;
    text-align: center;
}

div#info_details div#license img{
    max-width: 8em;
    max-height: 2em;
    vertical-align: middle;
    text-align: center;
}

iframe#demo{
    margin: auto;
    border: 0.2emsolid #000000;
    border-radius: 0.5em;
}

div#image_reel{
    margin: 2em auto 1em auto;
    width: 80%;
    overflow-x: scroll;
    border: 0.1em solid #000000;
    background-color: #aaaaaa;
    text-align: center;
}

div#image_reel table tr td img{
    max-height: 7em;
    max-width: 7em;
    border: 0.2em solid #777777;
    border-radius: 0.2em;
    background-color: #ffffff;
    margin: 0.5em;
}