@import url("https://use.typekit.net/kny7nxz.css");

html {
	--mobile-scale: 1.3;
	--mobile-padding-offset: 0.5;
    -webkit-user-select: text;
    -webkit-touch-callout: none;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "stratos", "Stratos", "StratosWeb", sans-serif;
    font-weight: 400;
    font-style: normal;
	--swatch-1: rgb(0, 0, 255);
	--swatch-2: rgba(0, 0, 255, 0.75);
	--swatch-3: rgba(0, 0, 255, 0.6);
	--swatch-4: rgba(0, 0, 255, 0.4);
	--swatch-5: rgba(0, 0, 255, 0.25);
	--swatch-6: rgba(255, 255, 255);
	background-color: #ffffff;

    display: flex;
    flex-direction: column;
    min-height: 100vh;

    cursor: url('cursor/pointer.png') 16 16,
            url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABS2lDQ1BBZG9iZSBSR0IgKDE5OTgpAAAokWNgYHqSk5xbzCTAwJCbV1IU5O6kEBEZpcB+gYGDgZtBmMGYwToxubjAMSDAhwEI8vLzUhkwwLdrDIwg+rIuyCxMebyAK7mgqARI/wFio5TU4mQGBkYDIJYvLykAijMFAMVFkrLB7BQQuygkyBnIrgCy+dIh7A4QOwnCngFiFwE9AWSvAKlPh7D3gM2BsC+A2CWpFSB7GZzzCyqLMtMzShSMDAwMFBxT8pNSFYIri0tSc4sVPPOS84sK8osSS1JBlkPcBwaCEIWgENMwtLS00IR5SJDBkSGFIZ8hiSGVQYEhiMGdwQlIazAYMlgCoQWDJsPwBaC0A2F9DgSnCUaxMwgxBEguLSqDMhmZjAnzEWbMkWBg8F/KwMDyByFm0svAsECHgYF/KkJMzZCBQUCfgWHfHADt21X33KMGGQAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAz5JREFUWIXV17Fv1VUUB/DPwfbxEIsVGiyCSCqDLiZGZMBR4+DgbqIsJsZBnTS6qgOJgy4OJv4DOjiw4KCJMUYh6mAwUQdFjLZowNJSC/TS9udw77Ovr79fX1+oEr/JTX7nd88993vPPffcc0MDQroLz6LCVKX1dpNuw/j78Qh24jROVFqzgxh4KKQqpKWQvh5k8jL+aEg/FhvvhbSvTm/LoIY3G9HckcbxeBGvYBRbcR7HK62ZmjGHcAQtTJffQziDk5XW/ADM0paQ2qXdGdJkSJdCOhnSRMOY57r0Xg9pbxk/HFLtYoeaCFRay7haDF/DLRjBzZo91+rSuwmp0rq63kIbCYQ0gvuKuLNLdzseKFvUiwNlYtiHwyHN4ALOVloL65HpJdA5BZvRGk9BowdqsPwPt+YtqErrp1dPIKTt8h6G7PYOLuP78t3Gfnmfeyefwu9F3oU98slpY3dIi1jEdImx1Qjp+RLFsyHN1yWikA6G9HGNmxdCerlLrzsRpZDmit1vQhqt9UBhO1KzuuvFcGmseDgTCGlMTjIwZm12DLRDOljkA9hWM0lgrEvv9q5Je8lMhDQLEdLTeKJ07seElaPUwRy+LN/bcI/VMUKOgZ/wS5HHi61eslfwFa51CBzDKzVM/xP0xsA05uXVbJXduBm4jItYKvJexcu9BD7EKdk9d+OlTSLwHT4oJOAN7AAhHes6Ss+E1C7//7VMGNK5Tt8NrwcGScVVf5VV6JuGN0qgwiTeGpDAITwqp+TrJvBHpfXmILOHdBSH+xH4X8RAYFdITxZ5Bp9WWnNrFdO9chEzLNeGfe+UjRLYg1eL/AO+ldNzL47gBStl2WiNzhoCp/F+kc9YyVYXuv638Zi8sr/WIX6rfFntkJPP51jAF/Id0MHxDrkhnMBnpeOiXDDAWbxYvnfjYfW3WxM+wbv4s0zeXca/psTfUHkurXkylQLyNyiVzNoKZn1ckp9052tsT3W+N5qIFvGzvLe/WvFSL2bkbRyRL7alBr3+COnBkrMnQ/oopNGQbgtpR0i1x7c8Qjp6T4V0qth4J6Q76sas54GWXFQs41zdU6wX5RHSecyEXGGNywFXS/qGJ6K/AVZUWyllJ9DDAAAAAElFTkSuQmCC") 16 16,
            url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='22.5' width='3' height='3.17' style='fill:blue;'/%3E%3Crect x='6.5' width='3' height='3.17' style='fill:blue;'/%3E%3Crect x='22.5' y='28.83' width='3' height='3.17' style='fill:blue;'/%3E%3Cpath d='M28.67,12.83v-3.17h-3.17v-3.17h-3.17v-3.17h-3v3.17h-6.67v-3.17h-3v3.17h-3.17v3.17h-3.17v3.17H0v12.67h3.17v-9.5h3.33v9.5h3.17v3.17h3v-5.17h-3.17v-3.33h13v3.33h-3.17v5.17h3v-3.17h3.17v-9.5h3.33v9.5h3.17v-12.67h-3.33ZM12.83,12.83h-3.33v-3.33h3.33v3.33ZM22.5,12.83h-3.33v-3.33h3.33v3.33Z' style='fill:blue;'/%3E%3Crect x='6.5' y='28.83' width='3' height='3.17' style='fill:blue;'/%3E%3C/svg%3E") 16 16, auto;
}

