@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
  --kanit: 'Kanit', sans-serif;
  --roboto: 'Roboto', sans-serif;

  --darkGrayTransparent: rgba(33, 37, 41, 0.7);
  --whiteTransparent: rgba(255, 255, 255, 0.7);
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: var(--roboto);
}

h1, h2, h3 {
  font-family: var(--kanit);
}

body {
  overflow-x: hidden;
}

.navbar-brand {
  width: 42px;
  color: white;
}

.navbar-brand img {
  width: 100%;
  color: white;
}

#navbar-search:hover {
  color: #212529 !important;
}

/* Specify Border-radius to override Bootstrap */
.btn {
  border-radius: 42px;
}

/* Specify Background-color and :hover so opacity transition works over Bootstrap */
.project-button {
  background-color: #212529;
  opacity: 0;
}

.project-button.show {
  opacity: 1;
  background-color: #212529;
  transition: opacity ease-in 0.42s;
  
}

.project-button.show:hover {
  background-color: #424649;
}

/* Project 1 - Expanding Cards */
#p1-pane-1 {
  background: url('img/50-projects-img1.jpg') no-repeat center center/cover;
}

#p1-pane-2 {
  background: url('img/50-projects-img2.jpg') no-repeat center center/cover;
}

#p1-pane-3 {
  background: url('img/50-projects-img3.jpg') no-repeat center center/cover;
}

#p1-pane-4 {
  background: url('img/50-projects-img4.jpg') no-repeat center center/cover;
}

#p1-pane-5 {
  background: url('img/50-projects-img5.jpg') no-repeat center center/cover;
}

.p1-pane {
  cursor: pointer;
  flex: 0.5;
  border-radius: 42px;
  -webkit-transition: all 700ms ease-in;
}
.p1-pane.show {
  cursor: default;  
  flex: 5;
}

.p1-pane h3 {
  border-radius: 0 42px 0 0;
  opacity: 0;
}

.p1-pane.show h3 {
  opacity: 1;
  transition: opacity 0.42s ease-in 0.63s;
}

/* Project 2 - Progress Steps */
.progress-step {
  width: 10%;
  aspect-ratio: 1/1;
  border: 3px solid;
  border-color: #ccc;
  color: #ccc;
  cursor: default;
}

.progress-step.show {
  border-color: #0dcaf0;
  color: #212529;
  transition: 0.42s ease-in;
  transition-delay: 0.4s;
}

#progress-steps::before {
  content:'';
  position: absolute;
  top: 50%;
  display: block;
  background-color: #ccc !important;
  width: 100%;
  height: 3px;
  z-index: -1;
}

#progress-line {
  width: 0%;
  height: 3px;
  z-index: -1;
  transition: 0.42s ease-in;
}

.progress-button {
  cursor: pointer;
  transition: 0.42s ease-in;
}

.progress-button.not-show {
  background-color: #ccc;
  border: #ccc;
  cursor: default;
  transition: 0.42s ease-in;
}

/*Project 3 - Rotating Nav Animation */
section #p3 {
  overflow-x: hidden;
}
#p3 .content-container {
  transform-origin: top left;
  transition: transform 0.5s linear;
}

#p3 .content-container.show-nav {
  transform: rotate(-20deg);
}

#p3 .content-container #img {
  width: 100%;
  height: 42%;
}

#p3 .content-container p {
  text-align: justify;
}

#p3 .content-container .circle-container {
  top: -105px;
  left: -105px;
}

#p3 .content-container .circle-container .circle {
  width: 210px;
  height: 210px;
  transition: transform 0.5s linear;
}

#p3 .content-container.show-nav .circle {
  transform: rotate(-70deg);
}

#p3 .content-container .circle button {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100px;
  background: transparent;
  border: 0;
  font-size: 26px;
  color: #fff;
}

#p3 .content-container .circle button:focus {
  outline: none;
}

#p3 .content-container .circle button#open {
  left: 60%;
}

#p3 .content-container .circle button#close {
  top: 60%;
  transform: rotate(90deg);
  transform-origin: top left;
}

#p3 .content-container.show-nav + nav li {
  transform: translateX(0);
  transition-delay: 0.3s;
}

