/* Fonts */

@font-face {
    font-family: "Open Sans Regular";
    src: url(fonts/OpenSans-Regular.woff2) format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Open Sans Bold";
    src: url(fonts/OpenSans-Bold.woff2) format("woff2");
    font-display: swap;
}

/* Global */

html {
    font-size: 16px;
}

body {
    margin: 0;
    font-family: "Open Sans Regular";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
    font-size: 16px;
    color: #333333;
}

/* Responsive images */
img {
    max-width: 100%;
    height: auto;
}

/* Links */

a, a:visited {
    text-decoration: none;
    color: #333333;
}

.noline {
    text-decoration: none;
}

/* Typography */

h1 {
    font-family: "Open Sans Bold";
}

h4 {
    font-size: 28px;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 1rem;
}

p:only-of-type {
  margin: 0;
}

/* Colours */

.grey-bg {
    background-color: #f5f5f5;
}

/* Header and nav  */

.siteheader {
    position: relative;
    padding: 2rem 0;
    .sitebrand {
        font-family: "Open Sans Bold";
        font-size: 27px;
        line-height: 1;
    }
}

nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    ul {
        list-style: none;
        margin: 0 -1em 0 0;
        li {
            display: inline;
            margin: 0 1em 0 0;
        }
    }
}

main {
    a, a:visited {
        text-decoration: underline;
    }
}

/* Footer */

footer {
    padding: 2rem 0;
}

/* List styling */

ul {
    margin-left: 0;
    padding-left: 0;
}

.styled-vertical-list {
    margin-left: 1.2em;
}

/* Margins */

.mt--em {
    margin-top: 2em;
}

.mb--em {
    margin-bottom: 2em;
}

/* Padding */

.padding-y {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* Container, row and col stuff */

.container {
    position: relative;
    max-width: 90%;
    margin: 0 auto;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -.75em;
    margin-right: -.75em;
}

.col {
    width: 100%;
    padding-left: .75em;
    padding-right: .75em;
    box-sizing: border-box;
}

.col-1 {
    width: 100%;
}

/* Home page */

.date {
    position: relative;
    padding-left: 1.7em;
    font-size: 0.9rem;
    color: #666;
}

/* Clock face */
.date::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.2em;
    height: 1.2em;
    border: 2px solid #666;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
}

/* Hour hand */
.date::after {
    content: "";
    position: absolute;
    left: 0.51em;
    top: 45%;
    width: 2px;
    height: 0.50em;
    background: #666;
    transform: translate(-73%, -55%) rotate(29deg);
    transform-origin: bottom center;
    border-radius: 1px;
}

/* Minute hand */
.date span {
    position: absolute;
    left: 0.4em;
    top: 51%;
    width: 2px;
    height: 0.4em;
    background: #666;
    transform: translate(-43%, -68%) rotate(90deg);
    transform-origin: bottom center;
    border-radius: 1px;
}

article {
    width: 50%;
    margin: 0 auto;
    header {
        margin-bottom: 3em;
    }
}

/* Thought tile */

.thought {
    background-color: white;
    display: block;
    padding: 2em;
    transition: background-color 0.2s ease;
    box-sizing: border-box;
    margin-bottom: 1em;
    text-decoration: none;
    h4 {
        font-size: 26px;
        margin-bottom: 5em;
    }
}

.thought:hover {
    background-color: color-mix(in srgb, white 90%, black 1%);
}

figure {
    margin: 0;
}

.skills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 2em;
    .skill {
        background-color: #ffffff;
        text-align: center;
        padding: 2em;
        box-sizing: border-box;
        flex: 0 0 100%;
        .skill_img {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 5em;
            width: 3em;
            margin-left: auto;
            margin-right: auto;
        }
        img {
            margin-bottom: 1em;
        }
    }
}

/* Projects / work */

.project {
    display: block;
    border-top: 1px solid;
    .project-content {
        display: inline-flex;
        flex-direction: column;
        position: relative;
        padding: 2em 0;
        transition: transform 0.3s ease, color 0.3s ease;
        justify-content: center;
        h4 {
            margin-bottom: 0;
        }
    }
    .project-content::after {
        content: "→";
        position: absolute;
        opacity: 0;
        transition: right 0.3s ease, opacity 0.3s ease;
        right: -30px;
    }
}

/* Project hover */

.project:hover {
    .project-content {
        transform: translateX(30px);
        h4 {
            color: #4d4d4d;
        }
    }
    .project-content::after {
        right: -40px;
        opacity: 1;
    }
}

/* Additional projects */

.additional_projects {
    background-color: #ffffff;
    padding: 2em 2.5em;
}

.additional_projects_leader {
    max-width: 33em;
    margin-bottom: 2.5em;
}

/* Media queries */

@media only screen and (min-width: 550px) {
    .other_skills ul {
        columns: 2;
    }

   .additional_projects ul {
        columns: 2;
    }

    .skills .skill {
        flex: 0 0 calc((100% - 10px) / 2);      
    }
}

@media only screen and (min-width: 768px) {

    .additional_projects ul {
        columns: 3;
    }

    .thought {
        height: 100%;
    }
    .col-md-1-2 {
        width: 50%;
    }

    .home-content {
        padding-right: 4em;
    }

    /* First row: 2 children, 50% each */
    .skills > .skill:nth-child(1),
    .skills > .skill:nth-child(2) {
        flex: 0 0 calc((100% - 10px) / 2);
    }

    /* From 3rd child onwards: 3 per row */
    .skills > .skill:nth-child(n+3) {
        flex: 0 0 calc((100% - 20px) / 3);
    }

}

@media only screen and (min-width: 1000px) {
    .col-lg-1-3 {
        width: 33.33%
    }
    .col-lg-1-2 {
        width: 50%;
    }
    .additional_projects ul {
        columns: 4;
    }
}

@media only screen and (min-width: 1200px) {
    .col-xl-1-4 {
        width: 25%;
    }
}