::-webkit-scrollbar {width: none}
::-webkit-scrollbar-track {}
::-webkit-scrollbar-thumb {background-color: #eb5b34;border: 10px solid transparent;border-radius: 30px;background-clip: content-box;}
::-webkit-scrollbar-thumb:hover {background-color: #f54627}

    
body {width:100vw; margin: 0;overflow: overlay;overflow-x:hidden;font-family: 'Rubik', sans-serif;}

h1{color:black}
.splashnamebox {color:white;z-index:2;position:absolute;top:-4.8vw; margin: 0 auto; font-family: 'monoton', cursive;}
#splash {z-index:1;min-width:100vw;max-height:100vh;background-color:black;}
#resumebutton {border-style: dashed; border-color: white; border-width: .8vw;text-decoration:none;color:black;background-color:orange;height:12vw;width:12vw;position:absolute;top:1.1vw;right:4.8vw;border-radius:6.8vw;text-align:center;display:block;z-index:3;font-size:2.5vw;font-weight:900}
#resumebutton:visited {text-decoration:none;color:black;}
#resumebutton:hover {border-color:white;font-style: italic;border-style: dashed;animation-name:resumeanim;animation-duration: 1s;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-direction:alternate;}
@keyframes resumeanim {
    from {border-radius: 6.8vw}
    to {border-radius: 5vw;background-color: #f54627}
}


#workbutton {border-style: dashed; border-color: white; border-width: .8vw;text-decoration:none;color:black;background-color:#ff6c17;height:12vw;width:21.5vw;position:absolute;top:17.1vw;left:1.6vw;border-radius:6.8vw;text-align:center;display:block;z-index:3;font-size:4vw;font-weight:900}
#workbutton:visited {text-decoration:none;color:black;}
#workbutton:hover {border-color:white;font-style: italic;border-style: dashed;animation-name:workanim;animation-duration: 1s;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-direction:alternate;}
@keyframes workanim {
    from {border-radius: 6.8vw}
    to {border-radius: 5vw;background-color: orange}
}

#aboutbutton {border-style: dashed; border-color: white; border-width: .8vw;text-decoration:none;color:black;background-color:#f54627;height:13.2vw;width:5.5vw;position:absolute;top:33vw;right:4.8vw;border-radius:3.5vw;text-align:center;display:block;z-index:3;font-size:2.3vw;font-weight:900;writing-mode: vertical-rl;letter-spacing:-.85vw;text-orientation: upright;}
#aboutbutton:visited {text-decoration:none;color:black;}
#aboutbutton:hover {border-color:white;font-style: italic;border-style: dashed;animation-name:aboutanim;animation-duration: 1s;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-direction:alternate;}
@keyframes aboutanim {
    from {border-radius: 3.5vw}
    to {border-radius: 2.5vw;background-color: orange}
}
 .marquee #lineone, .marquee #linetwo {   
    display: inline-block;
    white-space: nowrap;
    color: black;
    width: var(--tw);
    opacity:0;
   
    will-change: transform;
    animation: marquee var(--ad) linear infinite;
    animation-play-state: paused;
}
.marquee #linetwo {
    animation: marqueer var(--ad) linear infinite;
    animation-play-state: paused;
}


.marquee:hover #lineone,.marquee:hover #linetwo {
    animation-play-state: running;
    opacity:100;
    text-shadow: var(--tw) 0 currentColor, 
                 calc(var(--tw) * 2) 0 currentColor, 
                 calc(var(--tw) * 3) 0 currentColor,
                 calc(var(--tw) * 4) 0 currentColor;

}



@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
@keyframes marqueer {
    0% { transform: translateX(-150%); }
    100% { transform: translateX(-50%); }
}



@media (prefers-reduced-motion: reduce) {
  .marquee #lineone, .marquee #lineone  {
    
    display: none;
    
  }
}

#xray {z-index:1;filter:invert(1);position:absolute; top:0;margin:0;}
#marqueestrip {z-index:1;min-width:100vw;height:100vh;overflow:hidden;display:block;background-color:pink;position :absolute;top:0;opacity:0;
}

