/******************** HEADING ********************/
header {
  display: flex;
  justify-content: space-between;
  margin: 48px 36px 0;
  position: relative;
  z-index: 2;
}
@media (max-width: 1079px) {
  header {
    flex-direction: column;
    gap: 20px;
  }
}
@media (min-width: 1080px) {
  header {
    flex-direction: row;
  }
}

.headings {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (max-width: 1079px) {
  .headings {
    order: 2;
  }
}
@media (min-width: 1080px) {
  .headings {
    height: 0;
    max-width: 436px;
    width: 30%;
  }
}

@media (min-width: 1080px) {
  .headings:lang(ar) h2 {
    max-width: 220px;
  }
}

@media (max-width: 1079px) {
  .navs {
    order: 1;
  }
}

h1 {
  font-family: "Libre Franklin", sans-serif;
  font-weight: 900;
  letter-spacing: 13%;
  color: var(--green);
  text-transform: uppercase;
  margin: 0;
}
@media (max-width: 649px) {
  h1 {
    font-size: 35px;
    line-height: 1.05;
  }
}
@media (min-width: 650px) and (max-width: 1079px) {
  h1 {
    font-size: 56px;
    line-height: 1;
    margin-top: 20px;
  }
}
@media (min-width: 1080px) {
  h1 {
    font-size: 70px;
    line-height: 0.9;
  }
}

h1:lang(ar) {
  font-family: "Noto Kufi Arabic", "Markazi Text", serif;
}
@media (min-width: 1080px) {
  h1:lang(ar) {
    font-size: 80px;
  }
}

h2 {
  font-family: "Georgia", serif;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}
@media (max-width: 649px) {
  h2 {
    font-size: 20px;
  }
}
@media (min-width: 650px) and (max-width: 1079px) {
  h2 {
    font-size: 24px;
  }
}
@media (min-width: 1080px) {
  h2 {
    font-size: 28px;
  }
}

h2:lang(ar) {
  font-family: "Markazi Text", serif;
  line-height: 1.1;
}
@media (max-width: 649px) {
  h2:lang(ar) {
    font-size: 32px;
  }
}
@media (min-width: 650px) and (max-width: 1079px) {
  h2:lang(ar) {
    font-size: 36px;
  }
}
@media (min-width: 1080px) {
  h2:lang(ar) {
    font-size: 40px;
  }
}

h3 {
  font-weight: 400;
  font-family: "Georgia";
  font-size: 17px;
  line-height: 1.3;
}
@media (max-width: 649px) {
  h3 {
    font-size: 16px;
  }
}
@media (min-width: 650px) and (max-width: 1079px) {
  h3 {
    margin-top: 15px;
  }
}
@media (min-width: 1080px) {
  h3 {
    margin-top: 25px;
    width: 70%;
  }
}

/******************** MAIN ********************/
main {
  position: relative;
  display: block;
  width: 100vw;
  overflow-x: clip;
}

@media (max-width: 649px) {
  .lines,
  .nodes {
    padding-left: 10px;
    padding-right: 102px;
  }
}
@media (min-width: 650px) {
  .lines,
  .nodes {
    padding-right: 120px;
  }
}

.dot-sprite {
  display: inline-block;
  width: 25px;
  height: 25px;
  background-image: url("../assets/img/dots.svg");
  background-size: 850px;
}

.dot-0 {
  background-position: 0px 0px;
}

.dot-1 {
  background-position: 25px 0px;
}

.dot-2 {
  background-position: 50px 0px;
}

.dot-3 {
  background-position: 75px 0px;
}

.dot-4 {
  background-position: 100px 0px;
}

.dot-5 {
  background-position: 125px 0px;
}

.dot-6 {
  background-position: 150px 0px;
}

.dot-7 {
  background-position: 175px 0px;
}

.dot-8 {
  background-position: 200px 0px;
}

.dot-9 {
  background-position: 225px 0px;
}

.dot-10 {
  background-position: 250px 0px;
}

.dot-11 {
  background-position: 275px 0px;
}

.dot-12 {
  background-position: 300px 0px;
}

.dot-13 {
  background-position: 325px 0px;
}

.dot-14 {
  background-position: 350px 0px;
}

.dot-15 {
  background-position: 375px 0px;
}

.dot-16 {
  background-position: 400px 0px;
}

.dot-17 {
  background-position: 425px 0px;
}

.dot-18 {
  background-position: 450px 0px;
}

.dot-19 {
  background-position: 475px 0px;
}

.dot-20 {
  background-position: 500px 0px;
}

.dot-21 {
  background-position: 525px 0px;
}

.dot-22 {
  background-position: 550px 0px;
}

.dot-23 {
  background-position: 575px 0px;
}

.dot-24 {
  background-position: 600px 0px;
}

.dot-25 {
  background-position: 625px 0px;
}

.dot-26 {
  background-position: 650px 0px;
}

.dot-27 {
  background-position: 675px 0px;
}

.dot-28 {
  background-position: 700px 0px;
}

.dot-29 {
  background-position: 725px 0px;
}

.dot-30 {
  background-position: 750px 0px;
}

.dot-31 {
  background-position: 775px 0px;
}

.dot-32 {
  background-position: 800px 0px;
}

.dot-33 {
  background-position: 825px 0px;
}

.dot-on-net {
  position: relative;
}
@media (max-width: 649px) {
  .dot-on-net {
    transform: scale(1.25);
  }
}
@media (min-width: 650px) {
  .dot-on-net {
    transform: scale(2);
  }
}

.net-mobile {
  display: none;
}
@media (max-width: 649px) {
  .net-mobile {
    display: block;
  }
}

.net-tablet {
  display: none;
}
@media (min-width: 650px) and (max-width: 1079px) {
  .net-tablet {
    display: block;
  }
}

.net-desktop {
  display: none;
  width: 100%;
}
@media (min-width: 1080px) {
  .net-desktop {
    display: block;
  }
}

.nodes {
  display: grid;
  transform: skew(4deg, 2deg);
  position: absolute;
}
@media (max-width: 649px) {
  .nodes {
    height: 101.15%;
    width: 133%;
    left: -17%;
    top: 1.6%;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(45, 1fr);
    grid-template-areas: ".   .   .   n1  .   .  " ".   .   .   .   n2  .  " ".   .   n3  .   .   n4 " ".   .   .   n5  .   .  " ".   .   .   .   n6  .  " ".   .   n7  .   .   n8 " ".   .   .   n9  .   .  " ".   .   .   .   n10 .  " ".   .   n11 .   .   n12" ".   .   .   n13 .   .  " ".   .   .   .   n14 .  " ".   .   n15 .   .   n16" ".   .   .   n17 .   .  " ".   .   .   .   n18 .  " ".   .   .   .   .   x1 " ".   .   .   n19 .   .  " ".   .   .   .   n20 .  " ".   .   n21 .   .   x2 " ".   .   .   n22 .   .  " ".   n23 .   .   n24 .  " ".   .   n25 .   .   .  " ".   .   .   n26 .   .  " ".   .   .   .   n27 .  " ".   .   .   .   .   .  " ".   .   .   n28 .   .  " ".   n29 .   .   n30 .  " ".   .   n31 .   .   .  " ".   .   .   n32 .   .  " ".   n33 .   .   n34 .  " ".   .   n35 .   .   .  " ".   .   .   n36 .   .  " ".   n37 .   .   .   .  " ".   .   n38 .   .   .  " ".   .   .   n39 .   .  " ".   n40 .   .   .   .  " ".   .   n41 .   .   .  " ".   .   .   n42 .   .  " ".   n43 .   .   .   .  " ".   .   n44 .   .   .  " ".   .   .   n45 .   .  " ".   n46 .   .   .   .  " ".   .   x3  .   .   .  " "x4  .   .   .   .   .  " ".   x5  .   .   .   .  " ".   .   .   .   .   .  " ".   .   .   .   .   .  ";
  }
  .nodes .decorative-node[data-index="1"] {
    display: flex;
  }
  .nodes .decorative-node[data-index="2"] {
    display: flex;
  }
  .nodes .decorative-node[data-index="3"] {
    display: flex;
  }
  .nodes .decorative-node[data-index="4"] {
    display: flex;
  }
  .nodes .decorative-node[data-index="5"] {
    display: flex;
  }
}
@media (min-width: 650px) and (max-width: 1079px) {
  .nodes {
    height: 99%;
    width: 98.5%;
    left: 3.5%;
    top: 2.2%;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(26, 1fr);
    grid-template-areas: ".   .   .   .   .   .   n1  .  " ".   .   .   .   n2  .   .   n3 " ".   .   x1  .   .   n4  .   .  " ".   .   .   n5  .   .   n6  .  " ".   n7  .   .   n8  .   .   x2 " ".   .   n9  .   .   n10 .   .  " ".   .   .   n11 .   .   n12 .  " ".   n13 .   .   n14 .   .   .  " ".   .   n15 .   .   x3  .   .  " "n16 .   .   n17 .   .   n18 .  " ".   n19 .   .   n20 .   .   .  " ".   .   n21 .   .   n22 .   .  " "n23 .   .   n24 .   .   n25 .  " ".   n26 .   .   n27 .   .   .  " ".   .   n28 .   .   n29 .   .  " ".   .   .   n30 .   .   n31 .  " ".   n32 .   .   n33 .   .   .  " ".   .   n34 .   .   n35 .   .  " "n36 .   .   n37 .   .   .   .  " ".   n38 .   .   n39 .   .   .  " ".   .   n40 .   .   n41 .   .  " "n42 .   .   n43 .   .   .   .  " ".   n44 .   .   n45 .   .   .  " ".   .   n46 .   .   x4  .   .  " "n47 .   .   n48 .   .   .   .  " ".   n49 .   .   n50 .   .   .  ";
  }
  .nodes .decorative-node[data-index="1"] {
    display: flex;
  }
  .nodes .decorative-node[data-index="2"] {
    display: flex;
  }
  .nodes .decorative-node[data-index="3"] {
    display: flex;
  }
  .nodes .decorative-node[data-index="4"] {
    display: flex;
  }
}
@media (min-width: 1080px) {
  .nodes {
    height: 95%;
    width: 86.75%;
    left: 6.85%;
    top: 4%;
    grid-template-columns: repeat(13, 1fr);
    grid-template-rows: repeat(23, 1fr);
    grid-template-areas: ".   .   .   .   .   .   .   .   .   n1  .   .   .  " ".   .   .   .   .   .   .   n2  .   .   n3  .   .  " ".   .   .   .   .   x1  .   .   x2  .   .   n4  .  " ".   .   .   x3  .   .   n5  .   .   n6  .   .   .  " ".   .   .   .   x4  .   .   n7  .   .   n8  .   .  " ".   .   .   .   .   n9  .   .   x5  .   .   n10 .  " ".   .   .   n11 .   .   n12 .   .   n13 .   .   .  " ".   x6  .   .   n14 .   .   n15 .   .   n16 .   .  " ".   .   n17 .   .   x7  .   .   x8  .   .   n18 .  " "x9  .   .   n19 .   .   n20 .   .   n21 .   .   .  " ".   n22 .   .   n23 .   .   n24 .   .   n25 .   .  " ".   .   n26 .   .   x10  .   .   n27 .   .   n28 .  " "x11 .   .   n29 .   .   n30 .   .   n31 .   .   n32" ".   .   .   .   x12 .   .   n33 .   .   n34 .   .  " ".   .   .   .   .   n35 .   .   x13 .   .   n36 .  " ".   .   .   .   .   .   n37 .   .   n38 .   .   x14" ".   .   .   .   n39 .   .   x15 .   .   x16 .   .  " ".   .   x17 .   .   n40 .   .   n41 .   .   x18 .  " ".   .   .   x19 .   .   n42 .   .   n43 .   .   x20" ".   x21 .   .   n44 .   .   n45 .   .   x22 .   .  " ".   .   n46 .   .   n47 .   .   n48 .   .   x23 .  " ".   .   .   n49 .   .   n50 .   .   .   .   .   .  " ".   x24 .   .   x25 .   .   x26 .   .   .   .   .  ";
  }
  .nodes .decorative-node[data-index="1"] {
    display: flex;
  }
  .nodes .decorative-node[data-index="2"] {
    display: flex;
  }
  .nodes .decorative-node[data-index="3"] {
    display: flex;
  }
  .nodes .decorative-node[data-index="4"] {
    display: flex;
  }
  .nodes .decorative-node[data-index="5"] {
    display: flex;
  }
  .nodes .decorative-node[data-index="6"] {
    display: flex;
  }
  .nodes .decorative-node[data-index="7"] {
    display: flex;
  }
  .nodes .decorative-node[data-index="8"] {
    display: flex;
  }
  .nodes .decorative-node[data-index="9"] {
    display: flex;
  }
  .nodes .decorative-node[data-index="10"] {
    display: flex;
  }
  .nodes .decorative-node[data-index="11"] {
    display: flex;
  }
  .nodes .decorative-node[data-index="12"] {
    display: flex;
  }
  .nodes .decorative-node[data-index="13"] {
    display: flex;
  }
  .nodes .decorative-node[data-index="14"] {
    display: flex;
  }
  .nodes .decorative-node[data-index="15"] {
    display: flex;
  }
  .nodes .decorative-node[data-index="16"] {
    display: flex;
  }
  .nodes .decorative-node[data-index="17"] {
    display: flex;
  }
  .nodes .decorative-node[data-index="18"] {
    display: flex;
  }
  .nodes .decorative-node[data-index="19"] {
    display: flex;
  }
  .nodes .decorative-node[data-index="20"] {
    display: flex;
  }
  .nodes .decorative-node[data-index="21"] {
    display: flex;
  }
  .nodes .decorative-node[data-index="22"] {
    display: flex;
  }
  .nodes .decorative-node[data-index="23"] {
    display: flex;
  }
  .nodes .decorative-node[data-index="24"] {
    display: flex;
  }
  .nodes .decorative-node[data-index="25"] {
    display: flex;
  }
  .nodes .decorative-node[data-index="26"] {
    display: flex;
  }
}

.node,
.decorative-node {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: skew(-4deg, -2deg);
}

.decorative-node .dot-on-net {
  filter: brightness(0.5);
}

.node[data-index="1"] {
  grid-area: n1;
}

.node[data-index="2"] {
  grid-area: n2;
}

.node[data-index="3"] {
  grid-area: n3;
}

.node[data-index="4"] {
  grid-area: n4;
}

.node[data-index="5"] {
  grid-area: n5;
}

.node[data-index="6"] {
  grid-area: n6;
}

.node[data-index="7"] {
  grid-area: n7;
}

.node[data-index="8"] {
  grid-area: n8;
}

.node[data-index="9"] {
  grid-area: n9;
}

.node[data-index="10"] {
  grid-area: n10;
}

.node[data-index="11"] {
  grid-area: n11;
}

.node[data-index="12"] {
  grid-area: n12;
}

.node[data-index="13"] {
  grid-area: n13;
}

.node[data-index="14"] {
  grid-area: n14;
}

.node[data-index="15"] {
  grid-area: n15;
}

.node[data-index="16"] {
  grid-area: n16;
}

.node[data-index="17"] {
  grid-area: n17;
}

.node[data-index="18"] {
  grid-area: n18;
}

.node[data-index="19"] {
  grid-area: n19;
}

.node[data-index="20"] {
  grid-area: n20;
}

.node[data-index="21"] {
  grid-area: n21;
}

.node[data-index="22"] {
  grid-area: n22;
}

.node[data-index="23"] {
  grid-area: n23;
}

.node[data-index="24"] {
  grid-area: n24;
}

.node[data-index="25"] {
  grid-area: n25;
}

.node[data-index="26"] {
  grid-area: n26;
}

.node[data-index="27"] {
  grid-area: n27;
}

.node[data-index="28"] {
  grid-area: n28;
}

.node[data-index="29"] {
  grid-area: n29;
}

.node[data-index="30"] {
  grid-area: n30;
}

.node[data-index="31"] {
  grid-area: n31;
}

.node[data-index="32"] {
  grid-area: n32;
}

.node[data-index="33"] {
  grid-area: n33;
}

.node[data-index="34"] {
  grid-area: n34;
}

.node[data-index="35"] {
  grid-area: n35;
}

.node[data-index="36"] {
  grid-area: n36;
}

.node[data-index="37"] {
  grid-area: n37;
}

.node[data-index="38"] {
  grid-area: n38;
}

.node[data-index="39"] {
  grid-area: n39;
}

.node[data-index="40"] {
  grid-area: n40;
}

.node[data-index="41"] {
  grid-area: n41;
}

.node[data-index="42"] {
  grid-area: n42;
}

.node[data-index="43"] {
  grid-area: n43;
}

.node[data-index="44"] {
  grid-area: n44;
}

.node[data-index="45"] {
  grid-area: n45;
}

.node[data-index="46"] {
  grid-area: n46;
}

.node[data-index="47"] {
  grid-area: n47;
}

.node[data-index="48"] {
  grid-area: n48;
}

.node[data-index="49"] {
  grid-area: n49;
}

.node[data-index="50"] {
  grid-area: n50;
}

.node[data-index="51"] {
  grid-area: n51;
}

.node[data-index="52"] {
  grid-area: n52;
}

.node[data-index="53"] {
  grid-area: n53;
}

.node[data-index="54"] {
  grid-area: n54;
}

.node[data-index="55"] {
  grid-area: n55;
}

.node[data-index="56"] {
  grid-area: n56;
}

.node[data-index="57"] {
  grid-area: n57;
}

.node[data-index="58"] {
  grid-area: n58;
}

.node[data-index="59"] {
  grid-area: n59;
}

.node[data-index="60"] {
  grid-area: n60;
}

.node[data-index="61"] {
  grid-area: n61;
}

.node[data-index="62"] {
  grid-area: n62;
}

.node[data-index="63"] {
  grid-area: n63;
}

.node[data-index="64"] {
  grid-area: n64;
}

.node[data-index="65"] {
  grid-area: n65;
}

.node[data-index="66"] {
  grid-area: n66;
}

.node[data-index="67"] {
  grid-area: n67;
}

.node[data-index="68"] {
  grid-area: n68;
}

.node[data-index="69"] {
  grid-area: n69;
}

.node[data-index="70"] {
  grid-area: n70;
}

.node[data-index="71"] {
  grid-area: n71;
}

.node[data-index="72"] {
  grid-area: n72;
}

.node[data-index="73"] {
  grid-area: n73;
}

.node[data-index="74"] {
  grid-area: n74;
}

.node[data-index="75"] {
  grid-area: n75;
}

.node[data-index="76"] {
  grid-area: n76;
}

.node[data-index="77"] {
  grid-area: n77;
}

.node[data-index="78"] {
  grid-area: n78;
}

.node[data-index="79"] {
  grid-area: n79;
}

.node[data-index="80"] {
  grid-area: n80;
}

.node[data-index="81"] {
  grid-area: n81;
}

.node[data-index="82"] {
  grid-area: n82;
}

.node[data-index="83"] {
  grid-area: n83;
}

.node[data-index="84"] {
  grid-area: n84;
}

.node[data-index="85"] {
  grid-area: n85;
}

.node[data-index="86"] {
  grid-area: n86;
}

.node[data-index="87"] {
  grid-area: n87;
}

.node[data-index="88"] {
  grid-area: n88;
}

.node[data-index="89"] {
  grid-area: n89;
}

.node[data-index="90"] {
  grid-area: n90;
}

.node[data-index="91"] {
  grid-area: n91;
}

.node[data-index="92"] {
  grid-area: n92;
}

.node[data-index="93"] {
  grid-area: n93;
}

.node[data-index="94"] {
  grid-area: n94;
}

.node[data-index="95"] {
  grid-area: n95;
}

.node[data-index="96"] {
  grid-area: n96;
}

.node[data-index="97"] {
  grid-area: n97;
}

.node[data-index="98"] {
  grid-area: n98;
}

.node[data-index="99"] {
  grid-area: n99;
}

.node[data-index="100"] {
  grid-area: n100;
}

.decorative-node[data-index="1"] {
  grid-area: x1;
  display: none;
}

.decorative-node[data-index="2"] {
  grid-area: x2;
  display: none;
}

.decorative-node[data-index="3"] {
  grid-area: x3;
  display: none;
}

.decorative-node[data-index="4"] {
  grid-area: x4;
  display: none;
}

.decorative-node[data-index="5"] {
  grid-area: x5;
  display: none;
}

.decorative-node[data-index="6"] {
  grid-area: x6;
  display: none;
}

.decorative-node[data-index="7"] {
  grid-area: x7;
  display: none;
}

.decorative-node[data-index="8"] {
  grid-area: x8;
  display: none;
}

.decorative-node[data-index="9"] {
  grid-area: x9;
  display: none;
}

.decorative-node[data-index="10"] {
  grid-area: x10;
  display: none;
}

.decorative-node[data-index="11"] {
  grid-area: x11;
  display: none;
}

.decorative-node[data-index="12"] {
  grid-area: x12;
  display: none;
}

.decorative-node[data-index="13"] {
  grid-area: x13;
  display: none;
}

.decorative-node[data-index="14"] {
  grid-area: x14;
  display: none;
}

.decorative-node[data-index="15"] {
  grid-area: x15;
  display: none;
}

.decorative-node[data-index="16"] {
  grid-area: x16;
  display: none;
}

.decorative-node[data-index="17"] {
  grid-area: x17;
  display: none;
}

.decorative-node[data-index="18"] {
  grid-area: x18;
  display: none;
}

.decorative-node[data-index="19"] {
  grid-area: x19;
  display: none;
}

.decorative-node[data-index="20"] {
  grid-area: x20;
  display: none;
}

.decorative-node[data-index="21"] {
  grid-area: x21;
  display: none;
}

.decorative-node[data-index="22"] {
  grid-area: x22;
  display: none;
}

.decorative-node[data-index="23"] {
  grid-area: x23;
  display: none;
}

.decorative-node[data-index="24"] {
  grid-area: x24;
  display: none;
}

.decorative-node[data-index="25"] {
  grid-area: x25;
  display: none;
}

.decorative-node[data-index="26"] {
  grid-area: x26;
  display: none;
}

.decorative-node[data-index="27"] {
  grid-area: x27;
  display: none;
}

.decorative-node[data-index="28"] {
  grid-area: x28;
  display: none;
}

.decorative-node[data-index="29"] {
  grid-area: x29;
  display: none;
}

.decorative-node[data-index="30"] {
  grid-area: x30;
  display: none;
}

.decorative-node[data-index="31"] {
  grid-area: x31;
  display: none;
}

.decorative-node[data-index="32"] {
  grid-area: x32;
  display: none;
}

.decorative-node[data-index="33"] {
  grid-area: x33;
  display: none;
}

.decorative-node[data-index="34"] {
  grid-area: x34;
  display: none;
}

.decorative-node[data-index="35"] {
  grid-area: x35;
  display: none;
}

.decorative-node[data-index="36"] {
  grid-area: x36;
  display: none;
}

.decorative-node[data-index="37"] {
  grid-area: x37;
  display: none;
}

.decorative-node[data-index="38"] {
  grid-area: x38;
  display: none;
}

.decorative-node[data-index="39"] {
  grid-area: x39;
  display: none;
}

.decorative-node[data-index="40"] {
  grid-area: x40;
  display: none;
}

.decorative-node[data-index="41"] {
  grid-area: x41;
  display: none;
}

.decorative-node[data-index="42"] {
  grid-area: x42;
  display: none;
}

.decorative-node[data-index="43"] {
  grid-area: x43;
  display: none;
}

.decorative-node[data-index="44"] {
  grid-area: x44;
  display: none;
}

.decorative-node[data-index="45"] {
  grid-area: x45;
  display: none;
}

.decorative-node[data-index="46"] {
  grid-area: x46;
  display: none;
}

.decorative-node[data-index="47"] {
  grid-area: x47;
  display: none;
}

.decorative-node[data-index="48"] {
  grid-area: x48;
  display: none;
}

.decorative-node[data-index="49"] {
  grid-area: x49;
  display: none;
}

.decorative-node[data-index="50"] {
  grid-area: x50;
  display: none;
}

.decorative-node[data-index="51"] {
  grid-area: x51;
  display: none;
}

.decorative-node[data-index="52"] {
  grid-area: x52;
  display: none;
}

.decorative-node[data-index="53"] {
  grid-area: x53;
  display: none;
}

.decorative-node[data-index="54"] {
  grid-area: x54;
  display: none;
}

.decorative-node[data-index="55"] {
  grid-area: x55;
  display: none;
}

.decorative-node[data-index="56"] {
  grid-area: x56;
  display: none;
}

.decorative-node[data-index="57"] {
  grid-area: x57;
  display: none;
}

.decorative-node[data-index="58"] {
  grid-area: x58;
  display: none;
}

.decorative-node[data-index="59"] {
  grid-area: x59;
  display: none;
}

.decorative-node[data-index="60"] {
  grid-area: x60;
  display: none;
}

.decorative-node[data-index="61"] {
  grid-area: x61;
  display: none;
}

.decorative-node[data-index="62"] {
  grid-area: x62;
  display: none;
}

.decorative-node[data-index="63"] {
  grid-area: x63;
  display: none;
}

.decorative-node[data-index="64"] {
  grid-area: x64;
  display: none;
}

.decorative-node[data-index="65"] {
  grid-area: x65;
  display: none;
}

.decorative-node[data-index="66"] {
  grid-area: x66;
  display: none;
}

.decorative-node[data-index="67"] {
  grid-area: x67;
  display: none;
}

.decorative-node[data-index="68"] {
  grid-area: x68;
  display: none;
}

.decorative-node[data-index="69"] {
  grid-area: x69;
  display: none;
}

.decorative-node[data-index="70"] {
  grid-area: x70;
  display: none;
}

.decorative-node[data-index="71"] {
  grid-area: x71;
  display: none;
}

.decorative-node[data-index="72"] {
  grid-area: x72;
  display: none;
}

.decorative-node[data-index="73"] {
  grid-area: x73;
  display: none;
}

.decorative-node[data-index="74"] {
  grid-area: x74;
  display: none;
}

.decorative-node[data-index="75"] {
  grid-area: x75;
  display: none;
}

.decorative-node[data-index="76"] {
  grid-area: x76;
  display: none;
}

.decorative-node[data-index="77"] {
  grid-area: x77;
  display: none;
}

.decorative-node[data-index="78"] {
  grid-area: x78;
  display: none;
}

.decorative-node[data-index="79"] {
  grid-area: x79;
  display: none;
}

.decorative-node[data-index="80"] {
  grid-area: x80;
  display: none;
}

.decorative-node[data-index="81"] {
  grid-area: x81;
  display: none;
}

.decorative-node[data-index="82"] {
  grid-area: x82;
  display: none;
}

.decorative-node[data-index="83"] {
  grid-area: x83;
  display: none;
}

.decorative-node[data-index="84"] {
  grid-area: x84;
  display: none;
}

.decorative-node[data-index="85"] {
  grid-area: x85;
  display: none;
}

.decorative-node[data-index="86"] {
  grid-area: x86;
  display: none;
}

.decorative-node[data-index="87"] {
  grid-area: x87;
  display: none;
}

.decorative-node[data-index="88"] {
  grid-area: x88;
  display: none;
}

.decorative-node[data-index="89"] {
  grid-area: x89;
  display: none;
}

.decorative-node[data-index="90"] {
  grid-area: x90;
  display: none;
}

.decorative-node[data-index="91"] {
  grid-area: x91;
  display: none;
}

.decorative-node[data-index="92"] {
  grid-area: x92;
  display: none;
}

.decorative-node[data-index="93"] {
  grid-area: x93;
  display: none;
}

.decorative-node[data-index="94"] {
  grid-area: x94;
  display: none;
}

.decorative-node[data-index="95"] {
  grid-area: x95;
  display: none;
}

.decorative-node[data-index="96"] {
  grid-area: x96;
  display: none;
}

.decorative-node[data-index="97"] {
  grid-area: x97;
  display: none;
}

.decorative-node[data-index="98"] {
  grid-area: x98;
  display: none;
}

.decorative-node[data-index="99"] {
  grid-area: x99;
  display: none;
}

.decorative-node[data-index="100"] {
  grid-area: x100;
  display: none;
}

.dot-label {
  position: absolute;
  transform: translate(10px, 5px);
  font-family: Georgia;
  font-weight: 400;
  line-height: 21px;
  color: #d3ceca;
}
@media (max-width: 649px) {
  .dot-label {
    font-size: 16px;
    top: 40%;
    left: 43%;
    width: 102px;
  }
}
@media (min-width: 650px) {
  .dot-label {
    font-size: 18px;
    top: 50%;
    left: 50%;
    width: 120px;
  }
}

a.card:hover {
  text-decoration: none;
}

.card {
  cursor: pointer;
  width: 266px;
  border: 2px solid var(--green);
  border-radius: 16px;
  padding: 8px;
  background: var(--background-color);
  text-decoration: none;
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease-in-out;
}
.card.is-flipped {
  left: auto;
  right: 50%;
}
.card .publish-date {
  font-family: Libre Franklin;
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 8%;
  text-transform: uppercase;
  margin: 4px 0 8px;
}
.card .martyr {
  font-family: Libre Franklin;
  font-weight: 900;
  font-size: 32px;
  line-height: 1.2;
  color: var(--green);
  margin-top: 0;
  margin-bottom: 16px;
  overflow-wrap: break-word;
}
.card .remember {
  font-family: Libre Franklin;
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 8%;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.card .speakers {
  font-family: Georgia;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.25;
  margin-bottom: 16px;
}
.card .card-image {
  position: relative;
}
.card .card-image img {
  width: 100%;
}
.card .card-image:after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: #52a27b;
  mix-blend-mode: color;
}
.card .image-placeholder {
  width: 100%;
  aspect-ratio: 3/4;
  background: linear-gradient(-45deg, #81d1af, #a7f0d0, #52a27b);
  border-radius: 8px;
}

.node:hover {
  z-index: 2;
}
.node:hover .dot-on-net {
  filter: brightness(1.8);
  z-index: 3;
}
.node:hover .card {
  opacity: 1;
  pointer-events: all;
}

.node.unpublished .dot-sprite {
  background-image: url("../assets/img/dots-dull.svg");
  cursor: default;
}
.node.unpublished .dot-label {
  color: #999792;
}
.node.unpublished .card {
  cursor: default;
}

/******************** SECTIONS ********************/
section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 48px 36px;
}
section h2 {
  color: #15b770;
  font-family: "Libre Franklin", sans-serif;
  font-weight: 800;
  font-size: 42px;
  line-height: 74px;
  margin-bottom: 0;
  text-align: center;
}
section .names {
  font-family: "Georgia", serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  list-style-type: none;
  padding-inline-start: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  color: #999792;
}
@media (max-width: 649px) {
  section .names {
    font-size: 16px;
    column-gap: 5px;
  }
}
@media (min-width: 650px) {
  section .names {
    row-gap: 10px;
    column-gap: 10px;
  }
}
section .names a {
  text-decoration: none;
}
section .section-break-label {
  text-align: center;
  font-family: "Libre Franklin", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 10%;
  text-transform: uppercase;
}

.dot-sprite.unpublished {
  background-image: url("../assets/img/dots-dull.svg");
}

/******************** RIGHT TO LEFT ********************/
/* Arabic sets dir="rtl" on the page, so the header, the nav and the name lists
   mirror on their own. The net is a drawing, not a layout: its dots are placed
   by grid areas that only line up with the artwork left to right, so the grid
   keeps its own direction and the drawing is mirrored whole, each node flipped
   back so what hangs off a dot still reads the right way round. */
[dir=rtl] main {
  transform: scaleX(-1);
}
[dir=rtl] .node {
  transform: skew(-4deg, -2deg) scaleX(-1);
}
[dir=rtl] .nodes {
  direction: ltr;
}
[dir=rtl] .dot-label {
  left: auto;
  right: 50%;
  transform: translate(-10px, 5px);
  direction: rtl;
}
[dir=rtl] .card {
  left: auto;
  right: 50%;
  direction: rtl;
}
[dir=rtl] .card.is-flipped {
  left: 50%;
  right: auto;
}