a:hover,
button:hover,
.element:hover,
.menu .link .element:hover,
#content .item a:hover,
#bottom a:hover,
#bottom .bio a:hover,
[onclick]:hover {
    cursor: url('cursor/pointer-hover.png') 16 16,
            url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABS2lDQ1BBZG9iZSBSR0IgKDE5OTgpAAAokWNgYHqSk5xbzCTAwJCbV1IU5O6kEBEZpcB+gYGDgZtBmMGYwToxubjAMSDAhwEI8vLzUhkwwLdrDIwg+rIuyCxMebyAK7mgqARI/wFio5TU4mQGBkYDIJYvLykAijMFAMVFkrLB7BQQuygkyBnIrgCy+dIh7A4QOwnCngFiFwE9AWSvAKlPh7D3gM2BsC+A2CWpFSB7GZzzCyqLMtMzShSMDAwMFBxT8pNSFYIri0tSc4sVPPOS84sK8osSS1JBlkPcBwaCEIWgENMwtLS00IR5SJDBkSGFIZ8hiSGVQYEhiMGdwQlIazAYMlgCoQWDJsPwBaC0A2F9DgSnCUaxMwgxBEguLSqDMhmZjAnzEWbMkWBg8F/KwMDyByFm0svAsECHgYF/KkJMzZCBQUCfgWHfHADt21X33KMGGQAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAgdJREFUWIXtlstLG1EUh3/nzkTxtckmSMRu2p22mwZBXCQV3VXUrmrVgq1NadFFiw35A/rYmpWPraWlhXZ2bgU3prjpxoUgGEgRWoQ+M5A7M6er2CGZaDJ3pqt8MDAz994zH3N+dxigRYsWLXySSspCKikLqnWEyuLDQ46rSigJaBppsRj1378nc89WrOt+augqAsPDhDdvNXR2yKWFBfoNYL/ZGkpvoELJjOD0FFk/7QhEAACePBW4OUHdzUooCTD/O08kCCMjIhqLUf/jR9aLTMa61kgNpQxUk0icZSI7f1cIAJ8vWhNYC9yUzAh+fEemkXaEIgA0nonQBKozUe87oZQBdwjrSVQyMTtH3fD4ToT2BtyUzAh+/aQlr3b8FwGgfiYC3YbVnJwA+bxzdv3tK6I7OxwNTOCiDOTzDqan7HPnBNoCw3AgSNbcZ7SR+whFYHXVxvY2F9Np8WrmtsV7ew6GhggfPmoYH5PHy8vWA691gQgYhoODAxRLf/jT2rqeffeeqVgEensJk5MCu7t8yTR5IDSB6SkbgrC19TpyK4h6DZFKygKhzO1tZc8ojo/J47lZiyvcmZH26A15VD3P9y4YvErPL1/BAABsbtaOSwmSrjzaNgnH4Zrn+RbI5fSN88bjcex3dkEYhtMHAD09/EXXm/9lU+Jh2npJKDOhzIuLMuc15y/lj8P01DFVqQAAAABJRU5ErkJggg==") 16 16,
            url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M25.25,23.92h3.98v-2.64h-1.3l-.03-.03v-1.3h-1.3s0,0,0,0h0v-1.3h-1.3s0,0,0,0l-.04-.04h0s0,0,0,0v-1.3h-1.3s-.04-.03-.04-.03h0s0,0,0,0v-1.3h-1.3s-.03-.03-.03-.03v-.02s.01-.22,0-.48c0-.01,0-.02,0-.04,0-.01,0-.02,0-.03,0-.03,0-.07,0-.1v-.61h-1.28s-.04-.03-.04-.03h0s0,0,0,0v-1.3h-1.3s-.04-.03-.04-.03h0s0,0,0,0v-1.3h-1.3s0,0,0,0l-.03-.03h0s0,0,0,0v-1.31h-.43s-.14,0-.14,0c-.01,0-.03,0-.04,0h-.2c-.06,0-.12,0-.17,0h-.09c-.08,0-.13,0-.15,0h-.08s0,.02,0,.02l-.02-.02h.02v-1.3h-1.34v-1.34h-1.3v21.22h2.64v-1.3h-.12s.12,0,.12,0l.03-.03h1.28v-1.3h-.01,0s.05-.05.05-.05h0s0,.01,0,.01h1.3v-1.3h0s.03-.03.03-.03h0s1.3,0,1.3,0h0s.02.04.02.04h0v2.63h1.3l.02.04v2.6h1.3s.04.03.04.03h0s0,0,0,0v1.3h2.64v-1.3h-.05,0s.04-.05.04-.05h0v.02h1.3v-2.61h-1.29s-.01-.03-.01-.03h0v-2.64h-1.3s0,0,0,0l-.05-.04h0s.02,0,.02,0v-1.3Z' style='fill:%23fff;'/%3E%3Crect x='17.29' y='26.59' width='1.3' height='1.3' style='fill:blue;'/%3E%3Cpolygon points='15.95 9.35 15.95 8.01 14.65 8.01 14.65 29.23 17.29 29.23 17.29 27.93 17.2 27.93 15.97 27.91 15.96 19.28 15.95 10.65 17.29 10.65 17.29 9.35 15.95 9.35' style='fill:blue;'/%3E%3Crect x='18.63' y='25.25' width='1.3' height='1.3' style='fill:blue;'/%3E%3Cpath d='M18.02,10.65h-.24s-.07,0-.1,0h-.07s-.24,0-.24,0h-.08s0,0,0,0v1.3h1.3v-1.31h-.44s-.14,0-.14,0Z' style='fill:blue;'/%3E%3Crect x='18.63' y='11.99' width='1.3' height='1.3' style='fill:blue;'/%3E%3Crect x='23.94' y='17.3' width='1.3' height='1.3' style='fill:blue;'/%3E%3Crect x='25.27' y='18.64' width='1.3' height='1.3' style='fill:blue;'/%3E%3Crect x='26.58' y='19.94' width='1.3' height='1.3' style='fill:blue;'/%3E%3Cpath d='M22.57,15.92s0-.24,0-.52c0-.01,0-.02,0-.03,0-.03,0-.07,0-.1v-.61h-1.28v1.3h1.26v-.04Z' style='fill:blue;'/%3E%3Crect x='23.94' y='30.57' width='2.64' height='1.3' style='fill:blue;'/%3E%3Crect x='25.27' y='25.25' width='1.3' height='2.64' style='fill:blue;'/%3E%3Crect x='26.58' y='27.93' width='1.3' height='2.61' style='fill:blue;'/%3E%3Crect x='19.96' y='23.92' width='1.3' height='1.3' style='fill:blue;'/%3E%3Cpolygon points='27.92 21.28 27.92 22.61 23.94 22.61 23.94 25.22 25.24 25.22 25.24 23.92 29.22 23.92 29.22 21.28 27.92 21.28' style='fill:blue;'/%3E%3Crect x='21.28' y='25.25' width='1.3' height='2.64' style='fill:blue;'/%3E%3Crect x='19.96' y='13.33' width='1.3' height='1.3' style='fill:blue;'/%3E%3Crect x='22.6' y='27.93' width='1.3' height='2.61' style='fill:blue;'/%3E%3Crect x='22.6' y='15.97' width='1.3' height='1.3' style='fill:blue;'/%3E%3C/svg%3E") 16 16, auto;
}

