/* Global Styles
----------------------------------*/

/*Box Sizing Fix - Base CSS for all Projects*/
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
body {
    color: #343434;
    margin: 0;
    padding: 0;
    font-family: 'Crimson Text', serif;
}
ion-icon {
    font-size: 50px;
    padding: 0 10px;
}
a {
    color:darkblue;
    text-decoration: none;
}
a:hover {
    color:rgb(240, 140, 240);
    transition: linear 0.3s;
}
.content-wrap {
    max-width: 800px;
    width: 90%;
    margin: 0 auto;
    padding: 50px;
}
h1, h2 {
    font-family: 'Averia Serif Libre', cursive;
    font-weight: 400;
    margin: 0;
}
h1 {
    font-size: 60px;
}
h2 {
    font-size: 40px;
}
.divider > section {
    overflow: hidden;
    border-bottom: 1px solid black;
    padding: 25px 0;
}
.research-experience .divider > section {
    border-bottom: 1px solid white;
}
.divider > section:last-of-type {
    border: none;
}

/* Profile
----------------------------------*/
header {
    background-color: #0E1116;
    color: #F7FFF7;
}
header p {
    font-size: 18px;
}
/* Projects
----------------------------------*/
.projects{
    background-color: #E8EBF7;
}
.projects img {
    max-width: 300px;
    width: 85%;
    padding-bottom: 10px;
}
.projects .btn {
    color:black;
    background: springgreen;
    padding: 8px;
    border: 3px solid;
    border-radius: 10px;
    border-color: black;
    display: inline-block;
}
.projects .btn:hover {
    color:rgb(255, 255, 255);
    background: rgba(69, 89, 151, 1);
    transition: linear 0.3s;
}
.project-block {
    overflow: hidden;
    border-bottom: 1px solid black;
    padding: 25px 0;
}
.project-block h3 {
    font-size: 20px;
    margin: -6px 0;
}
.project-block li {
    list-style: none;
}
#glogo img {
    width: 60px;
    height: auto;
    padding: 0px;
    margin: 1px 4px 0 0;
}
/* Research Experience
----------------------------------*/
.research-experience {
    background-color: #1E212B;
    color: #F7FFF7;
}
.research-experience h3 {
    margin: 40px 0 -15px 0;
}

/* Work Experience
----------------------------------*/
.work-experience {
    background-color: lightsteelblue;
}
.substyle h3 {
    margin-bottom: 0;
}
.substyle h3 + p {
    font-style: italic;
}
.substyle h3 ~ p {
    margin: 0;
}

/* Education
----------------------------------*/
.education {
    background-color: antiquewhite;
}
.education h2 {
    margin-bottom: 30px;
}
.edu-item {
    display: flex;
    height: 80px;
    margin-top: 25px;
}
.school-img img {
    display: inline-block;
}
#uts-logo {
    width: 80px;
    height: auto;
    margin: 28px 22.5px 0 22.5px;
}
#meiji-logo {
    width: 100px;
    height: auto;
    margin: 25px 20px 0 5px;
}
#mem-logo {
    width: 55px;
    height: auto;
    margin: 10px 35px 0 35px;
}
.school-summary {
    margin: 20px 20px 20px 150px;
}

/* Contact Info
----------------------------------*/
footer{
    background-color: #040404;
    color: #F7FFF7;
}
footer a {
    color: snow;
    padding: 10px;
    display: inline-block;
}
footer .content-wrap {
    text-align: center;
}
.contact-list{
    list-style-type: none;
    padding: 0;
}
.contact-list li {
    width: 50%;
    display: inline;
}

/* Responsive
----------------------------------*/

@media screen and (min-width: 950px) {
    header, footer {
        text-align: center;
    }
    .project-block img {
        float: left;
        margin-right: 25px;
    }
    .job-item{
        display: grid;
        grid-template-columns: 1fr 2fr;
        column-gap: 20px;
    }
}
@media screen and (max-width: 949px) {
    #glogo img {
        margin-right: 2px;
        margin-bottom: -5px;
    }
}

/* Responsive Education
--------------------------------*/
@media screen and (max-width: 810px){
    .schoolblock {
        text-align: center;
    }
    .edu-item {
        display: inline-block;
        margin-top: 0px;
    }
    .edu-item h3 {
        font-size: 16px;
        margin-top: 2px;
    }
    .edu-item h3 + p {
        font-size: 12px;
    }
    .school-summary {
        margin: 10px 0 20px 0;
    }
    #meiji-logo {
        margin-top: 10px;
    }
}

/* Responsive Header
--------------------------------*/
@media screen and (max-width: 720px) {
    h1 {
        font-size: 40px;
        line-height: 1;
    }
    h2 {
        line-height: .8;
    }
}

/* Responsive Footer
--------------------------------*/
@media screen and (min-width: 650px) {
    footer h2 {
        margin-bottom: 40px;
    }
    .contact-list {
        display: flex;
        justify-content: center;
    }
}

@media screen and (max-width: 649px) {
    .contact-list a{
        margin-top: 20px;
        padding: 5px;
    }
}