#p3 nav {
  position: absolute;
  bottom: 40px;
  left: 0;
  z-index: 100;
}

#p3 nav ul {
  list-style-type: none;
  padding-left: 30px;
}

#p3 nav ul li {
  text-transform: uppercase;
  margin: 40px 0;
  transform: translateX(-100%);
  transition: transform 0.4s ease-in;
}

#p3 nav ul li i {
  font-size: 20px;
  margin-right: 10px;
}

#p3 nav ul li + li {
  margin-left: 15px;
  transform: translateX(-150%);
}

#p3 nav ul li + li + li {
  margin-left: 30px;
  transform: translateX(-200%);
}

#p3 nav a, i {
  color: white;
  text-decoration: none;
}

#p3 nav a:hover {
  color: white;
  font-weight: bold;
}

/* Project 4 - Hidden Search Bar */
#p4 .search-button-container {
  width: 42px;
  height: 42px;
  transition: 0.3s ease;
  cursor: pointer;
}

#p4 input {
  height: 42px;
  border: 0;
  width: 0;
  transition: 0.3s ease;
}

#p4 input::placeholder {
  color: #5bc0de; /* Bootstrap info */
  opacity: 1; /* Firefox */
}

#p4 input::-ms-input-placeholder { /* Edge 12 -18 */
  color: #5bc0de; /* Bootstrap info */
}

#p4 input:focus, #p4 .search-button-container:focus {
    outline: none;
}

/* Project 5 - Blurry loading */
#p5 .background-img {
  background: url('img/50-projects-img4.jpg') no-repeat center center/cover;

  /* Add the blur effect */
  filter: blur(14px);
  /* transition: 3s ease; //Only for my solution*/
}

#p5 .button-init {
  color: white;
  background-color: #212529;
  padding: 0.3rem 1rem;
  border: 2px solid #212529;
  border-radius: 42px;
  font-size: 21px;
  font-family: var(--kanit);
  font-weight: 700;
  opacity: 1;
  cursor: pointer;
  visibility: visible;
  /* transition: 3s ease; // Only for my Soltuion*/
}

#p5 .button-init:hover {
  color:#212529;
  background-color: white;
}

#p5 .button-clicked, #p5 .button-clicked:hover {
  color: white;
  padding: 0.3rem 1rem;
  font-family: var(--kanit);
  font-weight: 700;
  opacity: 1;
  font-size: 42px;
  background: transparent;
  border: 2px solid transparent;
  cursor: default;
}

#p5 .button-finished {
  visibility: hidden;
}

/* Project 6 - Scroll Slide-in animation */
section#p6 {
  height: 200vh;
}

#p6 .card-container {
  height: 10%;
}

#p6 .scroll-card {
  height: 100%;
}

#p6 .card-right {
  left: 100%;
  transition: 1s ease;
}

#p6 .card-left {
  right: 100%;
  transition: 1s ease;
}

/* Project 7 - Split Landing Pages */
#p7 #landing-left {
  flex: 3;
  background: url('img/50-projects-img2.jpg') no-repeat center center/cover;
  transition: 0.84s ease;
}

#p7 #landing-left h1 {
  padding: 1rem 2rem;
  background-color: var(--darkGrayTransparent);
  color: white;
  border-radius: 42px;
}

#p7 #landing-right {
  flex: 1;
  background: url('img/50-projects-img4.jpg') no-repeat center center/cover;
  transition: 0.84s ease;
}

#p7 #landing-right h1 {
  padding: 1rem 2rem;
  background-color: var(--whiteTransparent);
  color: #212529;
  border-radius: 42px;
}

/* Project 8 - Wavy Form Input */
form .maik-form-control {
  margin-bottom: 2rem;
}

.maik-form-control input {
  height: 42px;
}

.maik-form-control label {
  top: 21%;
  left: 3%;
}

.maik-form-control label span {
  display: inline-block;
  font-size: 18px;
  min-width: 5px;
  transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.maik-form-control input:focus + label span,
.maik-form-control input:valid + label span {
  color: #ffc107;
  transform: translateY(-36px);
}

.maik-form-control p {
  padding: 1rem 0;
  color: white;
  text-align: left;
}

.maik-form-control p a {
  color: #ffc107;
  text-decoration: none;
}

.maik-form-control p a:hover {
  color: #0dcaf0;
}

/* Project 10 - Dad Jokes */
#p10 #dad-jokes-container a {
  color: white;
}