::selection {
  color: var(--swatch-6);
  background-color: var(--swatch-1);
}

#top {
    margin: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: calc(100% - 10px);
    padding: 8px 0;
    z-index: 9999;
}

.title {
    user-select: none;
    line-height: 39%;
    color: var(--swatch-1);
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 8px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: block;
    position: static;
}

.title a, a:visited {
    text-decoration: none;
}

.title a:hover {
    text-decoration: none;
}

@media screen and (min-width: 750px) {
    .title a:hover::before {
        content: '\21A9\00A0';
    }
}

.menu {
    color: var(--swatch-1);
    padding: 8px;
    display: block;
    position: static;
}

.menu .link {
    text-align: center;
    display: inline-block;
    position: relative;
}

.menu .link .element {
    color: var(--swatch-1);
    background-color: rgb(255, 255, 255, 0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(10px);
    margin: 0 0 0 10px;
    border: 1px solid var(--swatch-1);
    border-radius: 20px;
    width: clamp(4em, 8vw, 100px);
    height: auto;
    display: inline-block;
    transition-duration: 0.4s;
}

.menu .link .element:hover {
    color: var(--swatch-6);
    background-color: var(--swatch-1);
    margin: 0 0 0 10px;
    border: 1px solid var(--swatch-6);
    border-radius: 20px;
    width: clamp(4em, 8vw, 100px);
    height: auto;
    display: inline-block;
    transition-duration: 0.4s;
    }

#toptag {
    user-select: none;
    margin: 95px 8px 0 8px;
    width: clamp(9.9em, 800px, calc(100% - 10px));
    height: auto;
    min-height: 30vh;
    padding-bottom: 2rem;
    display: block;
    position: relative;
    z-index: -1;
}

