/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700&display=swap');

html {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    font-family: 'Open Sans', serif;
}

*,*:before,*:after {
    -webkit-box-sizing: inherit;
            box-sizing: inherit;
}

a {
    border: 2px dotted #0040ff;
    border-radius:  10%;
    color: black;
    font-weight: bold;
    margin: 0 0.5em;
    padding: 0.1rem 0.35rem;
    position: relative;
    text-decoration: none;
    
}

a > svg {
    color: black;
    position: relative;
    top: 0.1em;
    width: 1.5em;
}

a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 2px solid blue;
    

    
}

article:before, main.default:after {
    -webkit-box-shadow: 0 -5px 5px black;
            box-shadow: 0 -5px 5px black;
    content: "";
    color: black;
    display: block;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-area: 1/1/2/2;
    height: 3px;
    width: 100vw;
}

article:before {
    position: relative;
    z-index: 0;
}

article {
    background-color: white;
    color: #494f6a;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-area: 1/1/2/2;

}

body {
    min-height: 100vh;
    min-width: 100vw;
}

button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 0.2rem;
    outline: inherit;
    padding: 0.25rem;

}


details[open] > summary::before {
    border: none;
    background: -o-linear-gradient(315deg, transparent 50%, blue 50%);
    background: linear-gradient(135deg, transparent 50%, blue 50%)
}

details[open] > summary {
    color: blue;
    font-weight: normal;
    font-size: small;
    letter-spacing: normal;
    
}


g {
    -webkit-animation-name: writeLine;
            animation-name: writeLine;
    -webkit-animation-direction: normal;
            animation-direction: normal;
    -webkit-animation-duration: 5s;
            animation-duration: 5s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}
    

header {
    background: -o-linear-gradient(70deg, white 20%, rgb(219, 226, 236) 50%,white 60%, rgb(219, 226, 236));
    background: linear-gradient(20deg, white 20%, rgb(219, 226, 236) 50%,white 60%, rgb(219, 226, 236));
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-bottom: 60vh;
    
}


header > div {
    background: -o-linear-gradient(rgb(219, 226, 236, 0.6),white);
    background: -webkit-gradient(linear,left top, left bottom,from(rgb(219, 226, 236, 0.6)),to(white));
    background: linear-gradient(rgb(219, 226, 236, 0.6),white);
    -webkit-box-shadow: 0 -5px 5px black;
            box-shadow: 0 -5px 5px black;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
    padding: 1rem;
    position: relative;
    z-index: 1;
    

}

header button {
    padding: 1rem;
}


h1 {
    -webkit-animation-name: nameReveal;
            animation-name: nameReveal;
    -webkit-animation-direction: normal;
            animation-direction: normal;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    font-size: 3rem;
    letter-spacing: 0.75rem;
    text-align: center; 
    
}

h1 {
    color: black;
}

h2 {
    color: #44578e;
}

h1,h2,h3.h4 {
    font-family: 'Merriweather','serif';
}



li {
    display: inline-block;
    list-style: none;
    min-width: -webkit-max-content;
    min-width: -moz-max-content;
    min-width: max-content;
    padding: 0.35rem;
}

li > img {
    width: 50px;
}

li > p {
    color: #282828;;
    letter-spacing: 0.1rem;
    opacity: 0.7;
    
    
}

ol > li  img {
    width: 1rem;
    -webkit-transition: border-radius 0.75s, -webkit-transform 0.75s;
    transition: border-radius 0.75s, -webkit-transform 0.75s;
    -o-transition: border-radius 0.75s, transform 0.75s;
    transition: border-radius 0.75s, transform 0.75s;
    transition: border-radius 0.75s, transform 0.75s, -webkit-transform 0.75s;
}

ol > li > button {
    padding: 0;
}


ol, ul {
    padding-left: 0;
}

main {
    display: -ms-grid;
    display: grid;
}


nav > div {
    display: inline-block;
    position: relative;
}

