:root {
  --secondary: #143a63;
  --primary-color: #0c2d47;
  --primary-text-color: #ffffff;
}

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@900&display=swap');

/* Hero */
#hero {
  margin: 0px 0px 300px 0px;
}

.bg-hero {
  background-image: url('../img/hero.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100vh;
}

.hero-icon a {
  color: #FFF;
  text-decoration: none;
}
/* End Hero */

/* About Section */
#about {
  margin: 0px 0px 100px 0px;
}
/* End About Section*/

/* Skill Section */
#skill {
  margin: 0px 0px 100px 0px;
  background-color: var(--primary-color);
  color: #FFF;
  font-family: 'Lato', sans-serif;
}

#skill .bg-top {
  background-image: url('../img/wave.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100vh;
}

#skill .bg-bot {
  background-image: url('../img/wave.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100vh;
  transform: rotate(180deg);
}
/* End Skill Section */

/* Portofolio Section */
#portofolio {
  margin: 0px 0px 200px 0px;
  font-family: 'Lato', sans-serif;
}

#portofolio .card {
  background-color: #FFF;
  transition: 300ms;
  font-family: 'Lato', sans-serif;
}

#portofolio .card:hover {
  background-color: var(--secondary);
  color: #FFF;
  transition: 300ms;
}

#portofolio .card:hover .btn-primary{
  background-color: #FFF;
  border-color: #FFF;
  color: #000;
  transition: 300ms;
  font-family: 'Lato', sans-serif;
}

#portofolio .card:hover .btn-primary:hover{
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: #FFF;
  transition: 300ms;
  font-family: 'Lato', sans-serif;
}

#portofolio .line {
  width: 40px;
  height: 2px;
  background-color: var(--secondary);
  margin: 20px 30px 0px 0px;
}

#portofolio .title {
  font-family: 'Lato', sans-serif;
  font-size: 2rem;
  color: var(--secondary);
  font-weight: 900;
}

#portofolio .content {
  font-family: 'Lato', sans-serif;
}

#portofolio .content-title {
  font-weight: 900;
  font-size: 3rem;
}

#portofolio .content-body {
  margin-top: 40px;
  font-size: 1.2rem;
  font-family: 'Lato', sans-serif;
}
/* End Portofolio Section */

/* Contact Section */
#contact {
  margin: 0px 0px 0px 0px;
}

.bg-contact {
  background-image: url('../img/bg-contact.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100vh;
}
/* End Contact Section */

/* Footer */
.footer-icon a{
  font-size: 2rem;
  color: #000;
  text-decoration: none;
  font-family: 'Lato', sans-serif;
}
/* End Footer */

/* -------------------- Responsive --------------------*/

/* Desktop */
@media (min-width: 992px) {
  /* Hero Desktop */
  .hero-title {
    font-family: 'Lato', sans-serif;
    text-align: center;
    font-size: 5rem;
    font-weight: 900;
  }

  .sub-hero-title {
    font-family: 'Lato', sans-serif;
    text-align: center;
    font-size: 3rem;
  }
  /* End Hero Desktop */

  /* About Desktop */
  #about .line {
    width: 55px;
    height: 2px;
    background-color: var(--secondary);
    margin: 20px 30px 0px 0px;
  }
  
  #about .title {
    font-family: 'Lato', sans-serif;
    font-size: 2rem;
    color: var(--secondary);
    font-weight: 900;
  }
  
  #about .content {
    font-family: 'Lato', sans-serif;
  }
  
  #about .content-title {
    font-weight: 900;
    font-size: 3rem;
  }
  
  #about .content-body {
    margin-top: 40px;
    font-size: 1.2rem;
  }
  /* End About Desktop */

  /* Skill Desktop */
  #skill .title-light {
    color: #FFF;
    font-weight: 900;
    font-size: 5rem;
    z-index: 2;
    position: relative;
  }

  #skill .sub-title-light {
    color: #FFF;
    font-weight: 900;
    font-size: 2.5rem;
    z-index: 2;
    position: relative;
  }

  #skill .img-title {
    margin: -340px 0px 0px 270px;
    z-index: 1;
    position: relative;
    animation: moveUpAndDown 2s linear infinite;
  }

  #skill .skill-card {
    font-family: 'Lato', sans-serif;
    margin-top: 100px;
  }

  #skill .year-card {
    font-size: 2rem;
    text-align: right;
    border-right: 2px solid #FFF;
    font-weight: 600;
  }

  #skill .title-skill {
    font-size: 2rem;
    font-weight: 600;
  }

  #skill .description {
    font-weight: 500;
  }
  /* End Skill Desktop */
}
/* End Desktop */

