@font-face {
   font-family: noto;
   src: url(fonts/NotoSansHK-ExtraBold.woff2) format("woff2"),
      url(fonts/NotoSansHK-ExtraBold.woff) format("woff");
   font-weight: 800;
   font-display: swap;
}

@font-face {
   font-family: noto;
   src: url(fonts/NotoSansHK-SemiBold.woff2) format("woff2"),
      url(fonts/NotoSansHK-SemiBold.woff) format("woff");
   font-weight: 600;
   font-display: swap;
}

@font-face {
   font-family: noto;
   src: url(fonts/NotoSansHK-Light.woff2) format("woff2"),
      url(fonts/NotoSansHK-Light.woff) format("woff");
   font-weight: 300;
   font-display: swap;
}


body {
   margin: 0;
   padding: 0;

   min-width: 100%;
   min-height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;

   font-family: 'noto';
   font-size: 24px;
   font-weight: 300;

   background-color: rgba(0, 0, 0, 1);
   background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgb(57, 0, 76) 100%);
}


h1 {
   font-size: 50px;
   font-family: 'noto', 'sans-serif';
   font-weight: 800;
   letter-spacing: 0.6px;
}

h2 {
   font-size: 34px;
   font-family: 'noto', 'sans-serif';
   font-weight: 600;
   letter-spacing: 0.5px;

}

p {
   font-size: 22px;
}

img {
   border: 0;
   border-radius: 10px;
   color: black;
}

#portrait-image {
   border-radius: 1000px;
}

#container {
   /* padding-top: 40px; */
   justify-content: center;
   align-items: center;
   text-align: center;
   width: 983px;
}

#hero-container {
   /* margin: 40px; */
   /* padding-top: 14px; */
   border-radius: 30px;
   min-width: 90%;
   display: flex;

   flex-direction: column;
   justify-content: space-between;
   align-items: center;

   color: white;
}

.social-media-container {
   margin: 40px;
   margin-top: 110px;
   margin-bottom: 130px;
   /* padding-top: 14px; */

   height: 120px;
   border-radius: 30px;
   min-width: 90%;
   display: flex;

   justify-content: space-around;
   align-items: center;
   text-align: center;

   color: white;
}

.social-media-icon-container {
   width: 100px;
   height: 100px;
   border-radius: 1000px;
   /* background-color: aqua; */
}

.app-container {
   margin-top: 60px;
   /* padding-top: 14px; */

   /* height: 520px; */
   border-radius: 30px;
   min-width: 90%;
   display: flex;

   flex-direction: column;
   justify-content: space-between;
   align-items: center;

   color: white;
}

.app-container h2 {
   margin: 0;
   padding: 0;
   /* background-color: aqua; */
}

.app-container-rectangular {
   margin-top: 60px;
   margin-bottom: 130px;
   /* padding-top: 14px; */

   border-radius: 30px;
   min-width: 90%;
   display: flex;

   flex-direction: column;
   justify-content: space-between;
   align-items: center;

   color: white;
}

.app-container-rectangular img {
   margin-top: 70px;
   /* background-color: blue; */
}

.app-container-rectangular h2 {
   margin: 0;
   padding: 0;
   margin-top: 40px;
   /* background-color: aqua; */
}

.about-me-container {
   margin-bottom: 100px;
   border-radius: 30px;
   min-width: 90%;

   text-align: left;

   color: white;
}

.about-me-container h2 {
   text-align: center;
}

#footer-container {
   /* margin: 40px; */
   min-width: 100%;
   display: flex;

   flex-direction: column;
   justify-content: space-around;

   color: white;

   background: rgb(232, 14, 196);
   background: linear-gradient(270deg, rgba(232, 14, 196, 0.0631267507002801) 0%, rgba(0, 0, 0, 0.8253676470588236) 100%);
}

#footer-container .social-media-container {
   margin: 40px;
   margin-bottom: 50px;
}

#copyright {
   margin: 40px;
   text-align: center;

   font-size: 14px;
   color: rgb(171, 171, 171);
   /* background-color: yellow; */
}


@media screen and (max-width: 1100px) {
   .about-me-container {
      margin-left: 80px;
      margin-right: 80px;
      min-width: 82%;
   }
}

@media screen and (max-width: 964px) {
   #container {
      width: 100%;
   }

   img {
      width: calc(90%);
      height: calc(90%)
   }

   #hero-container img {
      width: 253px;
      height: 253px
   }

   .about-me-container {
      margin-left: 40px;
      margin-right: 40px;
   }

   #copyright {
      margin-left: 46px;
      /* background-color: yellow; */
   }

}

@media screen and (max-width: 724px) {
   #copyright {
      margin-left: 70px;
      /* background-color: yellow; */
   }
}

@media screen and (max-width: 620px) {
   h1 {
      font-size: 34px;
      letter-spacing: 0.76px;

      /* background-color: yellow; */
   }

   h2 {
      font-size: 22px;
      letter-spacing: 0.84px;
   }

   p {
      font-size: 16px;
   }

   .app-container-rectangular {
      margin-left: 16px;
      margin-bottom: 90px;
      max-width: 70%;
      /* background-color: blue; */
   }

   .social-media-container {
      margin-top: 50px;
      margin-bottom: 70px;
      margin-left: 8px;
      min-width: 80%;
      /* background-color: blueviolet; */
   }

   #footer-container .social-media-container {
      margin-top: 0px;
      margin-bottom: 0px;
      /* background-color: blueviolet; */
   }

   .social-media-icon-container {
      width: 50px;
      height: 50px;
      /* border-radius: 1000px; */
      /* background-color: aqua; */
   }

   .about-me-container {
      margin-top: 10px;
      margin-left: 30px;
      margin-right: 60px;
      /* background-color: yellow; */
   }

   #copyright {
      margin-left: 38px;
      /* background-color: yellow; */
   }
}