/* Fonts */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Playfair+Display:wght@700&display=swap');



/* Theme */

:root {
    --bg-color: #F5F5F5;
    --text-color: #000000;
    --slight-color: #B1B1B1;

    --small: 200px;
    --medium: 420px;
    --extra: 700px;
    --wide: 1000px;
}

[data-theme='dark'] {
    --bg-color: #131313;
    --text-color: #ECECEC;
    --slight-color: #7B7B7B;
}



/* Basic */

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;

    user-select: text;
}

html,
body {
    width: 100%;
    height: auto;
}

body {
    background-color: var(--bg-color);
}



/* Text */

h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: var(--text-color);
}

h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--text-color);
}

h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--text-color);
}

h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--text-color);
}

p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    color: var(--text-color);
    letter-spacing: -0.01em;
}

.justify {
    text-align: justify;
    text-justify: inter-word;
}

.slight {
    color: var(--slight-color);
}

.caption {
    color: var(--slight-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

sans,
.sans {
    font-family: 'Montserrat', sans-serif !important;
}

serif,
.serif {
    font-family: 'Playfair Display', serif !important;
}



/* Header */

.header {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 120px;
    padding-top: 30px;
    padding-left: var(--frame);
    padding-right: var(--frame);
}

.grow {
    flex-grow: 100;
}



/* Links */

a,
a:visited,
a:hover {
    text-decoration: none;
    color: inherit;
}

a.obvious,
a.obvious:visited,
a.obvious:hover {
    text-decoration: underline;
    color: inherit;
}

a:hover {
    text-decoration: underline;
    cursor: pointer;
}



/* Media */

.themed {
    fill: var(--text-color);
    opacity: 0.8;
}

svg {
    shape-rendering: geometricPrecision;
}

.icon {
    display: inline-block;
    width: 24px;
    height: 24px;
}
.icon.external {
    background-image: url("../media/icon-external.svg");
    position: relative;
    top: 2px;
}


/* Hello */

.wtf {
    caret-color: var(--text-color);
    vertical-align: top;
    white-space: pre-wrap;
}

.wtf:focus {
    outline: none;
}



/* Latest Project */

.preview {
    display: flex;
    position: relative;
    width: 420px;
    height: auto;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0px 14px 80px rgba(192, 192, 192, 0.06);
}

.preview img {
    z-index: 10;
    width: 100%;
    height: auto;
    zoom: 0.5;

}

img {
    max-width: 100%;
    height: auto;
    zoom: 0.5;
}

.preview-hover {
    border-radius: 4px;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 130px;
    position: absolute;
    width: 420px;
    height: 100%;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.4s;
    background-color: rgba(192, 192, 192, 0.8);
}

.preview-hover * {
    color: #FFFFFF;
}

.preview-hover:hover, .preview-hover:active {
    opacity: 1;
}



/* Rows */

.row {
    padding-bottom: 30px;
}

.row > * {
    display: inline-block;
    vertical-align: top;
    margin-right: 40px;
    margin-bottom: 20px;
    
}

.row > *:last-child {
    margin-right: 0;
    padding-bottom: 0;
}

.distant {
    margin-right: 80px;
    margin-bottom: 80px;
}

.near {
    margin-right: 20px;
    margin-bottom: 20px;
}



.tight {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.last {
    margin-bottom: 140px;
}

.padded {
    padding-top: 80px;
    padding-bottom: 80px;
}


/* Mobile */

@media only screen and (max-width: 600px) {

    :root {
        --frame: 30px;
    }

    body {
        padding-left: var(--frame);
        padding-right: var(--frame);
    }

    h1 {
        font-size: 60px;
        line-height: 64px;
        color: var(--text-color);
        padding-bottom: 50px;
    }

    h2 {
        font-size: 36px;
        line-height: 50px;
        color: var(--text-color);
        
    }

    h3 {
        font-size: 32px;
        line-height: 40px;
        margin-top: 30px;
    }

    h4 {
        font-size: 22px;
        line-height: 30px;
        margin-top: 20px;
    }

    p {
        font-size: 16px;
        line-height: 28px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    /* Columns */

    .small,
    .medium,
    .extra,
    .wide {
        width: auto;
    }

    .drop {
        margin-top: 100px;
    }

    .drop-less {
        margin-top: 100px;
    }

    .drop-a-little {
        margin-top: 40px;
    }

    .preview,
    .preview-hover {
        width: 100%;
    }

    .push {
        margin-right: 0px;
    }
    .push-less {
        margin-right: 0px;
    }

}



/* Small Desktop or Tablet */

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

    :root {
        --frame: 100px;
    }

    body {
        padding-left: var(--frame);
        padding-right: var(--frame);
    }


    h1 {
        font-size: 80px;
        line-height: 88px;
        color: var(--text-color);
        padding-bottom: 50px;
    }

    h2 {
        font-size: 36px;
        line-height: 50px;
        color: var(--text-color);
    }

    h3 {
        font-size: 32px;
        line-height: 40px;
        margin-top: 30px;
    }

    h4 {
        font-size: 22px;
        line-height: 30px;
        margin-top: 20px;
    }

    p {
        font-size: 16px;
        line-height: 28px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    /* Columns */

    .small {
        width: var(--small);
    }

    .medium {
        width: var(--medium);
    }

    .extra {
        max-width: var(--extra);
    }

    .wide {
        max-width: var(--wide);
    }

    .drop {
        margin-top: 140px;
    }

    .drop-less {
        margin-top: 100px;
    }

    .drop-a-little {
        margin-top: 40px;
    }

    .preview,
    .preview-hover {
        width: auto;
        max-width: var(--medium);
    }

    .push {
        margin-right: 80px;
    }
    .push-less {
        margin-right: 60px;
    }
}

/* Desktop */

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

    :root {
        --frame: 180px;
    }

    body {
        padding-left: var(--frame);
        padding-right: var(--frame);
    }

    h1 {
        font-size: 100px;
        line-height: 120px;
        padding-bottom: 50px;
    }

    h2 {
        font-size: 50px;
        line-height: 64px;
    }

    h3 {
        font-size: 32px;
        line-height: 40px;
        margin-top: 30px;
    }

    h4 {
        font-size: 22px;
        line-height: 30px;
        margin-top: 20px;
    }

    p {
        font-size: 16px;
        line-height: 28px;
        margin-top: 20px;
        margin-bottom: 20px;
    }


    /* Columns */

    .small {
        width: var(--small);
    }

    .medium {
        width: var(--medium);
    }

    .extra {
        width: var(--extra);
    }

    .wide {
        width: var(--wide);
    }


    .drop {
        margin-top: 180px;
    }

    .drop-less {
        margin-top: 100px;
    }

    .drop-a-little {
        margin-top: 60px;
    }

    .push {
        margin-right: 80px;
    }
    .push-less {
        margin-right: 60px;
    }
}