/* Tablet */
@media (min-width: 768px) and (max-width: 991px){
  /* Hero Tablet Section */
  .hero-title {
    font-family: 'Lato', sans-serif;
    text-align: center;
    font-size: 5rem;
    font-weight: 900;
  }

  .sub-hero-title {
    font-family: 'Lato', sans-serif;
    text-align: center;
    font-size: 3rem;
  }
  /* End Hero Tablet Section */

  /* About Tablet Section */
  #about .line {
    width: 55px;
    height: 2px;
    background-color: var(--secondary);
    margin: 20px 30px 0px 0px;
  }
  
  #about .title {
    font-family: 'Lato', sans-serif;
    font-size: 2rem;
    color: var(--secondary);
    font-weight: 900;
  }
  
  #about .content {
    font-family: 'Lato', sans-serif;
  }
  
  #about .content-title {
    font-weight: 900;
    font-size: 2rem;
  }
  
  #about .content-body {
    margin-top: 40px;
    font-size: 1.2rem;
  }
  /* End About Tablet Section */

  /* Skill Tablet Section */
  #skill .title-light {
    color: #FFF;
    font-weight: 900;
    font-size: 5rem;
    z-index: 2;
    position: relative;
  }

  #skill .sub-title-light {
    color: #FFF;
    font-weight: 900;
    font-size: 2.5rem;
    z-index: 2;
    position: relative;
  }

  #skill .img-title {
    margin: -340px 0px 0px 270px;
    z-index: 1;
    position: relative;
    animation: moveUpAndDown 2s linear infinite;
  }

  #skill .skill-card {
    font-family: 'Lato', sans-serif;
    margin-top: 100px;
  }

  #skill .year-card {
    font-size: 2rem;
    border-right: 2px solid #FFF;
    font-weight: 600;
    text-align: right;
  }

  #skill .title-skill {
    font-size: 2rem;
    font-weight: 600;
    text-align: left;
  }

  #skill .description {
    font-weight: 500;
    text-align: left;
  }

  .line-space {
    display: none;
  }
  /* End Skill Tablet Section */
}
/* End Tablet */

/* Mobile */
@media (min-width: 476px) and (max-width: 767px) {
  /* Hero Section */
  .hero-title {
    font-family: 'Lato', sans-serif;
    text-align: center;
    font-size: 4rem;
    font-weight: 900;
  }

  .sub-hero-title {
    font-family: 'Lato', sans-serif;
    text-align: center;
    font-size: 2rem;
  }
  /* End Hero Section */

  /* About Mobile Section */
  #about .line {
    width: 40px;
    height: 2px;
    background-color: var(--secondary);
    margin: 20px 30px 0px 0px;
  }
  
  #about .title {
    font-family: 'Lato', sans-serif;
    font-size: 1.5rem;
    color: var(--secondary);
    font-weight: 900;
  }
  
  #about .content {
    font-family: 'Lato', sans-serif;
  }
  
  #about .content-title {
    font-weight: 900;
    font-size: 2rem;
  }
  
  #about .content-body {
    margin-top: 40px;
    font-size: 1.2rem;
    font-family: 'Lato', sans-serif;
  }
  /* End About Mobile Section */

  /* Skill Mobile Section */
  #skill .title-light {
    color: #FFF;
    font-weight: 900;
    font-size: 4rem;
    z-index: 2;
    position: relative;
    margin-bottom: 100px;
  }

  #skill .sub-title-light {
    color: #FFF;
    font-weight: 900;
    font-size: 2rem;
    z-index: 2;
    position: relative;
  }

  #skill .img-title {
    margin: -500px 0px 0px 0px;
    left: 20%;
    z-index: 1;
    position: relative;
    animation: moveUpAndDown 2s linear infinite;
  }

  #skill .skill-card {
    font-family: 'Lato', sans-serif;
  }

  #skill .year-card {
    font-size: 1.5rem;
    text-align: center;
    font-weight: 600;
  }

  #skill .title-skill {
    font-size: 1.8rem;
    text-align: center;
    font-weight: 600;
  }

  #skill .description {
    font-weight: 500;
    text-align: center;
  }

  .line-space {
    position: relative;
    background-color: #FFF;
    height: 150px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px; 
    margin: 50px 0px 50px 0px;
  }
  /* End Skill Mobile Section */
}
/* End Mobile */

