@import url("https://fonts.googleapis.com/css2?family=Sen&display=swap");
/* universal css */
* {
   margin: 0;
   padding: 0;
}

body {
   color: white;
   font-family: "Sen", Arial, Helvetica, sans-serif;
   font-size: 18px;
}

img {
   width: 100%;
}

/* Firefox */
* {
   scrollbar-width: thin;
   scrollbar-color: #636363 #3f3f3f;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
   width: 8px;
}

*::-webkit-scrollbar-track {
   background: #3f3f3f;
}

*::-webkit-scrollbar-thumb {
   background-color: #243335;
   border-radius: 14px;
   border: 4px none #ffffff;
}

/* end of universal css */

/* universal class css */
.hidden {
   display: none !important;
}

.active {
   background-color: rgba(148, 148, 148, 0.2);
}

/* end of universal class css */

.container {
   box-sizing: border-box;
   display: flex;
   height: 100vh;
}

nav {
   background-color: rgb(61, 61, 61);
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-direction: column;
   z-index: 1;

   /* box shadow area*/
   box-shadow: 10px 5px 13px -4px rgba(0, 0, 0, 0.44);
   -webkit-box-shadow: 10px 5px 13px -4px rgba(0, 0, 0, 0.44);
   -moz-box-shadow: 10px 5px 13px -4px rgba(0, 0, 0, 0.44);
   /* box shadow area */
}

.my-logo img {
   top: 5px;
   left: 5px;
   position: absolute;
   width: 60px;
}

nav ul li a {
   display: inline-block;
   margin: 10px auto;
   padding: 12px;
   width: 100%;
   text-decoration: none;
   box-sizing: border-box;
   color: #ddd;
   font-weight: bold;
   transition: 0.5s ease-in-out;
   font-size: 0.8em;
}

nav ul li a:hover {
   color: white;
   background-color: rgb(74, 74, 74);
}

nav ul li a span {
   font-size: 0.7em;
   position: absolute;
}

nav .copyright p {
   font-size: 0.6em;
   box-sizing: border-box;
   text-align: center;
   margin: 5px auto;
}

.container-copy .love {
   cursor: pointer;
}

main {
   position: relative;
   width: 100%;
   background-color: #333;
   height: 100vh;
   overflow: auto;
   box-sizing: border-box;
   padding: 15px;
   display: flex;
   justify-content: center;
}

main::-webkit-scrollbar {
   display: none;
}

.container-body {
   position: absolute;
   width: 90%;
   display: grid;
   grid-template-areas: "kiri kanan";
   grid-template-columns: 1fr 1fr;
   box-sizing: border-box;
   align-items: center;
   height: 95%;
   background-color: rgb(63, 63, 63);
   padding: 30px;
   border-radius: 10px;
   margin: inherit !important;
   position: absolute;
   overflow: auto;
}

.outSlideRightHome {
   right: 65px;
   animation-name: slideAnimationHomeOut;
   animation-duration: 1s;
   animation-fill-mode: forwards;
}

.inSlideRightHome {
   left: -1500px;
   animation-name: slideAnimationHome;
   animation-duration: 1s;
   animation-fill-mode: forwards;
}

.container-body::-webkit-scrollbar {
   display: none;
}

.container-body .kiri {
   grid-area: kiri;
   padding: 20px;
   box-sizing: border-box;
}

.kiri h2 {
   color: aqua;
   font-size: 1.9em;
}

.kiri h1 {
   box-sizing: border-box;
   font-size: 3.4em;
   font-weight: bold;
}

.kiri .contact-top {
   margin-top: 20px;
}

.kiri .contact-top img {
   width: 50px;
   opacity: 70%;
   transition: 0.3s ease-in-out;
}

.kiri .contact-top img:hover {
   opacity: 100%;
}

.kiri .subtitle {
   box-sizing: border-box;
   padding-top: 50px;
}

.container-body .kanan {
   width: 100%;
   display: flex;
   grid-area: kanan;
   justify-content: end;
   transition: 0.5s ease-in-out;
}

.container-body .kanan img {
   width: 450px;
   border-radius: 50%;
   transition: 0.5 ease-in-out;
}

.container-body .kanan img:hover {
   box-shadow: none;
   animation-name: imghover;
   animation-duration: 1s;
   animation-fill-mode: forwards;
}

/* bagian keyframe */
@keyframes slideAnimationHome {
   to {
      left: 64px;
   }
}
@keyframes slideAnimationHomeOut {
   to {
      right: -1500px;
   }
}

