/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image:url("/assets/squares-bg@0.5x.png");
  background-repeat: repeat;
  background-color:#bbbbbb;
  color: #0000ff;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
  scrollbar-color: #d3d3d3 #f3f3f3;
  scrollbar-width: thin;
  text-decoration: none;
}
h1{
  font-family: "Bitcount Grid Single", system-ui;
  font-weight: 300;
  font-style: normal;
  font-size: 3rem;
  line-height:2.5rem;
}

h2{
  font-family: "Bitcount Prop Single", system-ui;
  font-weight: 600;
  font-style: normal;
  font-size: 1.5rem;
  text-decoration: none;
}

p, ul{
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  padding-left:0;
}
h3, li, a{
  font-family: "DM Mono", monospace;
  font-weight: 400;
  font-style: normal;
  }
.special{
  font-family: "Bitcount Grid Single", system-ui;
  font-weight: 300;
  font-style: normal;
  font-size: 3rem;
  margin-top:1rem;
  border-bottom:2px dotted #c3c3c3;
  }
.navlink{
  font-family: "Bitcount Prop Single", system-ui;
  font-weight: 600;
  font-style: normal;
  font-size: 1.5rem;
  }

.contact-flex{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  width:100%;
    margin-top:3rem;
  }
.formspree-embed{
  display:flex;
  flex-direction:column;
  padding:3rem;
  }
  
.formspree-embed label{
  display:flex;
  flex-direction:column;
  padding:1rem;
  }
.formspree-embed button{
  display:flex;
  flex-direction:column;
  margin:1rem;
  }
  
#contact-form{
  height:40vh;
  width:50%;
  margin:1rem;
  }
#contact-intro{
  height:40vh;
  width:45%;
  margin:1rem;
  }
summary{
  display:flex;
  flex-direction:row;
  padding:0;
  }

summary::marker {
  font-size:0;
}
 
summary::before {
  content: "🗀";
  margin-right: 0.5rem;
  margin:.5rem .5rem 0 0;
  color: black;
}

details, .work-all{
  padding:.5rem;
    border: 1px solid #d3d3d3;
  
  }
 details[open] summary::before {
  content: "🗁";
}

ul.work-list{
  margin:0 .5rem .5rem .2rem;
  list-style-type: none;
  line-height:2rem;

  }
li{
border-image-slice: 61;
border-image-width: 20px;
border-image-outset: 10px 12px 10px 12px;
border-image-repeat: repeat repeat;
border-image-source: url("/assets/box-c@2x.png");
border-style: solid;
background-color:white;
  }


.work-title{
  margin-top:0.5rem;
  margin-bottom:0.5rem;
  }
@keyframes scroll {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}
.marquee{
  width:100%;
  overflow: hidden;
  white-space: nowrap;
  background-color:rgba(172, 172, 172, 0.05);
  backdrop-filter: blur(5px);
  margin-top:5px;
 border-image-slice: 111 190 100 190;
border-image-width: 1.5rem 2.4rem 1.4rem 2.4rem;
border-image-outset: .2rem;
border-image-repeat: stretch stretch;
border-image-source: url("/assets/marquee_border@2x.png");
border-style: solid; 
  }
  
.marquee-text, .blinkies-foot{
  animation: scroll 45s linear infinite;
  }

.blinkies-foot:hover {
  animation-play-state: paused;
}
.blog-home{
  width:100%;
  height:30vh;
  overflow:scroll;
  }

.container{
display:flex;
flex-direction:column;
  align-items: center;
  justify-content: center;
  width:80%;
  background-color:rgba(255, 255, 255, 0.5);
  }
  
.work-container, .blog-container{
display:flex;
flex-direction:row;
  align-items: top;
  justify-content: center;
  width:100%;
border: 1px solid #d3d3d3;
background-color:#e3e3e3;
filter: drop-shadow(0 0 0.25rem #c3c3c3);
overflow:hidden
  }
  
.work-nav{
  display:flex;
  flex-direction:column;
  width:20%;
  height:72vh;
  overflow:scroll;
  border-image-slice: 75 114 72 117;
border-image-width: 2rem 3rem 2rem 3.3rem;
border-image-outset: .2rem .3rem .5rem .3rem;
border-image-repeat: repeat repeat;
border-image-source: url("/assets/box-d@2x.png");
border-style: solid;
  
  }  
.blog-link{
  margin:1rem;
  padding:0;
border-image-slice: 61;
border-image-width: 20px;
border-image-outset: 10px 12px 10px 12px;
border-image-repeat: repeat repeat;
border-image-source: url("/assets/box-c@2x.png");
border-style: solid;
background-color:white;
  }
.blog-link h2{
  padding:0 0 0 .25rem;
  margin:0;
  
  
  }
.page-blinkies{
  display:inline;
  justify-content:center;
  align-items:center;
  background-color:white;
  margin-top: 1vh;
  border:1px solid #d3d3d3;
  border-radius:5px;
  width:100%;
  overflow:hidden;
  }

.about-blinkies{
  margin-top:2rem;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  width:100%;
  justify-content:center;
  align-items:center;
  
  }
.about-blinkies img{
  padding:.25rem;
  }
.blinkies-foot{
  display:block;
  }
  
.blinkies-foot img{
  margin:10px;
  }
  
.footer{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  background-image: url("/assets/dash-khatami-A8nElHnbt1k-unsplash.jpg"); 
  margin-top: 1vh;
  border: 1px solid #0000ff;
  border-radius:5px;
  width:100%;
  backdrop-filter: blur(10px);
  
  overflow:hidden;
  
  }  
  
.soc-link{
  max-height:3vh;
  }
.footer-bg{
  height:100%;

  }

.deco-01{
  background-image:url("/assets/dash-khatami-A8nElHnbt1k-unsplash.jpg"); 
  }
.deco-02{
  background-color:#d5d5d5;
  background-image:url("/assets/pattern-cook.png"); 
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size:30rem;
  
  z-index:2;
  }
#clock{
  background-color:rgba(255, 255, 255, 0.1);
  }