nav svg {
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
}

noscript {
    background-color: white;
    height: 100%;
    overflow: hidden;
    position: fixed;
    width: 100%;
    z-index: 1;
}


summary::before {
    border: 1px solid;
    border-radius: 4px;
    cursor: pointer;
    content: "";
    display: block;
    height: 12px;
    width: 12px;
    
    
}

summary {
    cursor: pointer;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-weight: bold;
    gap: 0.2em;
    letter-spacing: 0.1rem;
    
    
}


summary::marker {
    display: none;
}

summary::-webkit-details-marker{
    display: none;
}


.bold {
    font-weight: bold;
}

.closed {
    -webkit-animation: 1.5s ease-out 0s 1 normal forwards running contractArticle;
            animation: 1.5s ease-out 0s 1 normal forwards running contractArticle

 }


.contracted {
    -webkit-animation: 0.25s linear 0s 1 normal forwards running contractParagraph;
            animation: 0.25s linear 0s 1 normal forwards running contractParagraph;

}

.hidden {
    visibility: hidden;
}


.highlighted  img {
    border: 0.1px solid blue;
    border-radius: 2px;
    -webkit-transform: scale(1.5) translateY(-0.3em);
        -ms-transform: scale(1.5) translateY(-0.3em);
            transform: scale(1.5) translateY(-0.3em);
}


.none {
    display: none;
}

.open {
    -webkit-animation: 1.5s linear 0s 1 normal forwards running expandArticle;
            animation: 1.5s linear 0s 1 normal forwards running expandArticle
 }


#about {
    -ms-flex-line-pack: start;
        align-content: flex-start;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 1rem;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    position: relative;
    
}


#about div > details + p {
    max-height: 0;
    padding: 0;
    overflow: hidden;
    visibility: hidden;
}

#about div > details[open] + p {
    -webkit-animation: 0.25s linear 0s 1 normal forwards running expandParagraph;
            animation: 0.25s linear 0s 1 normal forwards running expandParagraph;
    
}


#about nav {
    border-radius: 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-top: 0.8rem;
   padding: 1rem;
   width: 100vw;
    
}

#about nav > div {
    width: min(700px,100%);
}



#about  p {
    -webkit-box-shadow: 0px 0px 15px 2px;
            box-shadow: 0px 0px 15px 2px;
    display: block;
    line-height: 2.5;
   -webkit-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
       transform: rotate(2deg);

}

#about h4 > a, #about p > a {
    margin: 0;
    padding: 0;
    
}

#about > section:first-child {
    padding: 0.1rem 0.5rem;
    text-align: center;
    width: 100%;
}

#about > section:last-child {
    background: -webkit-gradient(linear,left top, left bottom,color-stop(10%, white),color-stop(50%, rgb(219, 226, 236)),color-stop(75%, rgb(219, 226, 236)),to(white));
    background: -o-linear-gradient(white 10%,rgb(219, 226, 236) 50%,rgb(219, 226, 236) 75%,white);
    background: linear-gradient(white 10%,rgb(219, 226, 236) 50%,rgb(219, 226, 236) 75%,white);
   

}


#devices {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    max-width: 100vw;
}


#devices > div:first-child {
    aspect-ratio: 0.5;
    border: 2px solid;
    border-radius: 10px;
    -webkit-box-shadow: 0.5rem 0.5rem;
            box-shadow: 0.5rem 0.5rem;
    margin: 1rem;
    width: min(150px,25vw);
    overflow: hidden;
    padding: 2px;
    position: relative;
   
}

#devices > div:first-child::before {
    background-color: #e3e2e2;
    border: 1px solid;
    border-radius: 10px;
    content: "";
    display: block;
    height: 0.1rem;
    margin: 0 auto min(3.5px,25vw) auto;
    width: 25%;
  }

#devices #mobile {
    aspect-ratio: 0.5;
    overflow: hidden;
    position: relative;
    width: 100%
}

