/*! davidkeller.me v3.0 | https://davidkeller.me */

/* 
 * This CSS is compleately build by hand and with love. It should show that in
 * 2020 you don't need any preprocessor or pipeline to build a simple website
 * using the most recent CSS features. The design is heavily inspired by Apple & 
 * CSS-Tricks.
 *
 * – David
 *
 * Features:
 * - Mobile first
 * - Responsive
 * - Based on em & rem to adjust with browser zooming
 * - Using CSS custom properties for colors, gradients and some sizes
 *
 * Known pitfalls:
 * - In browsers without custom properties support most of the layout will fail: 
 *    https://caniuse.com/#feat=css-variables
 * - The gradients on text (h1, h2 & a:hover) uses non-standard CSS features
 *
 * Best resources for CSS:
 * - CSS-Tricks: https://css-tricks.com
 * - MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/CSS
 */

/* Inter font family by rsms: https://rsms.me/inter/ */
@import "/font/inter.css";
 
/* ==========================================================================
    Defaults
    Based on https://hankchizljaw.com/wrote/a-modern-css-reset/
   ========================================================================== */
   
/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove default padding */
ul,
ol {
    padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
li {
    margin: 0;
}

/* Set core body defaults */
body {
    min-height: 100vh;
    scroll-behavior: smooth;
    text-rendering: optimizeSpeed;
    line-height: 1.2;
}

/* A element that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
    max-width: 100%;
    display: block;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
   

/* ==========================================================================
    Base style
    Desgined in Sketch and inspired by Apple & CSS-Tricks.
    
    - Everything is based on a default font-size of 25px
    - Gradient text is based on https://css-tricks.com/snippets/css/gradient-text/
   ========================================================================== */
   
:root {
    /* Default colors */
    --main-color: #F58031;
    --main-color-light: #F5C431;
    --second-color: #0E7FE5;
    --second-color-light: #10B3FF;
    
    /* Default gradients */
    --main-gradient: linear-gradient(135deg, var(--main-color-light) 0%, var(--main-color) 100%);
    --second-gradient: linear-gradient(135deg, var(--second-color-light) 0%, var(--second-color) 100%);
    
    /* Allow chaning of color/gradient by section */
    --section-color: var(--main-color);
    --section-color-light: var(--main-color-light);
    --section-gradient: var(--main-gradient);
    
    --text-color: #000000;
    
    /* Default sizes */
    --horizontal-viewport-margin: 1.28rem;
    --vertical-default-margin: 1.28rem;
    
    --section-spacing: var(--vertical-default-margin);
    
    --max-text-width: 33rem;
    --max-image-width: 52rem; /* 1300 / 25 */
    --max-old-image-width: 36rem; /* 900 / 25 */
}

html {
    color: var(--text-color);
    
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: 25px;
    font-weight: 600;
}

@supports (font-variation-settings: normal) {
    html {
        font-family: "Inter var", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    }
}

/* As most of the links are not too relevant we "hide" them. */
a {
    color: var(--text-color);
    text-decoration: none;
}

a:hover,
a:hover h3,
a:hover p {
    background: var(--section-gradient);
    color: var(--section-color);

    -webkit-background-clip: text;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    -webkit-text-fill-color: transparent;
}

h1 a,
h2 a {
    background: var(--section-gradient);
    color: var(--section-color);
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 900;
    margin-bottom: var(--vertical-default-margin);
    margin-top: 0.2rem;

    -webkit-background-clip: text;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    -webkit-text-fill-color: transparent;
}

li,
p {
    margin-bottom: 0.88rem;
}

mark {
    background: var(--section-gradient);
    color: #ffffff;
    padding: 0 0.25em;
    
    -webkit-text-fill-color: #ffffff;
}

/* ==========================================================================
    Section specific styles
   ========================================================================== */

/*
 * Border on top
 * Todo: Should be with psuedo elements or border on body
 */
.top-border {
    background: var(--main-gradient);
    height: 0.32rem;
}

/*
 * Me (main) section
 */

main {
    --section-color: var(--main-color);
    --section-color-light: var(--main-color-light);
    --section-gradinet: var(--main-gradient);
    
    margin: var(--section-spacing) var(--horizontal-viewport-margin) 2rem;
    max-width: var(--max-text-width);
}

/* It looks better if we fall back to te light color in case the gradient fails */
main h1 a {
    --section-color: var(--section-color-light);
}

main ul {
    list-style: none;
    margin-bottom: var(--vertical-default-margin);
}

main footer {
    font-size: 0.64rem;
    font-weight: 500;
}

main footer a {
    text-decoration: underline;
}

main footer a:hover {
    text-decoration: none;
}

/*
 * Projects section
 */

.projects {
    --section-color: var(--second-color);
    --section-gradient: var(--second-gradient);
        
    margin: auto;
    max-width: var(--max-image-width);
}

.projects h2,
.project h3,
.project p {
    margin: 0 var(--horizontal-viewport-margin);
    max-width: var(--max-text-width);
}

.project {
    margin-bottom: 2.56rem;
    overflow: hidden;
}

.project h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.project p {
    font-size: 0.664rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
}

.project.shadow p {
    margin-bottom: 0.35rem;
}

/* Overflow trick from: https://stackoverflow.com/a/41059954 */
.project img {
    margin-left: 50%;
    max-width: 27rem;
    transform: translateX(-50%);
}

.project.old img {
    max-width: 100%;
}

.project.borderless img {
    margin-left: 3%;
    margin-right: 3%;
    max-width: 94%;
    transform: none;
}

/*
 *	From http://avexdesigns.com/responsive-youtube-embed/
 */

.video {
    position: relative;
    padding-bottom: 56.25%; /* 56.25% */
    padding-top: 0px; /* 30px */
    height: 0; 
    overflow: hidden;
}
 
.video iframe,
.video object,
.video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*
 * Footer
 */

body > footer {
    font-size: 0.8rem;
    margin: 5.2rem var(--horizontal-viewport-margin) var(--vertical-default-margin);
}

/* ==========================================================================
    Adjustements for larger screen sizes
    
    Note: Use em for media queries! https://zellwk.com/blog/media-query-units/
    They are based on the browser's font setting, so 16px = 1em by default.
   ========================================================================== */

/* 416px */
@media only screen and (min-width: 26em) {    
    .project img {
        max-width: 35rem;
    }
}

/* 672px */
@media only screen and (min-width: 42em) {
    :root {
        --horizontal-viewport-margin: 3rem;
        --section-spacing: 3rem;
    }
    
    main {
        margin-bottom: calc(var(--section-spacing) + 1rem);
    }
    
    main footer {
        font-size: 0.75rem;
    }
    
    .project {
        margin-bottom: 3rem;
    }

    .project.old {
        margin-left: auto;
        margin-right: auto;
        max-width: var(--max-old-image-width);
    }
    
    .project h3 {
        font-size: 1.2rem;
        margin-bottom: 0.4rem;
    }
    
    .project p {
        font-size: 1rem;
        margin-bottom: var(--vertical-default-margin);
    }
    
    .project.shadow p {
        margin-bottom: 0.4rem;
    }
    
    .project img {
        max-width: var(--max-image-width);
    }
    
    body > footer {
        font-size: 1rem;
        margin-bottom: var(--horizontal-viewport-margin);
    }
}

/* 944px */
@media only screen and (min-width: 59em) {
    :root {        
        --section-spacing: 8rem;
    }
    
    li,
    p {
        margin-bottom: 0.4rem;
    }
    
    main,
    .projects h2,
    .project h3,
    .project p {
        margin-left: auto;
        margin-right: auto;
    }
    
    main {
        margin-bottom: var(--section-spacing);
    }
    
    .project.borderless img {
        margin-left: auto;
        margin-right: auto;
        max-width: var(--max-old-image-width);
    }
    
    body > footer {
        max-width: var(--max-text-width);
        margin: var(--section-spacing) auto var(--horizontal-viewport-margin);
    }
}