@import url('./css2.css?family=Roboto:wght@300&display=swap');

.almaz {
  position: relative;
  display: block;
  /* --almaz-width: 1028px; */
  --almaz-width: min(90vw, 90vh * 2.1416667); /* change this to scale the whole logo */
  --almaz-color: #fb2a4e;
  --almaz-hover-animation: 4s;
  width: var(--almaz-width);
  height: calc(var(--almaz-width) / 2.1416667);
  --almaz-glow-size: calc(var(--almaz-width) * 0.048638132);
  --almaz-glow: drop-shadow(0 0 var(--almaz-glow-size) var(--almaz-color));
  filter: var(--almaz-glow) var(--almaz-glow);
  --almaz-extend: calc(var(--almaz-width) * 0.0428015564);
  --almaz-clip: calc(var(--almaz-width) * 0.0223735409);
  --almaz-border: calc(var(--almaz-width) / 400);
}

.almaz .text {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: calc(var(--almaz-width) / 15);
  letter-spacing: calc(var(--almaz-width) / 75);
  position: absolute;
  bottom: 0px;
  left: calc(var(--almaz-width) / 75);
  right: 0px;
  text-align: center;
  text-decoration: none;
  color: var(--almaz-color);
}

.almaz .right,
.almaz .left,
.almaz .across {
  --aug-border: initial;
  --aug-border-bg: var(--almaz-color);
  --aug-border-all: var(--almaz-border);
  --aug-inlay: initial;
  --aug-inlay-all: 0px;
  --aug-inlay-bg: var(--almaz-color);
  --aug-inlay-opacity: 0.125;
}

.almaz .right {
  position: absolute;
  right: 0px;
  bottom: 22.29%;
  height: 77.1%;
  width: 65.95%;
  --aug-tl-inset1: var(--almaz-extend);
  --aug-tl1: var(--almaz-clip);
  --aug-tr-extend1: var(--almaz-extend);
  --aug-tr1: var(--almaz-clip);
  --aug-tr2-width: calc(var(--almaz-width) * 0.340466926);
  --aug-tr2-height: calc(var(--almaz-width) * 0.3005836575875);
  --aug-br-inset1: var(--almaz-extend);
  --aug-br1: var(--almaz-clip);
  --aug-bl-extend1: var(--almaz-extend);
  --aug-bl1: var(--almaz-clip);
  --aug-bl2-width: calc(var(--almaz-width) * 0.340466926);
  --aug-bl2-height: calc(var(--almaz-width) * 0.3005836575875);
}

.almaz .left {
  position: absolute;
  left: 0px;
  bottom: 22.29%;
  height: 68.75%;
  width: 48.55%;
  --aug-tl1-width: calc(var(--almaz-width) * 0.318093385);
  --aug-tl1-height: calc(var(--almaz-width) * 0.2811284047);
  --aug-tr-inset1: 2%;
  --aug-tr1-width: calc(var(--almaz-width) * 0.165342412);
  --aug-tr1-height: calc(var(--almaz-width) * 0.1459143969);
  --aug-bl-extend1: var(--almaz-extend);
  --aug-bl1: var(--almaz-clip);
  --aug-br1-width: calc(var(--almaz-width) * 0.1614785992);
  --aug-br1-height: calc(var(--almaz-width) * 0.14285992);
  --aug-br-extend2: var(--almaz-extend);
  --aug-br2: var(--almaz-clip);
}

.almaz .across {
  position: absolute;
  bottom: 27.08333%;
  left: 45.9144%;
  width: 12.8405%;
  height: 15.41667%;
  --aug-tl-inset1: calc(var(--almaz-width) / 1028 * 20);
  --aug-tl1: calc(var(--almaz-width) / 1028 * 15);
  --aug-tr1-width: calc(var(--almaz-width) / 1028 * 21);
  --aug-tr1-height: calc(var(--almaz-width) / 1028 * 17);
  --aug-bl1-height: calc(95% - var(--aug-tl1));
  --aug-bl1-width: 49%;
  --aug-br1-height: calc(95% - var(--aug-tr1-height));
  --aug-br1-width: 49%;
}

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}
html { background: black; height: 100vh; }
body {
  height: 100vh;
  display: grid;
  align-items: center;
  justify-content: center;
}


@keyframes leftHoverBorder {
  0%, 2.85714286%             { opacity: 0; }
  2.95714286%, 5.71428572%    { opacity: 1; }
  5.81428572%, 11.42857144%   { opacity: 0; }
  11.52857144%, 12.85714287%  { opacity: 1; }
  12.95714287%, 14.2857143%   { opacity: 0; }
  14.3857143%, 88.57142866%   { opacity: 1; }
  88.67142866%, 100%          { opacity: 1; }
}

@keyframes rightHoverBorder {
  0%, 12.85714287%            { opacity: 0; }
  12.95714287%, 14.2857143%   { opacity: 1; }
  14.3857143%, 15.71428573%   { opacity: 0.5; }
  15.81428573%, 18.57142859%  { opacity: 0; }
  18.67142859%, 20.0%         { opacity: 0.5; }
  20.1%, 21.42857145%         { opacity: 1; }
  21.52857145%, 22.85714288%  { opacity: 0.5; }
  22.95714288%, 88.57142866%  { opacity: 1; }
  88.67142866%, 100%          { opacity: 1; }
}

@keyframes acrossHoverBorder {
  0%, 17.14285716%            { opacity: 0; }
  17.24285716%, 18.57142859%  { opacity: 1; }
  18.67142859%, 20.0%         { opacity: 0.5; }
  20.1%, 25.71428574%         { opacity: 0; }
  25.81428574%, 27.14285717%  { opacity: 1; }
  27.24285717%, 28.5714286%   { opacity: 0; }
  28.6714286%, 88.57142866%   { opacity: 1; }
  88.67142866%, 100%          { opacity: 1; }
}

@keyframes allHoverInlay {
  0%, 32.85714289%            { opacity: 0; }
  34.28571432%                { opacity: calc(0.50 * 0.125); }
  45.71428576%                { opacity: 0.125; }
  50.0%                       { opacity: calc(1.25 * 0.125); }
  55.71428577%                { opacity: 0.125; }
  71.4285715%                 { opacity: calc(1.5 * 0.125); }
  71.4285715%, 100%           { opacity: 0.125; }
}

@keyframes textHover {
  0%, 42.8571429% { opacity: 0; }
  42.9571429%, 100% { opacity: 1; }
}

.almaz:hover .left::after {
  animation: leftHoverBorder var(--almaz-hover-animation) linear;
}
.almaz:hover .right::after {
  animation: rightHoverBorder var(--almaz-hover-animation) linear;
}
.almaz:hover .across::after {
  animation: acrossHoverBorder var(--almaz-hover-animation) linear;
}
.almaz:hover .left::before,
.almaz:hover .right::before,
.almaz:hover .across::before {
  animation: allHoverInlay var(--almaz-hover-animation) linear;
}
.almaz:hover .text {
  animation: textHover var(--almaz-hover-animation) linear;
}