@font-face {
  font-family: 'Avara';
  src: url(../font/Avara-Bold.eot);
  src: url(../font/Avara-Bold.woff2) format("woff2"),
      url(../font/Avara-Bold.woff) format("woff"),
      url(../font/SAvara-Bold.ttf) format("ttf");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: 'Avara Italic';
  src: url(../font/Avara-BoldItalic.eot);
  src: url(../font/Avara-BoldItalic.woff2) format("woff2"),
      url(../font/Avara-BoldItalic.woff) format("woff"),
      url(../font/Avara-BoldItalic.ttf) format("ttf");
  font-style: normal;
  font-weight: normal;
}


:root {
  --content-width: 100%;
  position: relative;
}

html {
margin: 0 auto;
overflow-x: hidden !important;
overflow-x: -moz-scrollbars-none;
color: black;
background-color: white;
  -webkit-user-select: none; 
  -moz-user-select: none;    
  -ms-user-select: none;   
  user-select: none;  
scroll-behavior: smooth;
white-space: normal;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;   
-webkit-transition: background-color 1.2s ease-in;
-o-transition: background-color 1.2s ease-in;
-webkit-transition: background-color 1.2s ease-in;
transition: background-color 1.2s ease-in;  
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html::-webkit-scrollbar  {
  display: none;
}
input::-moz-focus-inner { 
  border: 0; 
}
*, *::before, *::after {
  margin: 0;
  padding: 0;
  border: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  list-style: none;
  outline: none;
}
*:focus {
    outline: none;
}

figure, footer, header, main, section, img {
display: block;
}

main {
position: relative;
-webkit-animation: fadein .5s;
        animation: fadein .5s;
}

footer{
position: fixed;
bottom: 0;
left:0;
z-index: 10;
}

h1, h2, p, b, a, figure, figcaption {
font-size: inherit;
line-height: inherit;
cursor: default;
letter-spacing: .01rem;
word-spacing: -.05rem;
}

p {
  font-family: Avara Italic;
  font-size: 1.2rem;
  line-height: 122%;
  text-decoration: none;
  font-weight: normal;
  pointer-events: auto;
}

h1 {
  font-family: Avara Italic;
  font-size: 1.2rem;
  line-height: 122%;
  text-decoration: none;
  font-weight: normal;
   pointer-events: auto;
}

h3 {
  font-family: Avara Italic;
  font-size: .8rem;
  line-height: 122%;
  text-decoration: none;
  font-weight: normal;
   pointer-events: auto;
   letter-spacing: .015rem;
}

a, .image-opener, .about-opener {
cursor: pointer;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
color: currentColor;
text-decoration: none;
font-family: Avara Italic;
}

main p, main h1 {
margin-bottom: calc(1.2rem * 1.22);
}


a:visited, a:active, a:focus { 
text-decoration: none;
outline: 0;
}

a:hover, summary:hover, .image-opener:hover, .image-opener.active, .about-opener:hover, .about-opener.active{ 
color: black;
filter: blur(2px);
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}

::-moz-selection {
color: blue;
}

::selection, ::-moz-selection {
color: blue;
}


.image-container {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: flex-start;
  overflow-x: auto;
  width: 100%;
  -ms-overflow-style: none;
  scrollbar-width: none;  
  transition: opacity 0.5s;
  z-index: 1;
}

.image-container::-webkit-scrollbar {
  display: none; 
}

#project {
z-index: 9999;
}

#about{
  pointer-events: none;
}

.hidden {
  opacity: 0;
  -webkit-transition: opacity .5s;
  -o-transition: opacity .5s;
  transition: opacity .5s;
  pointer-events: none;
}




.image-container figure {
  flex: 0 0 auto;
  margin: 0;  
  padding: 0;
}


figure img {
height: 33.333vh;
object-fit: auto;
}

#about figure img{
height: 50vh;
}



.overview-text-container h1, .overview-text-container p {
padding-left: 8px;
padding-right: 8px;
}
.overview-content {
width: 100vw;
padding-top: 8px;
}

.project-text-container, .project-image-container figure, .project-header-container, .overview-text-container {
width: 100%;
padding-bottom: 22px;
}
.footer-content {
padding: 8px;
}
@media screen and (min-width: 55rem) {

.image-container figure img {
height: 55vh;
}

#about figure img{
height: 66.666vh;
}


img[data-src] {
opacity: 0;
-webkit-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
}
img {
opacity: 1;
-webkit-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
vertical-align: top; 
border: 0px;
}



.overview-content {
padding-top: 12px;
}

.overview-text-container h1, .overview-text-container p {
padding-left: 18px;
padding-right: 18px;
}

.overview-content {
padding-top: 12px;
}


.footer-content {
padding-left: 18px;
padding-right: 18px;
padding-bottom: 12px;
}
}






@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}