*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
  overflow:visible;
}
html,body,main{width:100%;}
body {
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  width:100%;
}
section{
  display:inline-block;
  vertical-align:top;
  max-width:600px;
  overflow-y:scroll;
  
}

::-webkit-scrollbar {
    width: 0; 
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #FF0000;
}
img, picture, video, canvas {
  display: block;
  max-width: 100%;
}
figure{
  vertical-align:top;
}
input, button, textarea, select {
  font: inherit;
}
a, p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  font-weight:400;
  font-size:14px;
  vertical-align:top;
}
img{
  width:600px;
}
#root, #__next {
  isolation: isolate;
}
.projects-bar{height:99.99%;}
#bar{margin-top:5px;overflow-x:hidden;width:99.99%;max-width:99.99%;background:white;padding-bottom:5px;}
#home-page-cover{position:fixed;bottom:0px;z-index:-999;width:calc(100vw - 10px);}
#home-page-cover img{object-fit:cover;height:calc(100vh - 66px);width:calc(100vw - 5px);}
#home-page-cover video{object-fit:cover!important;height:calc(100vh - 66px);width:calc(100vw - 5px);}
#sticky{overflow-x:hidden;position:sticky;top:5px;z-index:999;background:transparent;}
#glass{-webkit-user-select: none;-ms-user-select:none;user-select: none;-webkit-backdrop-filter:brightness(250%)blur(2px);width:100%;height:200px;backdrop-filter:brightness(250%)blur(2px);width:100%;height:150px; -webkit-mask-image: linear-gradient(to top, transparent 0%, black 100%);mask-image: linear-gradient(to top, transparent 0%, black 100%);-ms-mask-image: linear-gradient(to top, transparent 0%, black 100%);position:fixed;top:0;}
#project-title-container{width:100px;display:inline-block;}
#box{display:none;}
#project-list{position:sticky;top:7.5px;z-index:999;overflow:visible;vertical-align: top;}
#preview{-webkit-user-select: none;-ms-user-select:none;user-select: none;display:none;position:absolute;top:20px;left:0;z-index:999;}
#item {position:relative;overflow:visible;}
#item:hover #preview{display:block;}
#preview img {width:300px;max-width:none;outline:1px solid #5B7FF7;z-index:999;}
main.body-text{z-index:999;}
body{font-family:"IBM Plex Sans", sans-serif;font-weight:400;padding:5px 5px 5px 5px;;}
nav,ul,header,main{display:inline-block;max-width:100%;}
ul,li,main{vertical-align:top;}
a{height:1.25em;}
p{margin-bottom:15px;max-width:calc600px;text-align:justify;}
time{margin-bottom:21px;}
a{color:black;text-decoration:none;}
a:hover {color:#5B7FF7;}
ul{padding-inline-start:0;list-style-type:none;}
ul,figure{margin:0;}
figure>img{margin-bottom:5px;}
.pad{padding-inline-end:5px;}
.bot{margin-bottom:21px;}
.gap{padding: 5px 5px 5px 5px;}
.body-text{max-width:500px;}
.site-title{white-space:nowrap;overflow:hidden;position:relative;max-width:100%;}
.logo{height:32px;}
.projects{display:flex;flex-direction:column;align-content:flex-start;flex-wrap:wrap;max-height:100px;column-gap:5px;}
.project{display:block;}
.project-text{}
.project-gallery{}
.project-gallery-image{max-width:600px;width:600px;}
.list-line{white-space:nowrap;overflow:visible;display:block;position:relative;top:-2.75px;}
.list-project{display:inline-block;}
/*.list-ellipsis{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:bottom;}*/
.list-year{display:inline;}
.list-scroll{display:inline-block;overflow-x:visible;}

@media only screen and (max-width: 1000px) {
  
  #box{display:block;}
  section{
      overflow-y:visible;
      display:block;
      height:auto;
  }
  
  #home-page-cover img{height:calc(100vh - 95px);}
  
  #project-list{position:relative;}
  .list-ellipsis{max-width:250px;}
  .list-scroll{overflow:hidden;display:block;}
  .projects{max-height:none;}
ul,main{display:block;}
}
  .mask {
    -webkit-mask-image: url($mask);
    mask-image: url($mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
}