#devices #mobile > img {
    border: 1px solid;
    border-radius: 3px;
    margin-top: 4px;
    max-width: 100%;
    position: absolute;
}

#devices > div:last-child {
    min-height: 200px;
    width: min(650px,100%);
}

#devices #screen {  
    aspect-ratio: 2/1;
    border-color: #00000082;
    border-radius: 10px 10px 0 0;
    border-style: solid;
    border-width: 6px 1.5px 0 1.5px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: min(80%,560px);
  }

  #devices #screen::after {
    background-color: #505050;
    bottom: 0;
    content: "";
    height: 0.4em;
    position: absolute;
    width: 100%;
    
    
}

#devices #screen > img {   
    border-radius: 5px;
    height: auto;
    max-width: 100%;
    position: absolute;
  }


#devices #bottom {
    background: -o-linear-gradient(rgba(128, 128, 128, 0.445) 15%, white 30%, grey );
    background: -webkit-gradient(linear, left top, left bottom, color-stop(15%, rgba(128, 128, 128, 0.445)), color-stop(30%, white), to(grey) );
    background: linear-gradient(rgba(128, 128, 128, 0.445) 15%, white 30%, grey );
    border-radius: 0 0 5px 5px;
    height: 14px;
    margin: 0 auto;
    max-width: min(93%,660px);
    
}


#project_details, #project_tooling {
   padding: 0.25rem;
   text-align: center;
}

#project_details > div, #project_tooling > div {
    padding: 0.25rem;
 }

 #project_details > div > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 0.25rem;
    padding-top: 0;
 }


#project_tooling > div:first-child {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-pack: distribute;
        justify-content: space-around;
 }

#project_tooling button > svg { 
    border: 1px solid;
    border-radius: 100%;
    -webkit-box-shadow: 0 0 0.5vmax 0.5vmax;
            box-shadow: 0 0 0.5vmax 0.5vmax;
    color: #44578e;
    width: min(5rem,10vw);
    
 }

 #project_tooling button > svg:active { 
    color: blue;
    background-color: grey;
    
 }

 

 @-webkit-keyframes contractArticle {
    0% {
        -webkit-transform: translateY(-61vh);
                transform: translateY(-61vh);
    }

    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0)
    }
}

 

 @keyframes contractArticle {
    0% {
        -webkit-transform: translateY(-61vh);
                transform: translateY(-61vh);
    }

    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0)
    }
}

@-webkit-keyframes expandArticle {
    0% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-61vh);
                transform: translateY(-61vh);
    }
}