/* Small Mobile */
@media (max-width: 475px) {
  /* Hero Section */
  .hero-title {
    font-family: 'Lato', sans-serif;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 900;
  }

  .sub-hero-title {
    font-family: 'Lato', sans-serif;
    text-align: center;
    font-size: 1.1rem;
  }
  /* End Hero Section */

  /* About Small Mobile Section */
  #about .line {
    width: 40px;
    height: 2px;
    background-color: var(--secondary);
    margin: 20px 30px 0px 0px;
  }
  
  #about .title {
    font-family: 'Lato', sans-serif;
    font-size: 1.5rem;
    color: var(--secondary);
    font-weight: 900;
  }
  
  #about .content {
    font-family: 'Lato', sans-serif;
  }
  
  #about .content-title {
    font-weight: 900;
    font-size: 2rem;
  }
  
  #about .content-body {
    margin-top: 40px;
    font-size: 1.2rem;
    font-family: 'Lato', sans-serif;
  }
  /* End About Small Mobile Section */

  /* Skill Section */
  #skill .title-light {
    color: #FFF;
    font-weight: 900;
    font-size: 4rem;
    z-index: 2;
    position: relative;
    margin-bottom: 100px;
  }

  #skill .sub-title-light {
    color: #FFF;
    font-weight: 900;
    font-size: 2rem;
    z-index: 2;
    position: relative;
  }

  #skill .img-title {
    margin: -550px 0px 0px 0px;
    left: 20%;
    z-index: 1;
    position: relative;
    animation: moveUpAndDown 2s linear infinite;
  }

  #skill .skill-card {
    font-family: 'Lato', sans-serif;
  }

  #skill .year-card {
    font-size: 1.5rem;
    text-align: center;
    font-weight: 600;
  }

  #skill .title-skill {
    font-size: 1.8rem;
    text-align: center;
    font-weight: 600;
  }

  #skill .description {
    font-weight: 500;
    text-align: center;
  }

  .line-space {
    position: relative;
    background-color: #FFF;
    height: 150px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px; 
    margin: 50px 0px 50px 0px;
  }
  /* End Skill Section */

  /* Portofolio Section */
  #portofolio .line {
    width: 40px;
    height: 2px;
    background-color: var(--secondary);
    margin: 20px 30px 0px 0px;
  }
  
  #portofolio .title {
    font-family: 'Lato', sans-serif;
    font-size: 1.5rem;
    color: var(--secondary);
    font-weight: 900;
  }
  
  #portofolio .content {
    font-family: 'Lato', sans-serif;
  }
  
  #portofolio .content-title {
    font-weight: 900;
    font-size: 2rem;
  }
  
  #portofolio .content-body {
    margin-top: 40px;
    font-size: 1.2rem;
    font-family: 'Lato', sans-serif;
  }
  /* End Portofolio Section */
}
/* End Small Mobile */

/* Extra Small Mobile */
@media (max-width: 320px) {
  /* Skill Section */
  #skill .img-title {
    margin: -550px 0px 0px 0px;
    left: 20%;
    z-index: 1;
    position: relative;
    animation: moveUpAndDown 2s linear infinite;
  }
  
  #skill .title-light {
    color: #FFF;
    font-weight: 900;
    font-size: 3rem;
    z-index: 2;
    position: relative;
    margin-bottom: 100px;
  }

  #skill .sub-title-light {
    color: #FFF;
    font-weight: 900;
    font-size: 1.5rem;
    z-index: 2;
    position: relative;
  }
  /* End Skill Section */

  /* Footer */
  .footer-icon a{
    font-size: 1.7rem;
    color: #000;
    text-decoration: none;
    font-family: 'Lato', sans-serif;
  }
  /* End Footer */
}
/* End Extra Small Mobile */

/* -------------------- End Responsive -------------------- */


/* -------------------- Blob Animation -------------------- */
@media (min-width: 1200px) {
  .brand-skill1 {
    width: 80%;
    border-radius: 50%;
    box-shadow: 3px 4px 10px #888888;
    position: relative;
    animation: moveUpAndDown 2s linear infinite;
    z-index: 2;
    top: -300%;
  }

  .brand-skill2 {
    width: 80%;
    border-radius: 50%;
    box-shadow: 3px 4px 10px #888888;
    position: relative;
    animation: moveUpAndDown 2s linear infinite;
    z-index: 2;
    top: -130%;
    left: -100%;
  }

  .brand-skill3 {
    width: 160%;
    border-radius: 50%;
    box-shadow: 3px 4px 10px #888888;
    position: relative;
    animation: moveUpAndDown 2s linear infinite;
    z-index: 2;
    top: -200%;
    left: -60%;
  }

  .brand-skill4 {
    width: 150%;
    border-radius: 50%;
    box-shadow: 3px 4px 10px #888888;
    position: relative;
    animation: moveUpAndDown 2s linear infinite;
    z-index: 2;
    top: -340%;
    left: 30%;
  }

  .brand-skill5 {
    width: 180%;
    border-radius: 50%;
    /* box-shadow: 3px 4px 10px #888888; */
    position: relative;
    animation: moveUpAndDown 2s linear infinite;
    z-index: 2;
    top: -80%;
    left: -100%;
  }

  .blob-icon {
    z-index: 0;
    position: relative;
    width: 100%;
  }
}