@keyframes imghover {
   from {
      box-shadow: none;
   }
   to {
      box-shadow: 0px 1px 125px -32px rgba(255, 255, 255, 0.75);
      -webkit-box-shadow: 0px 1px 125px -32px rgba(255, 255, 255, 0.75);
      -moz-box-shadow: 0px 1px 125px -32px rgba(255, 255, 255, 0.75);
   }
}

@keyframes playerPick {
   from {
      box-shadow: none;
   }

   to {
      box-shadow: 0px 0px 23px 0px rgba(0, 255, 73, 0.75);
      -webkit-box-shadow: 0px 0px 23px 0px rgba(0, 255, 73, 0.75);
      -moz-box-shadow: 0px 0px 23px 0px rgba(0, 255, 73, 0.75);
   }
}

/* skills page */

.container-skills {
   position: absolute;
   width: 90%;
   height: 94%;
   margin: 2px auto;
   box-sizing: border-box;
   background-color: rgb(63, 63, 63);
   overflow: auto;
   padding: 30px;
   border-radius: 10px;
}

.container-skills::-webkit-scrollbar {
   display: none;
}

.container-skills .title h1 {
   text-align: center;
}

.list-skills {
   display: flex;
   flex-wrap: wrap;
   justify-content: center !important;
   transition: 1s ease-in-out;
   box-sizing: border-box;
}

.card-skills {
   padding: 40px;
   box-sizing: border-box;
   background-color: rgb(39, 39, 39);
   margin: 10px 10px;
   border-radius: 20px;
   text-align: center;
   transition: 0.4s ease-in-out;
}

.card-skills:hover {
   background-color: rgb(35, 35, 35);
}

.card-skills:hover > img {
   width: 120px;
}

.card-skills img {
   transition: 0.4s ease-in-out;
   width: 100px;
   border-radius: 20px;
}

.card-skills h5 {
   color: #ddd;
   font-size: 0.7em;
   margin-top: 10px;
}

/* contact page */

.container-contact {
   display: flex;
   flex-direction: column;
   width: 90%;
   height: 95%;
   background-color: rgb(68, 68, 68);
   padding: 20px;
   box-sizing: border-box;
   border-radius: 10px;
   color: #ddd;
   justify-content: center;
   overflow: auto;
   position: absolute;
}

.container-contact::-webkit-scrollbar {
   display: none;
}
.container-contact .title {
   margin-bottom: 10px;
}

.form form {
   display: flex;
   flex-direction: column;
}

.form form > * {
   box-sizing: border-box;
   margin-bottom: 20px;
}

.form form input {
   font-family: "sen", Arial, Helvetica, sans-serif;
   outline: none;
   background-color: #333;
   border: none;
   color: #ddd;
   padding: 10px;
   box-sizing: border-box;
   font-size: 0.8em;
   width: 40%;
   transition: 0.5s ease-in-out;
   border-radius: 5px;
}
.form form textarea {
   font-family: "sen", Arial, Helvetica, sans-serif;
   outline: none;
   background-color: #333;
   border: none;
   color: #ddd;
   padding: 10px;
   box-sizing: border-box;
   font-size: 0.8em;
   width: 40%;
   transition: 0.5s ease-in-out;
   border-radius: 5px;
}

.form form input:focus {
   outline: 1px solid cyan;
}

.form form textarea:focus {
   outline: 1px solid cyan;
}

.container-contact .form .another-way {
   display: inline-flex;
   color: #ddd;
   font-size: 0.8em;
   background-color: #333;
   padding: 5px;
   border-radius: 3px;
}

.container-contact .form .another-way a {
   display: inline-block;
   color: #ddd;
   text-decoration: none;
   margin-left: 5px;
}

/* project page */

.container-project {
   display: grid;
   justify-content: center;
   grid-template-rows: 40px 1fr;
   grid-template-columns: 1fr;
   height: 100%;
   width: 90%;
   position: absolute;
}

.project-bar {
   width: 100%;
}

.project-bar ul {
   display: flex;
   list-style-type: none;
   justify-content: center;
   align-items: center;
   height: 100%;
}

.project-bar ul li {
   position: relative;
   color: #ddd;
   box-sizing: border-box;
   margin-left: 10px;
   padding: 8px;
   border-radius: 5px;
   background-color: rgb(80, 80, 80);
   font-size: 1em;
   cursor: pointer;
}

.project-bar ul li .badge {
   border-radius: 2px;
   box-sizing: border-box;
   position: absolute;
   font-size: 0.6em;
   font-weight: bold;
   padding: 3px;
   background-color: red;
   top: -10px;
   right: -5px;
   opacity: 80%;
   transition: 0.5s ease-in-out;
}

