@keyframes backgroundgrain {
    0%   {background-position: 10px 10px;}
    10% {background-position: 10px 50px;}
    20% {background-position: 20px 30px;}
    30% {background-position: 70px 50px;}
    40% {background-position: 30px 70px;}
    50% {background-position: 0px 0px;}
    60% {background-position: 0px 60px;}
    70% {background-position: 50px 50px;}
    80% {background-position: 90px -10px;}
    90% {background-position: 30px 30px;}
    100% {background-position: 80px 50px;}
  }

body {
    position: relative;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    background-repeat: repeat;
    background-image: url('back-1.png');
    animation-name: backgroundgrain;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-timing-function: steps(1, end);
}

h1, h2, h3, h4, p, button, a, .pure-button {
    font-family: "Vollkorn", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

h1, h2, h3, h4, p {
    background-image: url('inky.jpeg');
    background-size: cover;
    background-clip: text;
    -webkit-background-clip: text;
    color: rgb(0 0 0 / 20%);
}

h1 {
    text-align: right;
    float: right;
    font-size: 6em;
}

h2 {
    font-size: 1.6em;
}

h3 {
    font-size: 1.5em;
}

p {
    font-size: 1.4em;
}

@keyframes flowingbackground {
    0%   {background-position: 50% -0%;}
    50%  {background-position: 0% 10%;}
    100% {background-position: 50% -0%;}
  }

div.live-profile {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    min-width: 200px;
    max-width: 300px;
    background-image: url('sea.jpeg');
    overflow: hidden;
    background-repeat: repeat;
    background-size: 150%;
    animation-name: flowingbackground;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    border-radius: 50%;
}

section {
    position: relative;
    margin: 0;
    padding: 0;
    top: 0vh;
    min-height: 100vh;
    width: 100vw;
}

section.projects {
    background-color: rgba(150, 150, 150, 0.2);
}

p.pill-bar span {
    background-color: rgba(50, 50, 250, 0.2);
    border-radius: 4px;
    margin-right: 5px;
    padding: 0.2em;
    font-size: 0.7em;
    color: black;
}

a.source-code {
    background-color: white;
    position: absolute;
    margin: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 40px;
}

section.photography {
    background-color: rgba(212, 212, 212, 0.2);
    position: relative;
}

section.photography div.background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('photos/back.jpeg');
    background-size: cover;
    opacity: 0.1;
}

section.photography div.pure-g div.pure-u-8-24 {
    position: relative;
    background-color: white;
}

section.photography div.photo-preview {
    background-size: cover;
    height:0;
    width:100%;
    padding-bottom:100%;
}

section.photography div.photo-preview:hover {
    opacity: 0.8;
    cursor: pointer;
}

div.hobby-item {
    min-height: 20vh;
    background-size: cover;
    position: relative;
}

div.hobby-item button {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0;
    cursor: pointer;
    color: white;
    font-size: 1.6em;
}

div.hobby-item button :hover {
    background-color: red;
}

div.hobby-item :hover {
    border: 1px black solid;
}

div.button-holder p {
    text-align: center;
}

div.desktop {
    display:none;
}

div.mobile {
    display:none;
    padding: 0;
    margin: 0;
    text-align: center;
}

p.footer {
    text-align: center; 
    font-style: italic; 
    opacity: 0.5;
}

/* Desktop*/
@media screen and (min-width: 48em) {
    div.desktop {
        display: flex;
    }
    section.photography div.photo-preview  {
        padding-bottom: 90%;
        overflow: hidden;
        background-image: none;
    }
}

/* Mobile*/
@media screen and (max-width: 48em) {
    h1 {
        font-size: 3.5em;
        text-align: center;
    }
    div.mobile {
        display: block;
    }
    a.pure-button {
        width: 90%;
    }
    div.live-profile {
        min-width: 0px;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 50%;
        max-height: 123px;
        max-width: 123px;
        float: right;
    }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {

    body {
        background-image: url('back-dark.png');
    }

    h1, h2, h3, h4, p {
        background-image: url('glossy.jpeg');
        color: rgb(250 250 250 / 70%);
    }

}

/* Styles to apply if user's device settings are to increase contrast */
@media (prefers-contrast: more) {
    body {
        background-image: none;
        background-color: white;
    }

    h1, h2, h3, h4, p {
        background-image: none;
        color: black;
    }

    p.footer {
        opacity: 1.0;
    }

    a.pure-button {
        border: 1px black solid;
        background-color: white;
    }

    div.live-profile {
        border: 1px black solid;
    }

    div.live-profile img {
        background-color:rgb(255 255 255 / 70%);
    }

}

/* styles to apply if a user's device settings are set to reduced motion */
@media (prefers-reduced-motion) {
    body {
        animation-name: none;
    }
    div.live-profile {
        animation-name: none;
    }
}

div.modal-holder {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background-color:rgb(0 0 0 / 70%);
    display: none;
}

div.modal-holder div.modal-frame {

    position: relative;
    max-width: 90vw;
    height: 90vh;
    background-color: whitesmoke;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5vh;
    border-radius: 10px;
    overflow: hidden;

}

div.modal-holder div.modal-frame div.modal-header {
    background-color: #eee;
    text-align: right;
}

div.modal-holder div.modal-frame div.modal-header button {
    border: none;
    padding: 6px;
    padding-right: 12px;
    margin: 0;
    background-color: #eee;
    font-family: sans-serif;
    font-size: 1.4em;
    font-weight: lighter;
    cursor: pointer;
}

div.modal-holder div.modal-frame div.modal-body {
    padding: 0px;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    display: inline-block;
}