::selection{color:black;background:yellow;}
*{box-sizing:border-box;}
html{background:black;color:white;}
body{margin:0;  font-family: "Roboto Mono", monospace; font-optical-sizing: auto; font-weight: 300; font-style: normal;font-size:16px;background:black;color:white;overflow-x:hidden!important;}

/*
#bio-wrap{font-family:'Roboto Mono';background:black;color:white;display:flex;align-items:center;justify-content: center;width:100%;height:100dvh;overflow:hidden!important;flex-wrap:wrap;margin:0;cursor:crosshair;overflow-y:hidden!important;}
#bio-card{margin:0 auto 0 auto;display:flex;background:url(/logo.svg) no-repeat;background-size:50%;background-position:center;border:1px solid white;width:550px;height:350px;padding:15px;display:flex;flex-wrap:wrap;justify-content:space-between;font-size:16px;}
#bio-card div{display:flex;width:100%;height:15px;justify-content:space-between;}
#bio-card div:nth-of-type(2){align-self:flex-end;}
#bio-wrap img{z-index:1;}
*/

#contact {color: white; background: black; width: 100%; display: flex; flex-direction: row; justify-content: space-between;}
#contact span{width: 25%;padding: 15px;}
#card-logo {
  display: block;
  background: black;
  width: 25%;
  display: block;
  aspect-ratio: 4/3;
  background: url(/logo.svg) no-repeat;
  background-size:100%;
  background-position:center;
}

p{margin:0;}
a{color:white;}

#main{border-collapse:collapse;width:calc(100% - 1px);z-index:1;z-index:2;position:relative;}
#main:after{display:block;height:1px;content:'';}

#works{width:100%;margin:0 auto;display:flex;flex-wrap:wrap;background:black;}

.card{width:25%;aspect-ratio:4/3;padding:15px;color:white;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;}
.card,#contact span,#card-logo,#services{box-shadow: 1px 0 0 0 white, 0 1px 0 0 white, 1px 1px 0 0 white, 1px 0 0 0 white inset, 0 1px 0 0 white inset;}
.card:hover{background:var(--hover-bg);background-position:center;}

#overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 3;
  cursor: zoom-out;
}

#iframe-container {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%; /* Adjust height */
  z-index: 3;
}

iframe {
  width: 100%;
  height: 95%;
  border: none;
  background: white;
}

#iframe-infobar {
  display:flex;
  justify-content:space-between;
  align-items: center;
  width: 100%;
  flex-flow:row nowrap;
  height: 5%;
}

#iframe-title {
  display:inline-block;
  width: 30%;
}

#iframe-technologies {
  display: flex;
  justify-content: right;
  min-width: 70%;
  gap: 5px;
}

#iframe-technologies span {
  padding: 0px 8px;
  border: 1px solid white;
  border-radius: 25px;
  background: black;
}

#services {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  width: calc(100% - 1px);
  padding: 15px;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 12px 12px 0px 0px;
}

#services span {
  padding: 0px 8px;
  border: 1px solid white;
  border-radius: 25px;
  background: black;
}

@keyframes scroll-left {
  0% {
    transform: translateX(100%); /* Start from right */
  }
  100% {
    transform: translateX(-100%); /* End at left */
  }
}

@media screen and (max-width: 960px) {
  #bio-wrap{display:none;}
  #card-logo,.card{width:100%;}
  #contact span{width:100%;}
  #contact{flex-wrap:wrap;}
  #iframe-infobar{flex-wrap:wrap;}
  #iframe-technologies,#iframe-title{width:100%;justify-content: left;}
  #iframe-technologies{flex-wrap:wrap;}
  #iframe-technologies span{align-items:center;}
  #services{display:none;}
}