@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;900&family=Varela+Round&display=swap');

* {
  margin: 0;
  padding: 0;
  color: white;
  font-family: sans-serif;
  text-decoration: none;
  list-style: none;
  letter-spacing: 1px;
  font-family: 'Varela Round', sans-serif;
  font-weight: bold;
}

html {
  box-sizing: border-box;
  background-color: #fff;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

header {
  height: 70px;
  background-color: #1b1b1b;
  color: white;
}

h1 {
  padding: 21px;
  font-size: 28px;

}




.show-m {
  display: none;
}

.hide-m {
  display: flex;
  justify-content: space-around;

}


.flex {
  display: flex;

}

.main-list {
  padding: 20px;
  font-size: 19px;
  position: relative;
}

.sub-ul {
  display: none;
  position: absolute;
  top: 69px;
  left: 18px;
  border-top: 1px solid cyan;

  background-color: #1b1b1b;


  border-radius: 5px;
  padding: 5px;

  width: 106px;
}

.sub-ul li {
  padding: 8px 0;
  font-size: 17px;
  border-bottom: 1px solid black;
}

.sub-ul li a:hover {
  color: cyan;
  font-weight: bold;
}

.sub-of-2 {
  left: 15px;
}


.sub-sub-ul {
  position: absolute;
  top: 80px;
  left: 109px;

  border-top: 1px solid cyan;

  background-color: #1b1b1b;


  border-radius: 5px;
  padding: 5px;

  width: 100px;
  display: none;
}

.mini-projects:hover .sub-sub-ul {
  display: block;

}

.main-link {
  padding: 8px 15px;

}

.main-link:hover {
  color: cyan;
  box-shadow: 0 0 5px cyan;
  border-radius: 5px;
}


.main-list:hover .sub-ul {
  display: block;
}




















/* From uiverse.io by @mrhyddenn */
.loader {
  position: relative;
}

.loader span {
  position: absolute;
  color: #fff;
  transform: translate(-50%, -50%);
  font-size: 35px;
  margin-left: 35px;
  letter-spacing: 3px;
}

.loader span:nth-child(1) {
  color: transparent;
  -webkit-text-stroke: 0.3px rgb(128, 198, 255);
}

.loader span:nth-child(2) {
  color: rgb(128, 198, 255);
  -webkit-text-stroke: 1px rgb(128, 198, 255);
  animation: uiverse723 3s ease-in-out infinite;
}

@keyframes uiverse723 {

  0%,
  100% {
    clip-path: polygon(0% 45%, 15% 44%, 32% 50%,
        54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
  }

  50% {
    clip-path: polygon(0% 60%, 16% 65%, 34% 66%,
        51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
  }
}