#toptag .text {
    background-color: #ffffff;
    display: block;
    position: relative;
}

#toptag .text h1 {
    font-family: "stratos", "Stratos", "StratosWeb", sans-serif;
    font-weight: bold;
    font-style: normal;
    font-size: clamp(4.5rem, 6vw, 13rem);
    line-height: 107%;
    color: #ffffff;
    background-color: var(--swatch-1);
    text-align: left;
    width: fit-content;
    height: auto;
    margin: 0 0 5px 0;
    display: block;
    position: relative;
    top: 0;
}

#content {
    flex: 1 0 auto;
    min-height: 100px;
    margin: 20px 5px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(250px, 30vw, 400px), 1fr));
    gap: clamp(10px, 2vw, 30px);
    width: calc(100% - 10px);
    position: relative;
}

#content .item .caption a {
    font-family: "stratos", "Stratos", "StratosWeb", sans-serif;
    font-size: clamp(0.8rem, 2vw, 1rem);
    font-weight: bold;
}

#content .item a, a:visited {
    color: var(--swatch-1);
    text-decoration: none;
}

#content .item a:hover {
    color: var(--swatch-1);
    text-decoration: none;
}

#content .item caption {
    color: var(--swatch-1);
    margin-top: 8px;
    text-align: left;
    line-height: 1.3;
    padding: 0 2px;
    display: block;
}

#content .item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 16/9;
}

#content .item:hover img {
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

#content .item .caption {
    font-family: "stratos", "Stratos", "StratosWeb", sans-serif;
    font-size: 0.9rem;
    color: var(--swatch-1);
    margin-top: 5px;
    text-align: left;
    display: block;
}