.badge:hover {
   color: white;
}

.project-bar ul .non-active {
   cursor: not-allowed;
   background-color: transparent;
}

.project-content {
   position: relative;
   border-radius: 10px;
   margin-top: 15px;
   padding: 20px;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   background-color: rgb(73, 73, 73);
}

.project-content .suit-jawa {
   display: flex;
   flex-direction: column;
   margin-top: 10px;
   position: relative;
}

.player,
.computer {
   color: #ddd;
   display: flex;
   align-items: center;
   flex-direction: column;
   text-align: center;
   margin-bottom: 10px;
   box-sizing: border-box;
   padding: 20px;
   border-radius: 6px;
   background-color: rgb(109, 109, 109);
}

.player > *,
.computer > * {
   margin-bottom: 10px;
}

.player ul {
   display: flex;
}

.player ul li {
   margin: 10px;
   opacity: 80%;
}

.player ul li img:hover {
   border-radius: 50%;
   animation-name: playerPick;
   animation-duration: 1s;
   animation-fill-mode: forwards;
   opacity: 100%;
   cursor: pointer;
}

.computer .img-computer {
   width: 150px;
}

.semut,
.orang,
.gajah,
.img-computer {
   width: 100px;
   transition: 0.5s ease;
}

.info-match {
   box-sizing: border-box;
   position: absolute;
   height: 30px;
   border-radius: 5px;
   border: 3px solid rgb(109, 109, 109);
   background-color: rgb(73, 73, 73);
   width: 30%;
   top: 197px;
   left: 140px;
   text-align: center;
}

.score-player {
   top: 5px;
   left: 5px;
   position: absolute;
   border: 2px solid none;
   border-radius: 4px;
   color: #ddd;
   text-align: center;
   width: 20px;
   height: 20px;
   background-color: rgb(73, 73, 73);
}
.score-computer {
   position: absolute;
   top: 222px;
   left: 5px;
   border: 2px solid none;
   border-radius: 4px;
   color: #ddd;
   text-align: center;
   width: 20px;
   height: 20px;
   background-color: rgb(73, 73, 73);
}

.reset-score {
   color: #ddd;
   position: absolute;
   padding: 3px;
   font-size: 0.9em;
   font-family: "Sen", Arial, Helvetica, sans-serif;
   background-color: #333;
   border: none;
   right: 20px;
   bottom: 20px;
   border-radius: 5px;
   cursor: pointer;
}

.inspired-by {
   position: absolute;
   font-size: 0.7em;
   bottom: 5px;
   left: 5px;
}

.inspired-by a {
   color: #ddd;
   text-decoration: none;
}

.container-project .coming-soon {
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #3f3f3f;
   height: 95vh;
   border-radius: 10px;
   overflow: hidden;
   position: relative;
   background-image: url("img/bg-coming-soon.png");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-blend-mode: multiply;
}

.container-project .coming-soon h1 {
   font-size: 4em;
}

/* end of project page */

/* css universal */

.list-none {
   list-style-type: none;
}

/* end of css universal */

/*  */

@media screen and (max-width: 675px) {
   .container-body {
      grid-template-areas:
         "kanan"
         "kiri";
      grid-template-columns: 1fr;

      width: 92%;
      padding: 5px;
   }

   .container-body .kiri {
      padding: 0px;
      font-size: 0.9em;
   }

   .container-body .kanan {
      margin-bottom: 40px;
      justify-content: center;
   }

   .container-body .kanan img {
      width: 230px;
      box-shadow: 0px 1px 125px -32px rgba(255, 255, 255, 0.75);
      -webkit-box-shadow: 0px 1px 125px -32px rgba(255, 255, 255, 0.75);
      -moz-box-shadow: 0px 1px 125px -32px rgba(255, 255, 255, 0.75);
   }

   .form form input {
      width: 100%;
   }
   .form form textarea {
      width: 100%;
   }
   .player,
   .computer {
      padding: 10px;
   }

   .semut,
   .orang,
   .gajah {
      width: 70px;
   }

   .player ul li {
      margin: 2px;
   }

   .computer .img-computer {
      width: 120px;
   }

   .score-computer {
      top: 157px;
   }

   .info-match {
      top: 131px;
      left: 84px;
      font-size: 0.7em;
      line-height: 20px;
   }

   .container-project {
      height: 96vh;
   }

   .container-project .coming-soon h1 {
      font-size: 2em;
   }

   /* keyframe responsive */
   @keyframes slideAnimationHome {
      to {
         left: 15px;
      }
   }
   @keyframes slideAnimationHomeOut {
      to {
         right: -1500px;
      }
   }
}