.projects{
  display:block;
  margin-right:0;
  margin-left:0;
  width:80%;
  height:72vh;
  border:1px solid #d3d3d3;
  overflow:scroll;
  }

.projects-home{
  width:100%;
    height:50vh;
  border:1px solid #0000ff;
  overflow:scroll;
  }

.nav-wrapper{
  display:flex;
  flex-direction:column;
  width:100%;
  align-items:center;
  border: 1px solid #0000ff;
  background-image: url("/assets/dash-khatami-A8nElHnbt1k-unsplash.jpg");
  border-radius:5px;
  box-shadow:0 0 10px #d3d3d3;
  }
  
.header-nav{
  display:grid;
  width:90%;
  grid-template-columns:1fr 1fr 4fr 1fr 1fr;
  gap:5%; 
  grid-template-areas:
  "box01 box02 box03 box04 box05";
  justify-content:center;
  justify-items:center;
  align-content:center;
  align-items:center;
  align-self:center;

  }
  
.grid-01{
  background-color: #f1f1f1;
  width:100%;
  margin-top:10px;
  display:grid; 
  grid-template-columns:1fr 2fr 1fr;
  grid-template-rows:auto;
  gap:15px; 
  grid-template-areas:
  "box01 box02 box03"
  "box01 box02 box03"
  "box05 box02 box04";
  justify-content:center;
  justify-items:center;
  align-content:center;
  align-items:center;
  border-radius:5px;
  
  }
  
.grid-02{
  background-color: #f1f1f1;
  width:100%;
  margin-top:1rem;
  display:grid; 
  grid-template-columns:2fr 2fr 1fr;
  grid-template-rows:auto;
  gap:15px; 
  grid-template-areas:
  "box01 box04 box05"
  "box01 box02 box03"
  "box01 box02 box03";
  justify-content:center;
  justify-items:center;
  align-content:center;
  align-items:center;
  }
 
 .grid-03{
  background-color: #f1f1f1;
  width:100%;
  margin-top:10px;
  display:grid; 
  grid-template-columns:1fr 2fr 1fr;
  grid-template-rows:auto;
  gap:15px; 
  grid-template-areas:
  "box01 box02 box03"
  "box04 box02 box03";
  justify-content:center;
  justify-items:center;
  align-content:center;
  align-items:center;
  } 

 .grid-04{
  background-color: #f1f1f1;
  width:100%;
  margin-top:10px;
  display:grid; 
  grid-template-columns:1fr 2fr 1fr;
  grid-template-rows:auto;
  gap:15px; 
  grid-template-areas:
  "box01 box02 box03";
  justify-content:center;
  justify-items:center;
  align-content:center;
  align-items:center;
  } 
.portfolio-item{
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin: 2rem;
  margin-bottom: 2rem;
  margin-bottom: 8rem;
  height: 20rem;
  width: 20rem;
  }
.stella-embed{
  margin:2%;
  
  }

.navbox{
text-align:center;
padding: 0 10px 0 10px;
border-image-slice: 61;
border-image-width: 20px;
border-image-outset: 10px 12px 10px 12px;
border-image-repeat: repeat repeat;
border-image-source: url("/assets/box-c@2x.png");
border-style: solid;
background-color: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(10px);
}

#logo{
text-align:center;
padding: 0;
border:none;
background: none;
backdrop-filter: none;
margin:-1rem -12rem 0 -10rem;
height:20vh;
  }
  
#logo img{
  max-width:60vh;

  
  }
.feature-img{
  width:100%;
  height:40vh;
  object-fit: cover;
  }
  
.pfolio-project{
  display:flex;
  flex-direction:column;
  width:100%;
  align-items:center;
  text-align:center;
  
  }  
  
.pfolio-project-80{
  display:flex;
  flex-direction:column;
  width:80%;
  align-items:center;
  text-align:center;
  
  }  