#bottom {
    font-family: "adobe-jenson-pro", serif;
    font-weight: 400;
    font-style: normal;
    color: var(--swatch-1);
    padding: 0 5px 20px 5px;
    width: 100%;
    display: block;
    position: relative;
    box-sizing: border-box;
    margin-top: 13vh;
    margin-bottom: 30px;
}

#bottom a, a:visited {
    color: var(--swatch-1);
    text-decoration: underline;
}

#bottom a:hover {
    text-decoration: none;
}

#bottom table {
    width: 100%;
    max-width: 1670px;
    height: auto;
    margin: 0 auto;
}

#bottom td {
    padding: 0 10px 0 10px;
    vertical-align: baseline;
    display: table-cell;
}

#bottom .tagline {
    user-select: none;
    display: block;
    position: relative;
    margin-bottom: 20px;
}

#bottom .tagline span {
    font-family: "stratos", "Stratos", "StratosWeb", sans-serif;
    font-size: 1.3em;
    line-height: 116%;
    color: #fff;
    background-color: #0000ff;
    margin-bottom: 2px;
    width: fit-content;
    height: auto;
    display: block;
}

#bottom .contact span {
    display: block;
}

#bottom .bio span {
    display: block;
    position: relative;
}

@media screen and (max-width: 900px) {
    #toptag {
        min-height: 20vh;
        padding-bottom: 1rem;
    }

    #toptag .text h1 {
        font-size: clamp(3rem, 8vw, 4.5rem);
    }

    #bottom {
        position: relative;
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
        margin-top: 2rem;
    }

    #bottom table,
    #bottom tbody,
    #bottom tr,
    #bottom td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    #bottom td {
        margin-bottom: 2rem;
        padding: 0;
    }
}

#bottom .copyright {
    font-family: "stratos", "Stratos", "StratosWeb", sans-serif;
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--swatch-1);
    display: block;
    position: relative;
}

@media screen and (min-width: 900px) {
    #bottom .copyright {
    margin-left: 5px;
}
}

#bottom .end {
    bottom: 5px;
    width: calc(100% - 10px);
    height: auto;
    display: inline-block;
    position: relative;
}

#bottom .end .copyright {
    font-family: "stratos", "Stratos", "StratosWeb", sans-serif;
    font-weight: 400;
    left: 0;
    text-align: left;
    float: left;
    position: relative;
}

#bottom .end .scrollTop {
    font-family: "stratos", "Stratos", "StratosWeb", sans-serif;
    font-weight: 400;
    right: 0;
    text-align: right;
    float: right;
    position: relative;
}

#bottom .end .scrollTop a, a:visited {
    color: var(--swatch-1);
    text-decoration: none;
}

#bottom .end .scrollTop a:hover {
    color: var(--swatch-1);
    text-decoration: none;
}

/* PORTFOLIO */
#portfolio {
    color: var(--swatch-1);
    padding: 10px;
}

#portfolio .intro {
    margin: 20vw 0 40px 0;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    position: relative;
}

#portfolio .intro h6 {
    font-weight: 700;
    font-size: 2rem;
    line-height: 113%;
    float: left;
    margin: 0;
    width: 400px;
    flex-shrink: 0;
    display: block;
    position: relative;
}

#portfolio .intro span {
    font-size: 1rem;
    line-height: 118%!important;
    margin-bottom: 5px;
    width: 250px;
    display: block;
    position: relative;
}

#portfolio .intro p {
    float: right;
    width: calc(100% - 230px);
    margin: 0;
    padding: 8px;
    flex: 1;
    display: block;
    position: relative;
    line-height: 1.5;
}

@media screen and (max-width: 768px) {
    #portfolio .intro {
        flex-direction: column;
    }

    #portfolio .intro h6 {
        width: 100%;
        margin-bottom: 5px;
    }

    #portfolio .intro p {
        width: 100%;
    }
}

#portfolio .artboards {
    margin: 8px 0 40px 0;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    position: relative;
}

#portfolio .artboards img {
    margin: 0;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16/9;
    display: block;
    position: relative;
}