#linea, #lineb, #linec{text-shadow: 4px 0px black; color:white;} 
#cont {height:49vw; overflow:hidden}
#bio{height:100vh;width:100vw;background-color:#f7f4f0;margin-top:0px;overflow:hidden;text-align:center}
#profile{text-align: justify;text-justify: inter-word;font-weight:300;z-index:1;background-color: #00a2ff;height:101vh;width:31vw;position:absolute;left:6vw;animation-name:gradientp;animation-duration: 10s;animation-iteration-count: infinite;animation-direction: alternate;}

#profilephoto {z-index:4;width:28vw;position:absolute;display:block;object:cover;border-radius:50%;left:7.5vw;top:50.5vw}
#circle{width:28vw;height:28vw;border-radius:50%;background-color:#d1287c;right:1vw;position:absolute;animation-name:gradient;animation-duration: 10s;animation-iteration-count: infinite;animation-direction: alternate;}
#circlenorm{width:28vw;height:28vw;border-radius:50%;background-color:#f7f4f0;right:1vw;;position:absolute;}
#circlebox{width:56vw;height:28vw;z-index:3;display:block;background-color:transparent;left:-19.5vw;position:absolute;top:50.5vw;animation-name:nothing;animation-duration: 3s;animation-timing-function: ease-in-out}
#circleboxnorm{width:56vw;height:28vw;z-index:2;display:block;background-color:transparent;left:-19.5vw;position:absolute;top:50.5vw;}
#mailform{position:absolute;right:12vw;top:63vw;width:40vw;padding-top:1vw;caret-color:#3f85fc}

