@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("./fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-ExtraLight.ttf")
    format("truetype");
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("./fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-Light.ttf")
    format("truetype");
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: bold;
  src: url("./fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-Regular.ttf");
}

@font-face {
  font-family: "shekari";
  font-style: bold;
  src: url("shekari.ttf");
}

body {
  margin: 0 auto;
  font-family: "IBM Plex Sans Arabic";
  direction: rtl;
  text-align: center;
  background: #000;
  color: #fff;

  header {
    position: relative;
    margin-top: 150px;

    .logo {
      position: relative;
      display: flex;
      margin: 0 60px 60px 60px;
      justify-content: center;
      padding-bottom: 8px;

      svg {
        width: 100px;
        height: auto;
        fill: #fff;

        .bg {
          fill: #000;
          stroke: transparent;
        }
      }

      .fish {
        fill: #000;
        stroke: #000;
        clip-path: inset(0 0 0 0);
        margin: 20px 0 0 11px;
        width: 86px;

        .bubble {
          fill: #000;
          stroke: #000;
        }
      }
    }
  }

  content {
    font-size: 35px;
    line-height: 2;
    font-weight: 200;

    p {
      padding: 0 40px;
    }

    .knowledge-fragmentation {
      /* color: #fff;
      background: url(https://s2.svgbox.net/pen-brushes.svg?ic=brush-10&color=000);
      margin: -24px -6px;
      padding: 2px 10px 4px;
      background-size: cover; */
    }

    .projects {
      h2 {
        font-size: 30px;
        margin: 0;
        padding: 0;
        font-weight: 200;
      }

      a {
        color: #ffffff;
        text-decoration: none;
        border-bottom: 2px solid #fff;
        font-size: 30px;
        font-weight: 200;

        &:hover {
          border-bottom: 3px solid #fff;
        }
      }
    }
  }

  footer {
    color: #888;
    font-size: 28px;
    margin-top: 50px;
    margin-bottom: 80px;
    font-family: shekari;
  }

  address {
    color: #888;
    font-size: 8px;
    margin-top: 50px;
    margin-bottom: 100px;
  }
}