styles.scss

@import url("https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap");

* {
  font-family: "Comic Neue", cursive;
  font-weight: bolder;
  text-decoration: none;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

.darkmode {
  color: white;
  background-color: #03041d;
  /* #03032d */
}


@mixin images {
  width: 7rem;
  height: 7rem;
  padding: 1.5rem;
  animation: mover linear infinite 1s alternate;

  /* alternative -- to make to move both up and down */
  @keyframes mover {
    to {
      transform: translateY(-0.5rem);
    }
  }
}

/* span */
span {
  text-transform: uppercase;
  font-size: 2.5rem;
  color: orangered;
  margin: 0;
  padding: 0px;
  letter-spacing: 0;
}

/* ------------------------Top container ----------------------------------------------- */


.navbar {
  // padding: 0.5rem;
  margin: 0.5rem 0;
  background-color: rgba(255, 0, 0, 0);
  position: sticky;
  backdrop-filter: blur(10px);
  z-index: 100;
  top: 0;
  width: 100%;

  >a>img {
    width: 4rem;
    height: 4rem;
    background-color: #00000000;
    // margin: 0 1rem;
  }

  >button {
    background-color: orange;
    color: #000000;
    border: none;
    margin: 0 1rem;

    >.navbar-toggler-icon {
      font-size: 20px;
      // margin: 0 1rem;
    }
  }

  >#navbarNav {
    >.navbar-nav>.nav-item {
      padding: 0.3rem;
    }
  }
}

.nav-item {
  background-color: #00000000;

  .navlinks {
    margin: 0.5rem;
    background-color: rgba(255, 0, 0, 0);
    font-size: 1.2rem;
    color: inherit;

    &:hover {
      color: orangered;
    }
  }
}



/*------------------------------------- frontpage contents ---------------------------------------------*/
.container-fluid {
  .frontpagecontent {
    padding: 0.5rem;
    // border-radius: 2rem;

    >.col1content {
      padding: 2.5rem;
      text-align: left;
      font-weight: 500;
      animation: ease-in-out;

      >h1 {
        font-weight: 1000;
        word-spacing: 4px;

        >span {
          font-size: inherit;
        }
      }

      >.download_div {
        display: flex;
        // flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        margin: 2rem 2rem 0 0;

        >.button>button {
          /* color: rgb(255, 255, 255); */
          border-radius: 1rem;
          transition: 1s;
          text-decoration: none;
          background-color: cornsilk;
          color: orangered;
          font-size: 1.5rem;
          padding: 0.5rem;
          margin-right: 1rem;
        }

        button:hover {
          background-color: orangered;
          color: cornsilk;
        }

        >.links {
          display: flex;
          align-items: center;
          margin: 2rem 0;
          // margin: .4rem;

          >img {
            width: 3rem;
            height: 3rem;
            margin: 1rem;
          }
        }
      }
    }

    >.col2content>img {
      width: 90%;
      height: 90%;
      left: 4rem;
      // padding: 1rem;
      background-color: #ffc800;
      position: relative;

      border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
      /* transition: 1s; */
      animation: morphing 10s infinite;
      box-shadow: 5px 0px 5px #f3d706;

      @keyframes morphing {
        0% {
          border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
        }

        25% {
          border-radius: 58% 42% 75% 25%/76% 46% 54% 24%;
        }

        50% {
          border-radius: 50% 50% 33% 67%/55% 27% 73% 45%;
        }

        75% {
          border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
        }
      }
    }
  }
}

/* ----------------------------------------about me------------------------------------------------------ */
#aboutme {
  margin: 4rem 0 1rem 0;
  padding: 0rem 1rem;
  text-align: center;
  word-spacing: 1px;
  font-weight: 500;

  >.row {
    // padding: .5rem;

    >.row-fig {
      padding: 0;
    }

    >.hidden>img {
      @include images;
    }

    >.row-text {
      display: flex;
      align-items: center;
      text-align: left;

      >p {
        text-align: left;
        font-size: 1.1rem;
      }
    }
  }
}

/* -------------------------------------features-----------------------------------------------------*/
#features {
  margin: 0rem;
  padding: 2rem 1rem;
  text-align: center;
  word-spacing: 1px;
  font-weight: 500;

  >.row>.hidden {
    img {
      @include images;
      // box-shadow: 0 5px orangered;
    }
  }
}

