#worktitle{
  text-align: center;
  font-family:var(--fb);
  font-size:40px;
}

#work{
  padding-top:50px;
}
#work h1,#work span{
  color:white;
  text-align: center;
  font-family:var(--fb);
  /* display: flex; */
  user-select: none;
}
#work h1 i{
  transform:translateY(2px);
}

#webplaceh{
  text-align: center;
  width:100%;
  display:block;
  opacity:.75;
}

#logos{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content: center;
  align-items: center;
}

.logo{
  width:128px;
  height:145px;
  position: relative;
}

.logos{
  overflow:hidden;
  height:128px;
  width:128px;
  position: absolute;
  border-radius:10px;
  cursor:pointer;
  pointer-events: none;
  user-select: none;
}

.logo img{
  width:128px;
  position: absolute;
  transition:scale .3s ease;
  z-index:4;
}
.logo .blur{
  width:128px;
  position: absolute;
  z-index:2;
  filter:blur(20px);
  opacity:.4;
  border-radius:10px;
  transition:opacity .3s ease-out;
}

@keyframes fontpreload{
  0%{
    font-weight:bold;
  }
  100%{
    font-size:normal;
  }
}

.logo:hover .bg{scale:1.2;}
.logo:hover .fg{scale:.9;}
.logo:hover .blur{opacity:.75;}
.logo:hover .title{font-weight:bold;}

.logo .title{
  position:absolute;
  top:135px;
  font-size:14px;
  text-align: center;
  width:128px;
  transition:font-weight .3s ease;
  animation: fontpreload 1s ease-out once;
}