@keyframes expandArticle {
    0% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-61vh);
                transform: translateY(-61vh);
    }
}

 

 @-webkit-keyframes contractParagraph {
    0% {
        background: -webkit-gradient(linear,left top, right top,from(#9ba3cc3d),color-stop(10%, white), color-stop(90%, white),to(#dedef4));
        background: linear-gradient(90deg,#9ba3cc3d,white 10%, white 90%,#dedef4);
        opacity: 1;
        max-height: 100rem;
        padding: 2rem;
    }

    50% {
        opacity: 0;
    }

    100% {
        background-color: transparent;
        display: block;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        padding: 0;
    }
}

 @keyframes contractParagraph {
    0% {
        background: -webkit-gradient(linear,left top, right top,from(#9ba3cc3d),color-stop(10%, white), color-stop(90%, white),to(#dedef4));
        background: -o-linear-gradient(left,#9ba3cc3d,white 10%, white 90%,#dedef4);
        background: linear-gradient(90deg,#9ba3cc3d,white 10%, white 90%,#dedef4);
        opacity: 1;
        max-height: 100rem;
        padding: 2rem;
    }

    50% {
        opacity: 0;
    }

    100% {
        background-color: transparent;
        display: block;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        padding: 0;
    }
}

@-webkit-keyframes expandParagraph {
    0% {
        background-color: transparent;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        padding: 0;
        visibility: hidden;
    }

    50% {
        opacity: 0.5;
        visibility: visible;
    }

    100% {
        background: -webkit-gradient(linear,left top, right top,from(#9ba3cc3d),color-stop(10%, white), color-stop(90%, white),to(#dedef4));
        background: linear-gradient(90deg,#9ba3cc3d,white 10%, white 90%,#dedef4);
        max-height: 100rem;
        opacity: 1;
        padding: 2rem;
        visibility: visible;
    }
}

@keyframes expandParagraph {
    0% {
        background-color: transparent;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        padding: 0;
        visibility: hidden;
    }

    50% {
        opacity: 0.5;
        visibility: visible;
    }

    100% {
        background: -webkit-gradient(linear,left top, right top,from(#9ba3cc3d),color-stop(10%, white), color-stop(90%, white),to(#dedef4));
        background: -o-linear-gradient(left,#9ba3cc3d,white 10%, white 90%,#dedef4);
        background: linear-gradient(90deg,#9ba3cc3d,white 10%, white 90%,#dedef4);
        max-height: 100rem;
        opacity: 1;
        padding: 2rem;
        visibility: visible;
    }
}



@-webkit-keyframes nameReveal {
    0% {
        opacity: 0;
        text-shadow: 
    1px 10px 4px black,
    1px 20px 4px #222,
    1px 30px 4px #333,
    2px 40px 4px rgba(0,0,0,0.3),
    4px 40px 4px rgba(0,0,0,0.4),
    6px 50px 4px rgba(0,0,0,0.6);
        
    }

    100% {
        opacity: 1;
        text-shadow: 
    1px 1px 4px black,
    1px 1px 4px #222,
    1px 1px 4px #333,
    2px 2px 4px rgba(0,0,0,0.3),
    4px 3px 4px rgba(0,0,0,0.4),
    6px 4px 4px rgba(0,0,0,0.6);
        
        
    }

}

@keyframes nameReveal {
    0% {
        opacity: 0;
        text-shadow: 
    1px 10px 4px black,
    1px 20px 4px #222,
    1px 30px 4px #333,
    2px 40px 4px rgba(0,0,0,0.3),
    4px 40px 4px rgba(0,0,0,0.4),
    6px 50px 4px rgba(0,0,0,0.6);
        
    }

    100% {
        opacity: 1;
        text-shadow: 
    1px 1px 4px black,
    1px 1px 4px #222,
    1px 1px 4px #333,
    2px 2px 4px rgba(0,0,0,0.3),
    4px 3px 4px rgba(0,0,0,0.4),
    6px 4px 4px rgba(0,0,0,0.6);
        
        
    }

}

@-webkit-keyframes writeLine {
    0% {
        
        stroke-dashoffset: 100;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes writeLine {
    0% {
        
        stroke-dashoffset: 100;
    }

    100% {
        stroke-dashoffset: 0;
    }
}


@media (max-width: 300px){
    * {
        word-break: break-all !important;
    }

    html {
        font-size: 9px;
    }

    summary::before{
        -ms-flex-negative: 0;
            flex-shrink: 0;
    }

    #devices {
        display: none;
    }

    #project_tooling button > svg {
       width: 20px;
       -webkit-box-shadow: 0 0 3px 3px;
               box-shadow: 0 0 3px 3px;
    }
}

@media (min-width: 700px){
    #about nav {
        max-width: 100%;
        width: auto;
    }

    #about p {
        -webkit-transform: none;
        -ms-transform: none;
            transform: none;
    }

}

@media (min-width: 900px){
    header {
        background-size: 100vw 100px;
    }

    #about nav {
        max-width: 100%;
        width: auto;
    }

    #about p {
        -webkit-transform: none;
        -ms-transform: none;
            transform: none;
    }

}

@media (hover: hover) {

    #project_tooling button:hover {
        -webkit-transform: scale(1.2);
            -ms-transform: scale(1.2);
                transform: scale(1.2)
    }

}