/* -------------------------------------------projects--------------------------------------------- */
#project {
  margin: 2rem 0 2rem 0;
  // padding: 1rem;
  text-align: center;
  letter-spacing: 0.1px;
  font-weight: 500;
  position: relative;
  // height: 90vh;

  >.row {
    display: flex;
    justify-content: space-evenly;
    // width: 100%;
    margin: 2rem 0;
    position: inherit;

    >.col-lg-4>.card {
      border-radius: 1rem;

      height: 100%;
      padding: .5rem;
      background-color: inherit;
      border: none;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: inherit;
      background-color: inherit;
      box-shadow: 0 5px 5px rgb(255, 68, 0);
      transition: .5s;

      // &:hover {
      //   transform: translateY(-.5rem);
      // }

      >.div-card-text {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        height: 100%;

        div {
          padding: 0.5rem 1.5rem;
          // height: 20%;

          >strong {
            font-size: 1.5rem;
            color: inherit;
          }
        }

        >.card-img {
          padding: 0;
          margin: 0;
          position: relative;
          width: 95%;
          height: 80%;
          background-color: #000000;

          >img {
            width: 100%;
            height: 100%;
          }
        }



        .text {
          // height: inherit;
          padding: 0.5rem;
          box-sizing: border-box;
        }

      }


      >.plink {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        padding: 1rem;
        // height: inherit;

        position: inherit;

        >img {
          background-color: orangered;
          margin: 0.5rem;
          // color: cornsilk;
          width: 3rem;
          height: 3rem;
          // padding: 0.1rem;
          // margin: 0.8rem;
          // font-size: 1.4rem;
          box-shadow: 0 5px 5px rgba(241, 205, 191, 0.537);
          border-radius: 100rem;
          border: 1rem black;

          &:hover {
            background-color: cornsilk;
            color: orangered;
          }
        }
      }
    }
  }
}

/* -----------------------------------------------------Qutoes-----------------------------------------*/
#quotes{
  margin: 3rem 0 2rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 40vh;
  >.row{
    margin: 2rem 0 0 0;
    box-shadow: 0 5px 5px rgb(255, 68, 0);
    border-radius: 1rem;

    >.quote-line{
      margin: 1rem 0 .5rem 0;
      text-align: center;
      font-size: 1.5rem;
    }

    >.author-flex{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      height: fit-content;
      padding: 1rem;
      h2{
          font-size: 1.2rem;
          margin: 0 0 0 .5rem;
          // display: flex;
          // justify-content: center;
          // align-items: center;
      }
    }
  }
}

/* -----------------------------------------------------footer-----------------------------------------*/
#footer {
  padding: 1.5rem 0 0 0;
  margin: 0;
  text-align: center;
  background-color: rgb(255, 68, 0);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;

  >.row {
    width: 100%;
    background-color: inherit;

    >p {
      background-color: inherit;
    }

    >.col {
      margin: 0;
      padding: 0;
      width: 60%;
      background-color: inherit;

      >.footimg {
        width: 2rem;
        height: 2rem;
        margin: 1rem;
        background-color: inherit;
      }
    }
  }
}

/* -------------------------------------------javascript + viewport------------------------------- */
/* light mode from js */
.lightmode {
  color: #000000;
  background-color: papayawhip;
}

/* scroll animations */
.hidden {
  opacity: 0;
  transition: all 1.5s;
  filter: blur(10px);
}

.show {
  opacity: 1;
  filter: blur(0);
}

.customPopup {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.858);
  backdrop-filter: blur(5px);
}

.popup {
  height: 25vh;
  width: 20vw;
  margin: 2rem;
  // background-color: rgba(101, 70, 70, 0.901)t;
  color: white;
  z-index: 1000;
  // box-shadow: 0 5px 5px orangered;
  // padding: 1rem;
  text-align: center;
  // border-radius: 1rem;
  // display: none;
}

.btnPop {
  background-color: red;
  color: black;
  padding: 1rem;
  font-size: 1rem;
  /* margin-top: 3rem; */
  border-radius: 1rem;
  cursor: pointer;
}

@media screen and (max-width: 991px) {
  span {
    font-size: 1.5rem;
  }

  .popup {
    height: 18%;
    width: 88%;
  }

  .navbar {
    >#navbarNav {
      >.navbar-nav {
        width: 100%;
        align-items: center;
      }
    }
  }


  .container-fluid>.frontpagecontent>.col2content {
    >img {
      left: 1rem;
    }
  }

  .container-fluid>.frontpagecontent>.col1content {
    text-align: left;
    padding: 1rem;

    >.download_div {
      display: flex;
      flex-wrap: wrap;
      // flex-direction: column;

      >.button>button {
        font-size: 1rem;
        // margin-right: 3rem;
      }

      >.links>img {
        width: 2rem;
        height: 2rem;
        margin: 0.5rem;
      }
    }
  }

  #aboutme {
    margin: 2rem 0rem 2rem 0rem;
    padding: 0.1rem;
    text-align: center;
    padding: 1rem;

    >.row {
      >.row-text {
        text-align: center;

        >p {
          text-align: center;
          font-size: 1rem;
        }
      }
    }
  }

  #project {
    margin: 0rem;
    padding: 0.1rem;
    text-align: center;
    height: 100%;

    >.row>.col-lg-4 {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;

      >h3 {
        font-size: 1.5rem;
      }

      >.card {
        margin-top: 1rem;
        padding: 0.5rem;
        font-size: small;
        height: 100%;

        >.div-card-text {
          >.card-img {
            width: 100%;
            height: 90%;
          }

          >.div {
            // padding: 0;
            font-size: medium;
          }

          >.text>h4 {
            font-size: 1.1rem;
          }
        }

        >.plink>img {
          // padding: 0;
          margin: 0 1.5rem;
          height: 2rem;
          width: 2rem;
        }
      }
    }
  }
  #quotes{
    >.row{
      width: 90%;
    }
  }

  #footer>.row>.col>.footimg {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0.5rem;
  }
}