.work-desc{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  text-align:center;
  width:80%;
  margin-left:10%;
  margin-right:10%;
  }
.work-2col{
  display:flex;
  flex-direction:row;
  justify-content:center;
  width:80%;
  }

.work-2col img{
  width:100%;
  height:100%;
  }
  
.box-a{
  width:100%;
  height:100%; 
border-image-slice: 75 114 72 117;
border-image-width: 2rem 3rem 2rem 3.5rem;
border-image-outset: .45rem .45rem .4rem .455rem;
border-image-source: url("/assets/box-a@2x.png");
border-style: solid;
filter: drop-shadow(0 0 0.25rem #c3c3c3);
overflow:hidden;
border-radius: 0 1.23rem 0 1.23rem;
corner-shape:bevel;
   }
   
   
.box-b{
  width:100%;
  height:100%; 
border-image-slice: 75 114 72 117;
border-image-width: 2rem 3rem 2rem 3.3rem;
border-image-outset: .5rem;
border-image-repeat: stretch stretch;
border-image-source: url("/assets/box-b@2x.png");
border-style: solid;
background-color:#e6e6e6;
filter: drop-shadow(0 0 0.25rem #c3c3c3);
border-radius: 1.23rem 0 1.23rem 0;
corner-shape:bevel;
   }
   
.box-d{
  width:100%;
  height:100%; 
border-image-slice: 75 114 72 117;
border-image-width: 2rem 3rem 2rem 3.3rem;
border-image-outset: .2rem .3rem .5rem .5rem;
border-image-repeat: repeat repeat;
border-image-source: url("/assets/box-d@2x.png");
border-style: solid;
backdrop-filter: blur(10px);
   }
   

.box-a, .box-b h2{
  border-bottom:2px dotted #c3c3c3;
  }  
  
.box-content{
  padding:5px 10px 0 15px;
  }
  
.box-white{
  background-color: white;
  border-radius:5px;
  width:100%;
  height:100%;
  filter: drop-shadow(0 0 0.25rem #c3c3c3);
  border:1px solid #d3d3d3;
  }
.tenor-gif-embed{
  padding-top:20px;
  }
  
.page-title{
  width:100%;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  text-align:center;
  margin-top: 1vh;
  overflow:hidden; 
  text-decoration: none;
  
  }
.page-title h2{
  margin:0;
  border:none;
  text-decoration: none;
  } 
.work-thumb{
  height:20vh;
  background: url(/assets/Projects_thumb.jpg);
  margin:1rem -1rem 1.4rem -1rem;
  }

#welcome{
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  min-height:20vh;
  }   
#welcome p{
  margin:0;
  }
#work-thumb-tile {
  background:none;
  transition: 
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

#work-thumb-tile:hover, #work-thumb-tile:focus-visible {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
}
  
#inspo-buttons{
  display:flex;
  flex-direction:row;
    flex-wrap: wrap;
  }
 #inspo-buttons img{
    margin:.3rem;
    }

@media screen and (max-width: 1730px) {    
#about{
    min-height:15vh;
  }
}
@media screen and (max-width: 1280px) {
  
  .work-container{
    flex-direction:column;
    width:100%;
    padding:0;
    }
  .work-nav{
    display:none;
    }
  .projects{
    width:100%;
    }
    
  .grid-01{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
"box02 box02" 
"box01 box03" 
"box04 box05";
    }
  .grid-02{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
"box01 box01" 
"box01 box01" 
"box04 box05"
"box02 box03";
    }
    
  .header-nav{
  grid-template-columns:1fr 1fr 1fr 1fr;
  gap:5%; 
  grid-template-areas:
  "box03 box03 box03 box03"
  "box01 box02 box04 box05";
  padding-bottom:2rem;
}

  .grid-03{
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
"box01 box02 box02" 
"box04 box03 box03";
    }

#mainframe{
  margin-bottom:2%;
  }
  
#logo{
  width:60vh;
  margin-bottom:0;
  }
}

@media screen and (max-width: 800px) {
  .grid-01, .grid-02, .grid-03, .grid-04{
display:flex;
flex-direction:column;
    }

.special, h1{
  font-size:2rem;
  }

.header-nav{
  grid-template-columns:1fr 1fr;
  gap:5%; 
  grid-template-areas:
  "box03 box03"
  "box01 box02";
  }
  
#about{
  padding-bottom:2rem;

  }
  
#mainframe{
  margin-bottom:7%;
  }  

#blog-button {
  display:none;
  width:0;
  }
#contact-button {
  display:none;
  width:0;
  }
#welcome{
  min-height:22vh;
  }
.contact-flex{
  flex-direction:column;
  }

 #contact-intro{
   height:20vh;
   margin-bottom:1rem;
   }
#contact-form, #contact-intro{
  width:100%;
  }
.footer{
  flex-direction:column;
  padding:1rem 0 1rem 0;
  }
.footer-bg{
  display:none;
  }
}