/* Navigation */
:root {
    --bg-color: rgb(0, 0, 0);
    --card-color: rgb(34, 34, 34);
    --item-color: #2C2B33;
    --slightly-darker-white: #cecece;
  }
  body {
      background-color: black;
      font-family: Arial, Helvetica, sans-serif;
      margin: 0px;
      color: white;
      min-height: 800px;
      overflow-y: scroll;
  }
  h1 {
      font-size: 250%;
      text-align: center;
  }
  h2 {
      text-align: center;
  }
  .topnav {
      overflow: hidden;
      width: 100%;
      max-height: 50px;
      position: sticky;
      position: -webkit-sticky; /* Safari */
      top: 10px;
      z-index: 10;
  }

  .topnav a {
      float: left;
      color: white;
      font-size: 18px;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      background-color: rgba(10, 10, 10, 0.5);
  }
  #lefttopnav {
      border-top-left-radius: 100px;
      border-bottom-left-radius: 100px;
      margin-left: 10px;
  }
  #righttopnav {
      border-top-right-radius: 100px;
      border-bottom-right-radius: 100px;
  }
  #swe-link {
      position: absolute;
      border-radius: 100px;
      right: 10px;
  }
  .topnav a:hover {
      background-color: rgb(68, 0, 68);
      transition: all 300ms;
  }
  .maincontent {
      margin: 0px;
      margin-top: -50px;
  }
  .bottom {
      background-color: #292929;
      width: 100%;
      height: 250px;
  }
  #bottomnav {
      position: absolute;
      left: 5%;
  }
  #bottomnav1 {
      float: right;
  }
  .bottom li {
      margin-bottom: 10px;
      list-style-type: none;
  }
  .bottom li a {
      text-decoration: underline;
      color: lightgray;
  }
  #social-media-icons {
      display: flex;
      justify-content: center;
      font-size: 140%;
      margin-top: 20px;
  }
  .social-media-icon {
      color: lightgray;
      margin: 10px;
      transition: all 100ms;
  }
  .social-media-icon:hover {
      transform: scale(1.17, 1.17);
      color: white;
      transition: all 200ms;
  }
  #bsky-social-media-icon:hover {
      transform: scale(1.18, 1.18);
  }
  #github-social-media-icon:hover {
      transform: scale(1.15, 1.15);
  }
  .bsky-footer {
      color: white;
  }
  #h1-icon {
      transform: scale(1.4, 1.4) translateY(-5px);
      transition: all 150ms;
  }
  #h1-icon:hover {
      transform: scale(1.7, 1.7) translateY(-4px);
      transition: all 300ms;
  }
  #copyrightlabel {
      display: flex;
      justify-content: center;
  }
  /* ---Content--- */

  /* aboutme */
  .aboutme {
      padding-left: 10%;
      width: 80%;
      height: 500px;
  }
  .aboutmeBack {
      background-color: rgba(34, 34, 34, 0.5);
      height: 100%;
      border-radius: 10px;
      background-image: url(./contactcard/img/background.svg);
      background-size: cover;
  }
  .ProfileImageEtc {
      position: absolute;
      width: 372px;
      height: 495px;
      text-align: center;
      margin-top: 50px;
      left: calc(50% - 400px)
  }
  .ProfileImageEtc > img {
      width: 200px;
      height: 200px;
      margin-top: 35px;
  }
  .ProfileImageEtc > h2 {
      margin-top: 5px;
      margin-bottom: 2px;
      font-size: xx-large;
      
  }
  .ProfileImageEtc > h4 {
      color: var(--slightly-darker-white);
  }

  .contactB-list {
      position: absolute;
      right: calc(50% - 400px);
      margin-top: 50px
      
  }
  .contactB-list > a {
      text-decoration: none;
      position: relative;
  }

  .contactB-list > h3 {
      font-size: xx-large;
      position: relative;
      top: 25px;
      left: 0px;
  }
  .contactB-list > a {
      position: relative;
      top: 15px;
  }
  .contactB {
      width: 300px;
      height: 60px;
      border-radius: 10px;
      background-color: var(--item-color);

      position: relative;
      margin-top: -15px;

      color: white;

      box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
  }
  .contactB:hover {
      box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.2);
      transform: translateY(1px);
      transition: 150ms all;
  }
  
  .contactB > p {
      font-size: 30px;
      padding-top: 13px;
      text-align: center;
  }
  #cont-email-icon {
      position: absolute;
      padding-top: 7px;
      margin-left: -130px;
  }
  #cont-github-icon {
      position: absolute;
      padding-top: 7px;
      margin-left: -130px;
  }
  #cont-hackerone-icon {
      position: absolute;
      padding-top: 7px;
      margin-left: -130px;
  }
  #cont-bsky-icon {
      position: absolute;
      padding-top: 7px;
      margin-left: -130px;
      color: whitesmoke;
      font-size: 2.8em;
  }
  .aboutmecardline {
      position: absolute;
      top: 570px;
      width: 60%;
      left: 20%;
      border-top: 3px solid var(--item-color);
      margin: 20px 0;
      border-radius: 3px;
  }
  .projects {
      align-items: center;
      background-color: var(--bg-color);
      display: flex;
      justify-content: center;
      margin: 0px;
      overflow: hidden;
      padding: 10px;
  }
  #cards {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;  
      max-width: 1000px;
      left: 50%;
      width: calc(100% - 20px);
      display: flex;
      justify-content: center;
  }

  #cards:hover > .card::after {
    opacity: 1;
  }

  .card {
      background-color: rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      cursor: pointer;
      display: flex;
      height: 400px;
      flex-direction: column;
      position: relative;
      width: 300px;  
      transition: transform 200ms;
      color: whitesmoke;
  }

  .card:hover::before {
      opacity: 1;
  }

  .card:hover {
  transform: scaleY(1.05);
  transition: transform 300ms;
  }

  .card::before,
  .card::after {
  border-radius: inherit;
  content: "";
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  transition: opacity 300ms;
  width: 100%;
  }

  .card::before {
      background: radial-gradient(
          800px circle at var(--mouse-x) var(--mouse-y), 
          rgba(255, 255, 255, 0.06),
          transparent 40%
      );
      z-index: 3;
  }

  .card::after {  
      background: radial-gradient(
          600px circle at var(--mouse-x) var(--mouse-y), 
          rgba(255, 255, 255, 0.4),
          transparent 40%
      );
      z-index: 1;
  }

  .card > .card-content {
      background-color: var(--card-color);
      border-radius: inherit;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      inset: 1px;
      padding: 10px;
      position: absolute;
      z-index: 2;
  }

  i {  
      color: rgb(240, 240, 240);
  }

  .card-image {
      align-items: center;
      display: flex;
      height: 140px;
      justify-content: center;
      overflow: hidden;
  }

  .card-image > i {
      position: absolute;
      font-size: 7em;
      opacity: 0.25;
      top: 100px;
  }

  .card-info-wrapper {
      align-items: center;
      display: flex;
      flex-grow: 1;
      justify-content: flex-start;
      padding: 0px 20px;
  }

  .card-info {
      align-items: flex-start;
      display: flex;
      gap: 10px;
  }

  .card-info > i {  
      font-size: 1em;
      height: 20px;
      line-height: 20px;
  }

  .card-info-title > h3 {
      font-size: 1.1em;
      line-height: 20px;
  }

  .card-info-title > h4 {
      color: rgba(255, 255, 255, 0.5);
      font-size: 0.85em;
      margin-top: 8px;
  }
  h3, h4, span {
      color: rgb(240, 240, 240);
      font-family: "Rubik", sans-serif;
      font-weight: 400;
      margin: 0px;
  }
  /* non-firefox dark scrollbar */
  body::-webkit-scrollbar {           
      width: 15px;
      height: 15px;
  }
  body::-webkit-scrollbar-track-piece  {          
      background-color: #202324;
  }
  body::-webkit-scrollbar-thumb:vertical {
      height: 30px;
      background-color: #585d60;
  }
  /* Timeline Container */
  .timeline {
      background: var(--primary-color);
      margin: 20px auto;
      padding: 20px;
      display: flex;
      justify-content: center;
  }

  /* Card container */
  .timecard {
    position: relative;
    max-width: 1000px;
  }
  
  /* setting padding based on even or odd */
  .timecard:nth-child(odd) {
      padding: 30px 0 30px 30px;
  }
  .timecard:nth-child(even) {
      padding: 30px 30px 30px 0;
  }
  /* Global ::before */
  .timecard::before {
      content: "";
      position: absolute;
      width: 50%;
      border: solid #303436;
  }
  
  /* Setting the border of top, bottom, left */
  .timecard:nth-child(odd)::before {
      left: 0px;
      top: -4.5px;
      bottom: -4.5px;
      border-width: 5px 0 5px 5px;
      border-radius: 50px 0 0 50px;
  }
  
  /* Setting the top and bottom to "-5px" because earlier it was out of a pixel in mobile devices */
  @media only screen and (max-width: 400px) {
      .timecard:nth-child(odd)::before {
          top: -5px;
          bottom: -5px;
      }
  }

  /* Setting the border of top, bottom, right */
  .timecard:nth-child(even)::before {
      right: 0;
      top: 0;
      bottom: 0;
      border-width: 5px 5px 5px 0;
      border-radius: 0 50px 50px 0;
  }
  
  /* Removing the border if it is the first card */
  .timecard:first-child::before {
      border-top: 0;
      border-top-left-radius: 0;
  }
  
  /* Removing the border if it is the last card  and it's odd */
  .timecard:last-child:nth-child(odd)::before {
      border-bottom: 0;
      border-bottom-left-radius: 0;
  }
  
  /* Removing the border if it is the last card  and it's even */
  .timecard:last-child:nth-child(even)::before {
      border-bottom: 0;
      border-bottom-right-radius: 0;
  }
  
  /* Information about the timeline */
  .timecardinfo {
      display: flex;
      flex-direction: column;
      background-color: #222222;
      color: gray;
      border-radius: 10px;
      padding: 10px;
      transition: all 200ms;
  }

  .timecard:hover .timecardinfo {
      transform: scale(1.03);
      color: whitesmoke;
      transition: all 400ms;
  }

  /* Title of the card */
  .timecardtitle {
      color: white;
      position: relative;
  }
  
  /* Timeline dot  */
  .timecardtitle::before {
      content: "";
      position: absolute;
      width: 10px;
      height: 10px;
      background: #5d6163;
      border-radius: 999px;
      border: 3px solid green;
  }
  .timecard:hover .timecardtitle::before {
      background: black;
      transition: all 400ms;
  }
  .timecardinfo > h4 {
      color: gray;
  }
  .timecardinfo > p > a {
      color: gray;
  }

  .timecard:hover .timecardinfo > h4 {
      color: whitesmoke;
      transition: all 400ms;
  }
  .timecard:hover .timecardinfo > p > a {
      color: whitesmoke;
      transition: all 400ms;
  }
   /* put date to right side */
   .timecard:nth-child(even) > .timecardinfo > h4 {
      text-align: right;
  }
  /* text right if the card is even */
  .timecard:nth-child(even) > .timecardinfo > p {
      text-align: right;
  }
  /* title right if the card is even */
  .timecard:nth-child(even) > .timecardinfo > .timecardtitle {
      text-align: right;
  }
  
  /* setting dot to the left if the card is odd */
  .timecard:nth-child(even) > .timecardinfo > .timecardtitle::before {
      right: -45px;
  }
  
  /* setting dot to the right if the card is odd */
  .timecard:nth-child(odd) > .timecardinfo > .timecardtitle::before {
      left: -45px;
  }
  .contact-card-wrap {
      display: flex;
      justify-content: center;
  }
  .contact-card {
      background-color: rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      height: 400px;
      width: 80%;  
      color: whitesmoke;
      margin-left: 10%;
      margin-right: 10%;
      max-width: 1000px;
  }
  .contact-card-image {
      font-size: 7em;
      opacity: 0.25;
      margin: 50px;
      position: absolute;
  }
  .contact-card-info-title {
      margin-top: 160px;
      margin-left: 60px;
  }
  .contact-card-info-title > h3 {
      color: lightgray;
  }
  .contact-card-list {
      margin-top: -100px;
  }
  .contact-card-item {
      background-color: rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      height: 60px;
      width: 40%;  
      position: relative;
      right: -55%;
      margin-top: 15px;
  }
  .contact-card-content {
      font-size: 40px;
      align-items: center;
      display: flex;
      height: 60px;
      justify-content: center;
      overflow: hidden;
  }
  .contact-card-item > a {
      text-decoration: none;
  }
  /* scroll button, down right */
  #scrollBtn {
      display: none;
      position: fixed;
      bottom: 20px;
      right: 30px;
      z-index: 99;
      border: none;
      outline: none;
      background-color: rgba(255, 255, 255, 0.1);
      color: white;
      cursor: pointer;
      padding: 15px;
      border-radius: 10px;
      font-size: 18px;
  }

  #scrollBtn:hover {
      background-color: #555; /* Add a dark-grey background on hover */
  }
  /* Full Screen popup */
  .FullscreenPopup {
      width: 90%;
      height: auto;
      background-color: black;
      border-radius: 14px;
      position: sticky;
      left: 5%;
      top: 5%;
      min-height: 400px;
      z-index: 9;
      box-shadow: 0px 0px 100px#FFFFFF;
      display: none; /*--------------------------temp*/
  }

  /* Extra small devices (portrait phones, less than 576px) */
  @media (max-width: 575.98px) {
      .ProfileImageEtc {
          position: absolute;
          width: 372px;
          height: 495px;
          text-align: center;
          margin-top: -100px;
          left: calc(50% - 190px)
      }
      .contactB-list {
          position: absolute;
          right: calc(50% - 150px);
          margin-top: 220px;
      }
      .inner-header {
          height: 82vh;
      }
      p {
          font-size: 200%;
      }
      h1 {
          font-size: 400%;
      }
      h2 {
          font-size: 300%;
      }
      .card-info-title > h3 {
          font-size: 250%;
      }
      .card-info-title > h4 {
          font-size: 200%;
      }
      .card {
          width: 500px;
      }
      .timecardinfo > h3 {
          font-size: 250%;
      }
      .timecardinfo > h4 {
          font-size: 200%;
      }
      .timecardinfo > p {
          font-size: 200%;
      }
      .card-info > i {
          font-size: 200%;
      }
      li {
          font-size: 150%;
      }
      .social-media-icons {
          font-size: 140%;
          margin-top: 80px;
      }
      #h1-icon {
          transform: scale(1.8, 1.8) translateY(-10px);
          margin: 15px;
      }
      #h1-icon:hover {
          transform: scale(2, 2) translateY(-8px);
          transition: all 200ms;
      }
      .bottom {
          height: 300px;
  }
  }

  /* Small devices (landscape phones, 576px and up) */
  @media (min-width: 576px) and (max-width: 767.98px) {
      .ProfileImageEtc {
          position: absolute;
          width: 372px;
          height: 495px;
          text-align: center;
          margin-top: -100px;
          left: calc(50% - 190px)
      }
      .contactB-list {
          position: absolute;
          right: calc(50% - 150px);
          margin-top: 230px;
      }
      .inner-header {
          height: 80vh;
      }
      p {
          font-size: 200%;
      }
      h1 {
          font-size: 400%;
      }
      h2 {
          font-size: 300%;
      }
      .card-info-title > h3 {
          font-size: 250%;
      }
      .card-info-title > h4 {
          font-size: 200%;
      }
      .card {
          width: 560px;
      }
      .timecardinfo > h3 {
          font-size: 250%;
      }
      .timecardinfo > h4 {
          font-size: 200%;
      }
      .timecardinfo > p {
          font-size: 200%;
      }
      .card-info > i {
          font-size: 200%;
      }
      li {
          font-size: 150%;
      }
      #social-media-icons {
          font-size: 180%;
      }
      #h1-icon {
          transform: scale(2, 2) translateY(-10px);
          margin: 20px;
      }
      #h1-icon:hover {
          transform: scale(2.3, 2.3) translateY(-8px);
          transition: all 200ms;
      }
  }

  /* Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) and (max-width: 991.98px) {
      p {
          font-size: 200%;
      }
      h1 {
          font-size: 400%;
      }
      h2 {
          font-size: 300%;
      }
      .card-info-title > h3 {
          font-size: 250%;
      }
      .card-info-title > h4 {
          font-size: 200%;
      }
      .card {
          width: 770px;
      }
      .timecardinfo > h3 {
          font-size: 250%;
      }
      .timecardinfo > h4 {
          font-size: 200%;
      }
      .timecardinfo > p {
          font-size: 200%;
      }
      .card-info > i {
          font-size: 200%;
      }
      li {
          font-size: 200%;
      }
      #social-media-icons {
          font-size: 250%;
      }
      #h1-icon {
          transform: scale(2.5, 2.5) translateY(-10px);
          margin: 30px;
      }
      #h1-icon:hover {
          transform: scale(3, 3) translateY(-8px);
          transition: all 200ms;
      }
  }
  /* 1/4 of 1080p */
  @media (min-width: 768px) and (max-width: 991.98px) and (min-height: 100px) and (max-height: 1000px) {
      .contactB-list {
          margin-top: 100px
      }
      .ProfileImageEtc {
          margin-top: 100px;
      }
      .inner-header {
          height: 85vh;
      }
  }