@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Righteous&display=swap');

:root{
--logo-font:'Abril Fatface', cursive;
--title-font:'Righteous', cursive;
--text-font:system-ui, sans-serif;
--light-gray:#CECBD4;
--light-purple:#f6f2fb;
--dark:#160D1E;
--dark-purple:#38214A;
--light-blue:#eef2ff;
}
html{scroll-behavior: smooth;}
body{font-family:var(--text-font);background-color: var(--light-blue);}
.has-text-balanced{text-wrap: balance;}
.is-size-8{font-size:0.6875rem!important}
.logo{font-family:var(--logo-font);}
.header{background-color:#160D1E;position:relative;min-height: 770px;}
.header p.caption {
    line-height: 1.6;
}
.socialmedia {
    display: flex;
    align-items: center;
    gap:.5em
}
.socialmedia a{color: var(--light-blue)!important;}
.socialmedia [role=img], .socialmedia img {
    height: 100%;
    width: 100%;
    max-height: 23px;
}
.navbar{margin-bottom:-52px;background-color:transparent!important;}
.navbar a:hover{background-color: transparent;font-weight:700;}
.navbar-dropdown{background-color:transparent;box-shadow: none;}
.navbar-dropdown{border-top-style:dotted;border-top-width:0.5px;border-bottom-style:dotted;border-bottom-width:0.5px}
.has-text-light{color:var(--light-gray)!important}
.title{font-family:var(--title-font)}
.header img#esfera {
    background-size: cover;
    background-image: url(../img/back-head.jpg);
    height: 100vh;
    background-position: 50% center;
    opacity: .6;
    width:100vw;
}
.cards.portfolio figure{background-size:100%!important;background-repeat:no-repeat;background-position:center;}
.notification {
    width: 30vw;
    position: fixed;
    bottom: 1vh;
    right: 1vh;
}
.notification *{font-family: var(--text-font);}
footer{background-color: var(--dark);}
footer *{color:var(--light-purple);}
@media screen and (max-width: 63.9375em) {
    nav.navbar{background-color:var(--dark)!important;}
    .navbar{margin-bottom:0;}
    .navbar-menu{display: block!important;opacity: 0;transition: all ease-in-out .4s;max-height:0vh}
    .navbar-menu.is-active{background-color: var(--dark-purple);max-height:200vh!important;opacity: 1;}
    .notification{bottom:0;left: 0;right:unset;width:100vw}
}

.cards { position: relative; }
.cards .item { margin-bottom: 20px; }

.grid-sizer,
.cards .item { width: calc((100% - 40px) / 3); }

@media (min-width: 1536px) {
  .grid-sizer,
  .cards .item { width: calc((100% - 60px) / 4); }
}

@media (max-width: 1279px) {
  .grid-sizer,
  .cards .item { width: calc((100% - 20px) / 2); }
}

@media (max-width: 799px) {
  .grid-sizer,
  .cards .item { width: 100%; }
}

.lazy{
  position: relative;
  background-color: #eef2ff;          
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.lazy.is-loading::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg,#eef2ff 0%, #e5e7eb 50%, #eef2ff 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s linear infinite;
}

.lazy.is-loaded::before{ display:none; }

.lazy.is-error::before{
  content: "⚠️";
  display:grid;
  place-items:center;
  font-size: 22px;
  color:#9ca3af;
  background:#f8fafc;
}

@keyframes skeleton-shimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}