#p10 #dad-jokes-container a:hover {
  color: #dc3545;
}

/* Project 11 - Event Key Codes */
#p11-keys-container h3{
  font-size: 14px;
}

/* Project 12 - FAQ Collapse */
#p12-faqs-container .faq-card {
  flex: 0.1;
  background-color: white;
  transition: 0.42s ease;
}

.faq-card .faq-card-text h3 {
  font-size: 18px;
}

.faq-card .faq-card-text p {
  font-size: 18px;
  display: none;
}

.faq-card.cardActive::before,
.faq-card.cardActive::after {
  content: '\f075';
  font-family: 'Font Awesome 5 Free';
  color: #2ecc71;
  font-size: 3rem;
  position: absolute;
  opacity: 0.2;
  top: 20px;
  left: 20px;
  z-index: 0;
}

.faq-card.cardActive::before {
  color: #3498db;
  top: 0;
  left: 42px;
  transform: rotateY(180deg);
}


.faq-card-btn {
  width: 21px;
  height: 21px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffc107;
  border-radius: 50%;
  font-size: 18px;
  color: #212529;
  cursor: pointer;
}

.faq-card-btn.btnActive {
  background-color: #0dcaf0;
  color: white;
}

/* Project 13 - Random Choice Selector */
#p13 textarea {
  max-height: 25%;
}

.p13-tag {
  background-color: white;
  color: #212529;
  border-radius: 42px;
  padding: 10px 20px;
  margin: 0 5px 10px 0;
  font-size: 14px;
  display: inline-block;
}

.p13-tag.highlight {
  background-color: #0dcaf0;
  color: white;
}

/* Project 14 - Animated Navigation */
section#p14 {
  background-color: #eafbff;
  background-image: linear-gradient(
    to bottom,
    #eafbff 0%,
    #eafbff 50%,
    #0dcaf0 50%,
    #0dcaf0 100%
  );
  font-family: 'Muli', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

#p14-nav {
  background-color: #fff;
  padding: 20px;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: width 0.6s linear;
  overflow-x: hidden;
}

#p14-nav.p14-active {
  width: 350px;
}

#p14-nav ul {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 0;
  transition: width 0.6s linear;
}

#p14-nav.p14-active ul {
  width: 100%;
}

#p14-nav ul li {
  transform: rotateY(0deg);
  opacity: 0;
  transition: transform 0.6s linear, opacity 0.6s linear;
}

#p14-nav.p14-active ul li {
  opacity: 1;
  transform: rotateY(360deg);
}

#p14-nav ul a {
  position: relative;
  color: #000;
  text-decoration: none;
  margin: 0 10px;
}

.p14-icon {
  background-color: #fff;
  border: 0;
  cursor: pointer;
  padding: 0;
  position: relative;
  height: 30px;
  width: 30px;
}

.p14-icon:focus {
  outline: 0;
}

.p14-icon .p14-line {
  background-color: #dc3545;
  height: 2px;
  width: 20px;
  position: absolute;
  top: 10px;
  left: 5px;
  transition: transform 0.6s linear;
}

.p14-icon .p14-line2 {
  top: auto;
  bottom: 10px;
}

#p14-nav.p14-active .p14-icon .p14-line1 {
  transform: rotate(-765deg) translateY(5.5px);
}

#p14-nav.p14-active .p14-icon .p14-line2 {
  transform: rotate(765deg) translateY(-5.5px);
}

/* Project 15 - Incrementing Counters */
#p15 h1 {
  font-size: 84px;
  color: white;
}


/* Project 16 - Drink Water */
#p16-meassure {
  border: 7px solid darkblue;
  border-top: transparent;
  border-bottom-left-radius: 42px;
  border-bottom-right-radius: 42px;
  overflow: hidden;
}

#p16 h2#p16-empty {
  background-color: #f8f9fa;
  color: #0dcaf0;
  height: 100%;
  transition: 0.3s ease;
  text-align: center;
  font-size: 21px;
}

