@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400&display=swap');

:root{
    --black: #1F2232;
    --gray: rgb(0, 0, 0, 0.5);

    --font: 1.1em 'Source Sans Pro', sans-serif;
    --font-responsive: 0.9em 'Source Sans Pro', sans-serif;
    --font-s: 0.9em 'Source Sans Pro', sans-serif;
    --font-s-responsive: 0.8em;

    --indent: 3em;

    --margin: 1em 12em;
    --margin-responsive: 1em;
    --margin-default: 2em;
    --margin-ls-responsive: 0 1.7em;

    --padding: 0.1em;

    --line: 0.05em solid;
}
body{
    font: var(--font);
    margin: 0;
}
#header{
    background-color: var(--black);
    color: white;
    padding: var(--padding);
    text-indent: var(--indent);
}
h1{
    margin-left: 7.2em;
}
#content{
    display: flex;
    margin: var(--margin);
}
li{
    margin-right: var(--margin-default);
}
.info{
    float: left;
    width: 25%;
    margin-left: var(--margin-default);
}
.exp{
    float: right;
    width: 70%;
    margin-left: var(--margin-default);
}
h3{
    padding-bottom: var(--padding);
    border-bottom: var(--line) var(--black);
}
ul{
    list-style-type: none;
    padding: 0;
}
#contact > li{
    font-size: var(--font-s);
    display: inline-block;
    vertical-align: super;
    text-decoration: underline;
}
#contact:hover > li{
    color: var(--gray);
}
.item{
    margin-bottom: var(--margin-default);
}
.title{
    display: flex;
    justify-content: space-between;
}
h4, .period, .place{
    margin: 0;
}
.period, .place{
    font: var(--font-s);
    color: var(--gray);
}
.description{
    margin-top: 0.5em;
    text-align: justify;
}
#download-link{
    margin-bottom: var(--margin-responsive);
    float: right;
    margin: 2em 12em 2em 0;
}

@media (max-width: 640px){
    body{
        font: var(--font-responsive);
    }
    h1{
        margin-left: 0;
        padding: 0;
    }
    #content{
        margin: var(--margin-responsive);
        flex-direction: column;
    }
    .info{
        width: 95%;
        margin: var(--margin-ls-responsive);
    }
    .exp{
        width: 95%;
        margin: var(--margin-ls-responsive);
    }
    .period{
        font-size: var(--font-s-responsive);
    }
    #download-link{
        display: none;
    }
}