@keyframes circlerotate {
  20% {transform:rotate(180deg)}
  80% {transform:rotate(180deg)}
  100%{transform:rotate(0deg)}
}
@keyframes nothing{}
@keyframes gradient{
    50% {background-color:#d1287c}
    100% {background-color:#ebe234}
}
@keyframes gradientp{
    25% {background-color:#00a2ff}
    75% {background-color:#d1287c}
    100% {background-color:black}
    
}

#contactbar{height:8vw;width:100vw;background-color:black;color:white;position:absolute;top:53vw;padding-left:15vw;padding-bottom:1vw;font-size:6vw;font-family: 'monoton', cursive;}
input[type=text]{width:100%;height:2.5vw;border-radius:2vw;border-style:solid;border-width:.3vw;border-color:black;padding-left:1vw;font-size:1.5vw;font-family: 'Rubik', sans-serif;font-weight:300}
textarea{width:100%;height:5vw;border-radius:1.8vw;resize:none;border-style:solid;border-width:.3vw;border-color:black;padding-left:1vw;font-size:1.5vw;font-family: 'Rubik', sans-serif;font-weight:300;padding-top:.7vw}
textarea::-webkit-scrollbar{width:2vw}
H2{font-size:2vw;font-weight:500;margin-bottom:-1vw;margin-top:.9vw;padding-top:.3vw;color:#f7f4f0}
input:focus, textarea:focus{outline: none;}
input[type=submit]{border-style:solid;border-width:.3vw;border-color:black;background-color:#eb5b34;color:white;border-radius:2vw;height:3vw;width:7vw;font-size:1.5vw;font-family: 'Rubik', sans-serif;font-weight:500;float:right;margin-right:-1.5vw;margin-top:.3vw}
input[type=submit]:hover{background:#f54627;cursor:pointer}
.thinbar{width:90vw; height:.5vw; background-color:black;margin-bottom:.8vw;z-index:0;text-align:right;}

#bara{background-color:black;height:3vw;margin-left:-77.5vw;padding-right:7vw;}
#barb{background-color:black;height:3vw;margin-left:-80vw;padding-right:5vw;}
#barc{background-color:black;height:3vw;margin-left:-79vw;padding-right:7vw;}
#info{color:white;margin-top:31vw;margin-right:3vw;margin-left:3vw;font-size:1.1vw;line-height:1.5vw;}
#infonumber{text-align:center;color:white;font-size:1.3vw;margin-top:2vw}

#resumecontainer{width:60vw; height:76.5vw;margin:0 auto}
#resumepage{background-color:#525659;width:100vw;height:91vw;overflow:hidden;}
#bluebars{background-color:#525659; height:75vw; width:66vw;margin-left:30vw;margin-top:-27vw;padding-top:30vw;}

.resumehead{background-color:black;color:white;writing-mode: vertical-rl;letter-spacing:-4vw;text-orientation: upright; font-family: 'monoton', cursive;font-size:7.5vw;height:101vh;position:fixed;top:0;left:-1vw;margin-top:-.2vw;width:13vw;margin-left:-1vw;padding-right:.4vw;padding-left:.4vw}

#homebutton, #contactbutton, #workbutton2 {border-style: dashed; border-color: white; border-width: .8vw;text-decoration:none;color:black;height:12vw;width:12vw;position:fixed;border-radius:6.8vw;text-align:center;display:block;z-index:3;font-weight:900;left:13.4vw;}
#homebutton:visited,  #contactbutton:visited, #workbutton2:visited {text-decoration:none;color:black;}
#homebutton:hover,#contactbutton:hover,#workbutton2:hover {border-color:white;font-style: italic;border-style: dashed;animation-duration: 1s;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-direction:alternate;}
#homebutton:hover{animation-name:resumeanim}
#contactbutton:hover{animation-name:resumeanim}
#workbutton2:hover{animation-name:contactanim}

#homebutton {background-color:#ff6c17;font-size:2.5vw;top:2vw;}
#workbutton2 {background-color:orange;font-size:2.5vw;top:17.5vw;}
#contactbutton {background-color:#f54627;font-size:2.2vw;top:33vw;}

@keyframes contactanim {
    from {border-radius: 6.8vw}
    to {border-radius: 5vw;background-color: orange}

}

#menubar{position:fixed; left:11.2vw;background-color:black;height:100vh;width:18vw;top:0}
#downloadbutton{text-decoration: none;position:absolute;border-style:solid;border-width:.3vw;border-color:black;background-color:#eb5b34;color:white;border-radius:2vw;height:2vw;width:9vw;font-size:1.5vw;font-family: 'Rubik', sans-serif;font-weight:500;margin-top:1.5vw;left:79vw;padding-top:.2vw;text-align:center}
#downloadbutton:hover{background-color:#f54627;cursor:pointer}
#worktypebox{height:100vh;width:70.8vw;position:absolute;top:0;right:0;font-family: 'monoton', cursive;font-size:5.5vw}
#digitalpanel{height:100vh;width:50%;position:absolute;right:0;top:0;background-image: url("media/kokabeach.jpg");filter: invert(1);padding-left:50%;background-repeat: no-repeat;background-size: 71vw;}
#physicalpanel{height:100vh;width:50%;position:absolute;right:35.4vw;top:0;background-image: url("media/kokabeach.jpg");background-repeat: no-repeat;background-size: 71vw;}


#digitalpaneltext{position:relative;z-index: 1;margin-top:-7.5vw;text-align:center;color:white;width:100%;filter: invert(1);}
#physicalpaneltext{position:relative;z-index: 1;margin-top:-7.5vw;text-align:center;color:black;width:100%;}
#digitalpaneltext:hover{color:black;}
#physicalpaneltext:hover{color:white;}
#digitalpanellabel{position:relative;z-index: 1;background-color:black;width:100%;margin-top:59%;height:7vw;filter: invert(1)}
#physicalpanellabel{position:relative;z-index: 1;background-color:white;width:100%;margin-top:59%;height:7vw}
#worktypelink{text-decoration:none}
#orangebox1,#orangebox2{z-index: 0;height:100vh;width:100%;display:block;position:absolute;right:0;top:0;background-color:#f54627;opacity:0%;animation-name:nothing;animation-duration: .5s;animation-timing-function: ease-in-out;animation-fill-mode: forwards;}

@keyframes orangefadeinanim{
    from {opacity:0%}
    to{opacity:70%}
}
@keyframes orangefadeoutanim{
    from {opacity:70%}
    to{opacity:0%}
}

#gallerybox{width:64.8vw; height:85vw; background-color:#f7f4f0;position:absolute;right:0;top:0;padding-top:2vw; padding-left:30vw;filter:blur(0);animation-name:nothing;animation-duration: .5s;animation-timing-function: ease-in-out;animation-fill-mode: forwards;}
#gallerybox2{width:64.8vw; height:125vw; background-color:#f7f4f0;position:absolute;right:0;top:0;padding-top:2vw; padding-left:30vw;filter:blur(0);animation-name:nothing;animation-duration: .5s;animation-timing-function: ease-in-out;animation-fill-mode: forwards;}

@keyframes bluranim {
    from {filter:blur(0)}
    to {filter:blur(4px)}
}
@keyframes bluranimrev {
    from {filter:blur(4px)}
    to {filter:blur(0)}
}


#photos {
   width:62vw;position:absolute;right:6vw;
   
   line-height: 0;
   
   -webkit-column-count: auto;
   -webkit-column-width:   20vw;
   -webkit-column-gap:   0;
   -moz-column-count:    auto;
   -moz-column-width:   20vw;
   -moz-column-gap:      0;
   column-count:         auto;
   column-width:   20vw;
   column-gap:           0;
}

#photos img {
  
  width: 90% ;
  height: auto;
  padding:1vw;
}




.caption {display:block; position:relative; font-weight:500; background-color:white;padding-bottom:1.5vw;margin:1vw;margin-top:.5vw;font-size:1.1vw;border-radius:.5vw}
.captionword{margin-left:2vw;display: block;}
.savebox{padding-top:1vw;}
.descrip{font-size:.9vw;padding-top:1vw;line-height:1vw;margin-left:2vw;font-weight:300;word-wrap: break-word;display: block;width:80%}

#zoompage{width:70.8vw; height:100vh; position:fixed; top:0; right:0;opacity:0%;background-color:transparent;animation-name:nothing;animation-duration: .5s;animation-timing-function: ease-in-out;animation-fill-mode: forwards;display:none}
#bigimage{display:block;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);position:absolute}
#photos div:hover {transform:scale(1.05);transition: all 0.3s ease-in-out; cursor:pointer; }
#bigimage:hover{cursor:pointer;}
@keyframes imagefadezoom {
    from {opacity: 0; transform:scale(.1)}
    to {opacity: 100%; transform:scale(1)}
    
}
@keyframes imagefadezoomrev {
    from {opacity: 100%; transform:scale(1)}
    to {opacity: 0; transform:scale(.1)}
}
#separator{display:none;}
.copyright{margin: 0 auto; font-weight:300;position:absolute; font-size:1vw;display:block}
#smallindexmenu{display:none;}
.copyrightmob {display:none;}
#mailthank{margin:0 auto;position:absolute;top:40vw; font-weight:900;font-size:10vw;width:80vw;display:none}
@media only screen and (max-width:500px) {
    #splash {display: none;}
    .marquee {display:none;}
    .splashnamebox {display:none;}
    #resumebutton,#workbutton, #aboutbutton{display:none;}
    #smallindexmenu{display:block;}
    .resumehead{width:100vw!important;writing-mode: horizontal-tb;letter-spacing:0vw;height:11vw;top:0 ;left:0;margin: 0 auto !important;padding-top:.3vw !important;display:block!important;font-size:7vw!important;z-index:3;}
    .fullsize{height:100vh;width:100vw;text-align:center!important;}
    #menubar{width:100vw; height:18vw;left:0;top:11vw;z-index:3;}
    #homebutton{top:13vw;left:16vw;z-index:4}
    #workbutton2{top:13vw;left:43vw;z-index:4}
    #contactbutton{top:13vw; left:70vw;z-index:4}
    #contactbutton:hover,#workbutton2:hover,#homebutton:hover{animation-name:nothing;}
    #contactbar{margin:0 auto ; text-align:center; top:169vw;padding-left:0;font-size:10vw;height:14vw}
    #profile{margin:0 auto; width:80vw;z-index:0;left:10vw;top:31vw;padding-top:48vw;height:90vw;z-index:0}
    #separator{height:2vw; width:100vw;position:fixed;top:29vw;background-color:orange;display:block;z-index:4}
    #profilephoto{width:70vw; left:15vw;top:36vw;z-index:2}
    #circle{height:70vw;width:70vw;z-index:1}
    #circlebox{height:70vw;width:140vw;top:36vw;left:-54vw;z-index:1}
    #circlenorm{height:70vw;width:70vw;z-index:1}
    #circleboxnorm{height:70vw;width:140vw;top:36vw;left:-54vw;z-index:1}
    #info{font-size:3.5vw;line-height:3.5vw;margin-left:5vw;margin-right:5vw;padding-top:2vw}
    #infonumber{font-size:3.5vw;padding-top:10vw}
    #mailform{top:190vw;width:70vw;left:15vw}
    #bara{height:5.5vw;margin-left:-66vw}
    #barb,#barc{height:5.5vw;margin-left:-71vw}
    #barc{height:5.5vw;margin-left:-69vw}
    h2{font-size:4vw;}
    input[type=text]{height:4vw;margin-top:1.5vw;margin-bottom:1.5vw;border-radius:3vw; font-size:2.5vw;border-width:.6vw;z-index:5}
    textarea{height:10vw;font-size:2.5vw;margin-top:1.5vw;margin-bottom:1.5vw;border-width:.6vw;border-radius:2.5vw}
    input[type=submit]{font-size:3vw; height:5.7vw;width:15vw;margin-bottom:10vw;border-width:.6vw;border-radius:3vw;background-image: none;}
    .copyright{display:none;}
    .copyrightmob{top:257vw; left:33vw; z-index:5;font-weight:300;position:absolute; font-size:2vw;display:block}
   #bluebars{width:100vw;margin-left:0;margin-top:5vw;padding-bottom:0vw}
   #resumecontainer{width:90vw;height:115vw;background-color:white}
   #resumepage{height:165.5vw;}
   #downloadbutton{width:18vw;height:4vw;font-size:3vw;border-width:.6vw;border-radius:2.5vw;left:72vw;top:151vw}
   #digitalpanel {width:100%;left:0;background-size:100vw;top:calc(29vw + 35vh);height:35vh;padding-left:0}
   #physicalpanel {width:100%;left:0;background-size:100vw;top:29vw;height:35vh}
   #worktypebox {width:100vw;height:70vh}
   #orangebox1,#orangebox2{display:none;}
   #physicalpanellabel{width:100vw;;margin-top:30%;height:10vw}
   #digitalpanellabel{width:100vw;margin-top:30%;height:10vw}
   #physicalpaneltext,#digitalpaneltext{font-size:7vw;margin-top:-10vw}
   #photos {
   width:80vw;position:absolute;margin-right:3.5vw;
   
   line-height: 0;
   
   -webkit-column-count: 1;
   -webkit-column-width:   90vw;
   -webkit-column-gap:   0;
   -moz-column-count:    1;
   -moz-column-width:   90vw;
   -moz-column-gap:      0;
   column-count:         1;
   column-width:   90vw;
   column-gap:           0;
}
#gallerybox,#gallerybox2{width:100vw;padding-left:0;top:29vw;}
#gallerybox{height:800vw;}
#gallerybox2{height:1100vw;}
.form-input input[type="text"], .form-input-wide input[type="text"]{width:100%}
.caption{padding-top:4.5vw;padding-left:4.5vw;font-size:3vw;margin:3vw;padding-bottom:5vw;border-radius:5vw}
.captionword{margin-top:3vw}
.descrip{font-size:2vw;padding-top:2vw;line-height:2vw}
.savebox{margin-top:1vw!important;margin-bottom:1vw!important}
#zoompage{width:100vw;height:70vh;top:35vw;}
#photos img{}
#mobback{margin-top:30%!important;}
}