#p16 h2#p16-full {
  background-color: #0dcaf0;
  color: white;
  height: 0;
  transition: 0.3s ease;
  visibility: hidden;
}

#p16 .drink {
  border: 3px solid darkblue;
  border-top: transparent;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  color: darkblue;
  align-self: center;
  cursor: pointer
}

#p16 .drink.clicked {
  background-color: #0dcaf0;
  color: white;
}

/* Project 17 - Movie App */
#p17 #p16-center-container {

}

#p17-nav {
  
}

#p17-nav form input {
  border-style: initial;
  border-radius: 42px;
  border: 7px solid #ffc107;
}

#p17-nav form input:focus {
  border-color: #dc3545;
}

main#p17-movies {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.movie {
  width: 300px;
  margin: 1rem;
  background-color: var(--secondary-color);
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  border-radius: 3px;
}

.movie img {
  width: 100%;
}

.movie-info {
  color: #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap:0.2rem;
  padding: 0.5rem 1rem 1rem;
  letter-spacing: 0.5px;
}

.movie-info h3 {
  margin-top: 0;
}

.movie-info span {
  background-color: var(--primary-color);
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  font-weight: bold;
}

.movie-info span.green {
  color: lightgreen;
}

.movie-info span.orange {
  color: orange;
}

.movie-info span.red {
  color: red;
}

.overview {
  background-color: #fff;
  padding: 2rem;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  max-height: 100%;
  transform: translateY(101%);
  overflow-y: auto;
  transition: transform 0.3s ease-in;
}

.movie:hover .overview {
  transform: translateY(0);
}

/* Project 18 */
section#p18 {
  height: 100vh;
  width: 100%;
  z-index: 0;
  background-position: center center;
  background-size: cover;
  transition: 0.42s ease;
}

section#p18::before {
  content: '';
  position: absolute;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100vh;
  z-index: 0;
}

.p18-slider-container {
  position: relative;
  width: 70vw;
  height: 70vh;
  overflow: hidden;
}

.p18-slide {
  position: absolute;
  top: -15vh;
  left: -15vw;
  width: 100vw;
  height: 100vh;
  background-position: center center;
  background-size: cover;
  z-index: 2;
  opacity: 0;
}

.p18-slide.active {
  opacity: 1;
}

section#p18 button {
  position: absolute;
  width: 84px;
  height: 84px;
  border: 3px solid orange;
  background-color: transparent;
  color: white;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

section#p18 button#p18-slider-left {
  left: calc(15vw - 80px);
}

section#p18 button#p18-slider-right {
  right: calc(15vw - 80px);
}

/* Project 19 */
section#p19 {
  background-color: white;
  
}

section#p19.dark {
  background-color: black;
  color: white;
}

section#p19 #p19-toggle-btn {
  width: 100%;
  background-color: black;
  color: white;
  padding: 14px;
  border-radius: 42px;
  cursor: pointer;
}

section#p19 #p19-toggle-btn.dark {
  width: 100%;
  background-color: white;
  color: black;
  padding: 14px;
  border-radius: 42px;
  cursor: pointer;
}

section#p19 #p19-clock-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

section#p19 #clock {
  position: relative;
  width: 200px;
  height: 200px;
}

section#p19 .needle {
  background-color: black;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 65px;
  width: 3px;
  transform-origin: bottom center;
  transition: all 0.5s ease-in linear;
}

section#p19 .needle#hour {
  transform: translate(-50%, -100%) rotate(0deg);
}

section#p19 .needle#minute {
  transform: translate(-50%, -100%) rotate(0deg);
  height: 100px;
}

section#p19 .needle#second {
  transform: translate(-50%, -100%) rotate(0deg);
  height: 100px;
  background-color: #e74c3c;
}

section#p19 .center-point {
  background-color: #e74c3c;
  width: 14px;
  height: 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

section#p19 .center-point::after {
  content: '';
  background-color: black;
  width: 7px;
  height: 7px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

#section#p19 #p19-time {
  font-size: 60px;
}

#section#p19 #p19-date {
  color: #aaa;
  font-size: 14px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

#section#p19 #p19-date .circle {
  background-color: black;
  color: white;
  border-radius: 50%;
  height: 18px;
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 18px;
  transition: all 0.5s ease-in;
  font-size: 12px;
}