@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,700&family=Cairo:wght@300&family=Concert+One&family=Overlock:ital,wght@1,700&display=swap');

::selection {
  color: #00FF7F;
}

:root {
  --color-background: black;
  --color-text: #F0F8FF;
  --color-text-link: #778899;
  --color-text-link-hover: #00FF7F;
  --font-family: 'Cairo', 'Concert One', sans-serif;
  --font-size: 17px;
  --margin: 1rem;
}

html {
  font: var(--font-size) var(--font-family);
  color: var(--color-text);
  background-color: var(--color-background);
}

     body {
       background-repeat: no-repeat;
       background-attachment: fixed;
       margin: 0px;
       margin-bottom: 5%;
       box-sizing: border-box;
       float: left;
       overflow-x: hidden;
       width: 100%;
       height: 100%;
       max-width: 100%;
       position:relative;
       background-color: var(--color-background);
       font: var(--font-size) var(--font-family);
       color: var(--color-text);
     }

     a {
     text-decoration: none;
     list-style-type: none;
     cursor:pointer;
     color: var(--color-text-link);
     font: var(--font-size);
     font-family: 'Concert One';
     font-weight: lighter;
     }

     a:hover {
      color: var(--color-text-link-hover);
      }

     #top {
       position:fixed;
       padding: 8px;
       font-size: 1.5rem;
       float: left;
       width: 100%;
       height:1.8vw;
       text-decoration: none;
       cursor:pointer;
       z-index: 9999;
     }
     #top a.Studioheyyo {
       left: 1.5rem;
       position:fixed;
       color: var(--color-text);
       z-index: 9999;
     }
     #top a.mail {
       left: 11rem;
       position:fixed;
       z-index: 9999;
     }
     #top a.home-link {
       right: 1.5rem;
       position:fixed;
       z-index: 9999;
     }
     #top .background{
       position:relative;
       width: 120%;
       top:-2.3rem;
       left:-2rem;
       height:4rem;
       background-color: black;
       filter: blur(1.2rem);
     }

     input {
       -webkit-appearance: none;
       -moz-appearance: none;
       appearance: none;
     }

      .menu {
        height: auto;
        margin-left:0px;
        margin-right:0px;
        width: 100%;
        float: left;
        display:flex;
        flex-wrap: wrap;
        justify-content:center;
        align-items: left;
        padding-top: 40px;
        transition: opacity 0.5s;
      }
      .menu img{
        height: auto;
        width: 100%;
        float: left;
      }
      .menu a.item {
        align-items: center;
        padding: 8px;
        display: inline-block;
        width: calc(55vw/1.77);
        height: auto;
        min-height: 12vw;
        text-decoration: none;
        list-style-type: none;
      }
      .menu#blur2.active {
        filter: blur(80px);
        pointer-events: none;
        user-select: none;
      }

.close {
top: 60px;
left: 77%;
position: -webkit-sticky;
position:sticky;
align-self: flex-end;
width: 3%;
text-align: right;
padding-right: 1.1%;
z-index: 99999;
}
.close a{
  font-size: 3rem;
  z-index: 99999;
}

.description {
top: -3rem;
width: 80%;
align-items:center;
position: relative;
line-height: 1.6rem;
left: 10%;
color: var(--color-text);
z-index: 99998;
}
.description a{
  font-size: 1.1rem;
}
.description #title01{
  font-family: 'Concert One';
  font-weight: lighter;
  font-size: 2rem;
  line-height: 2rem;
  color: var(--color-text);
}
.description #title01 span{
  font-size: 1.6rem;
  line-height: 1.2rem;
  color: var(--color-text-link);
}
.description2 {
  top: -1.2rem;
  position: relative;
}

.work {
  float: left;
  width: 80%;
  height: auto;
  top: 5px;
  left: 10%;
  align-self:center;
  position: relative;
  padding-top: 2%;
}
.work img{
  padding-bottom: 5%;
  margin-left: 10%;
  align-self:center;
  width: 80%;
  height: auto;
  vertical-align: middle;
}
.work iframe{
  padding-bottom: 5%;
  margin-left: 10%;
  align-self:center;
  width: 80%;
  height: calc(80vw/1.77);
}

#Curtain,#Dubliners,#Dimension,#Body,#Mixingbowl,#Orange,#Expansion,#Value,#Dollshouse,#List,#Unmapping,#Dinner,#Meme,#Mailart,#Pieces,#Stranger,#Otherminds,#Hagebos,#Madang,#Livecoding,#Fititall,#Insideoutside,#Decent,#Celebrating{
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: 0.5s;
overflow-y: scroll;
z-index: 9998;
}

#Curtain.show,#Dubliners.show,#Dimension.show,#Body.show,#Mixingbowl.show,#Orange.show,#Expansion.show,#Value.show,#Dollshouse.show,#List.show,#Unmapping.show,#Dinner.show,#Meme.show,#Mailart.show,#Pieces.show,#Stranger.show,#Otherminds.show,#Hagebos.show,#Madang.show {
visibility: visible;
position: fixed;
opacity: 1;
transition: 0.5s;
z-index: 9998;
}
#Livecoding.show,#Fititall.show,#Insideoutside.show,#Decent.show,#Celebrating.show{
top: 0%;
visibility: visible;
position: fixed;
opacity: 1;
transition: 0.5s;
z-index: 9998;
}

#Studioheyyo{
  position:fixed;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  transition: 0.5s;
  overflow-y: scroll;
  z-index: 9998;
  background-color: black;
  /* backdrop-filter: blur(70px); */
}
#Studioheyyo.show{
  top: 0%;
  visibility: visible;
  position: fixed;
  opacity: 1;
  transition: 0.5s;
  z-index: 9998;
}
/* #Studioheyyo .background2{
  position:absolute;
  width: 100%;
  top:-4%;
  height:104%;
  background-color: black;
  filter: blur(70px);
  background: linear-gradient(0deg, rgba(204,225,247,1) 0%, rgba(15,26,37,1) 75%);
  background-image: linear-gradient(90deg, black 25%, #778899 50%, black 25%);
} */



@media (max-width: 1024px) {

  :root{ --font-size: 2.45vw; } html, body {font: var(--font-size) var(--font-family);}

  .menu{
    /* overflow-y: hidden; */
    padding-top: 70px;
  }
  .menu a.item {
    width: 100%;
  }
  /* .menu#blur2.active {
    backdrop-filter: black(90%);
    filter: blur(10px);
    filter: blur(2px) sepia(50%);
    background-color: black;
  } */

  .close {
  top: 4.5rem;
  left: 93%;
  }

  .work {
    float:left;
    width: 98%;
    height: auto;
    left: 0%;
    padding-top: 5%;
  }
  .work img{
    padding-bottom: 7%;
    margin-left: 2vw;
    width: 98%;
    height: auto;
  }
  .work iframe{
      padding-bottom: 7%;
      margin-left: 2vw;
      margin-right: 2vw;
      width: 96vw;
      height: calc(96vw/1.77);
      vertical-align: middle;
  }

  .description {
    left:1.5rem;
    right:1.5rem;
    width: 97%;
    }
    .description a {
      font-size: 1.3rem;
    }

  #top {
    position:fixed;
    font-size: 4.5vw;
  }
  #top a.mail {
    left: 30%;
  }

  #Studioheyyo .description{
    left:1.5rem;
    right:1.5rem;
  }
  #Studioheyyo{
    background-color: black;
  }
}