@media (max-width: 1199px) {
  .brand-skill1 {
    width: 100%;
    border-radius: 50%;
    box-shadow: 3px 4px 10px #888888;
    position: relative;
    animation: moveUpAndDown 2s linear infinite;
    z-index: 2;
    top: -350%;
  }

  .brand-skill2 {
    width: 100%;
    border-radius: 50%;
    box-shadow: 3px 4px 10px #888888;
    position: relative;
    animation: moveUpAndDown 2s linear infinite;
    z-index: 2;
    top: -180%;
    left: -100%;
  }

  .brand-skill3 {
    width: 200%;
    border-radius: 50%;
    box-shadow: 3px 4px 10px #888888;
    position: relative;
    animation: moveUpAndDown 2s linear infinite;
    z-index: 2;
    top: -250%;
    left: -60%;
  }

  .brand-skill4 {
    width: 170%;
    border-radius: 50%;
    box-shadow: 3px 4px 10px #888888;
    position: relative;
    animation: moveUpAndDown 2s linear infinite;
    z-index: 2;
    top: -370%;
    left: 30%;
  }

  .brand-skill5 {
    width: 140%;
    border-radius: 50%;
    /* box-shadow: 3px 4px 10px #888888; */
    position: relative;
    animation: moveUpAndDown 2s linear infinite;
    z-index: 2;
    top: -120%;
    left: -100%;
  }

  .blob-icon {
    z-index: 0;
    position: relative;
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .brand-skill1 {
    width: 120%;
    border-radius: 50%;
    box-shadow: 3px 4px 10px #888888;
    position: relative;
    animation: moveUpAndDown 2s linear infinite;
    z-index: 2;
    top: -500%;
  }

  .brand-skill2 {
    width: 120%;
    border-radius: 50%;
    box-shadow: 3px 4px 10px #888888;
    position: relative;
    animation: moveUpAndDown 2s linear infinite;
    z-index: 2;
    top: -260%;
    left: -120%;
  }

  .brand-skill3 {
    width: 220%;
    border-radius: 50%;
    box-shadow: 3px 4px 10px #888888;
    position: relative;
    animation: moveUpAndDown 2s linear infinite;
    z-index: 2;
    top: -390%;
    left: -100%;
  }

  .brand-skill4 {
    width: 220%;
    border-radius: 50%;
    box-shadow: 3px 4px 10px #888888;
    position: relative;
    animation: moveUpAndDown 2s linear infinite;
    z-index: 2;
    top: -550%;
  }

  .brand-skill5 {
    width: 200%;
    border-radius: 50%;
    /* box-shadow: 3px 4px 10px #888888; */
    position: relative;
    animation: moveUpAndDown 2s linear infinite;
    z-index: 2;
    top: -280%;
    left: -200%;
  }

  .blob-icon {
    z-index: 0;
    position: relative;
    width: 100%;
  }
}

@media (max-width: 767px){
  .hide-animate {
    display: none;
  }
}
/* ----------------  End Blob Animation ---------------- */

/* Animation */
@keyframes moveUpAndDown {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

.full-height {
  height: 100%;
}

.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
  transition: 300ms;
  font-family: 'Lato', sans-serif;
}

.btn-primary:hover {
  background-color: var(--secondary);
  border-color: var(--secondary);
  transition: 300ms;
  font-family: 'Lato', sans-serif;
}

.btn-contact {
  background-color: #FFF;
  border-color: #FFF;
  color: #000;
  transition: 400ms;
  font-family: 'Lato', sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  animation: moveUpAndDown 2s linear infinite;
  padding: 20px;
  width: 150px;
  border-radius: 20px;
}

.btn-contact:hover {
  background-color: var(--secondary);
  border-color: var(--secondary);
  transition: 400ms;
}