/* ===== GLOBAL ===== */
body{
  margin:0;
  font-family:'Science Gothic',sans-serif;
}

/* ===== NAVIGATION ===== */
.topnav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background-color:#333;
  padding:10px 20px;
  width:100%;
  box-sizing:border-box;
  position:relative;
}

#person{
  display:flex;
  align-items:center;
  text-decoration:none;
  color:white;
}

#logo_personal{
  border:3px solid orangered;
  border-radius:15px;
  margin-right:10px;
}

#title_name{
  font-size:20px;
  color:white;
}

/* LINKS */
.nav-links{
  display:flex;
  gap:25px;
}

.nav-links a{
  color:white;
  text-decoration:none;
  font-size:18px;
  padding:6px 8px;
  border-radius:5px;
  transition:0.2s;
}

.nav-links a:hover{
  background-color:white;
  color:black;
}

/* ===== HAMBURGER ===== */
.hamburger{
  display:none;
  position:relative;
  width:34px;
  height:28px;
  background:none;
  border:none;
  cursor:pointer;
  overflow:visible;
}

.hamburger span{
  position:absolute;
  left:0;
  width:100%;
  height:3px;
  background:white;
  transition:all 0.3s ease;
}

.hamburger span:nth-child(1){top:0;}
.hamburger span:nth-child(2){top:12px;}
.hamburger span:nth-child(3){bottom:0;}

/* X STATE */
.hamburger.active span:nth-child(1){
  top:12px;
  transform:rotate(45deg);
}

.hamburger.active span:nth-child(2){
  opacity:0;
}

.hamburger.active span:nth-child(3){
  top:12px;
  bottom:auto;
  transform:rotate(-45deg);
}

.certis {
  text-decoration:none;
  color:black;
}

/* ===== MOBILE ===== */
@media(max-width:700px){

  .nav-links{
    position:absolute;
    top:70px;
    left:0;
    width:100%;
    background-color:#333;
    flex-direction:column;
    text-align:center;
    display:none;
    padding:15px 0;
    z-index:999;
  }

  .nav-links.show{
    display:flex;
  }

  .nav-links a{
    padding:12px 0;
    text-decoration: none;
  }

  .hamburger{
    display:block;
  }

  #title_name{
    display:none;
  }
}

/* ===== MOVING LOGO SCROLLER ===== */

.capsule{
  width:100%;
  overflow:hidden;
  position:relative;
  background:white;
  margin-top:40px;
}

.scroll-track{
  display:flex;
  width:max-content;
  animation: scroll-left 30s linear infinite;
}

.scroll-row{
  display:flex;
  flex-shrink:0;
}

.imagerow{
  width:100px;
  margin:10px;
  flex-shrink:0;
}

@keyframes scroll-left {

  0%{
    transform: translateX(-50%);
  }

  100%{
    transform: translateX(0);
  }

}

/* ===== STATIC CERTIFICATION LOGOS ===== */

#apps{

  display:flex;
  justify-content:center;

  flex-wrap:wrap; /* allows multiple rows */

  gap:60px; /* spacing between logos */

  padding:60px 20px;

}

/* Each certification block */
#apps div{

  text-align:center;

}

/* Larger logos */
.certs{

  width:180px;
  height:180px;

  object-fit:contain;

}

/* Titles */

#apps h2{

  margin-top:15px;

  font-size:20px;

}

/* ===== FOOTER ===== */

footer{
  background-color:#333;
  color:white;
  text-align:center;
  padding:15px;
}

#foot{
  display:flex;
  justify-content:space-around;
  flex-wrap:wrap;
}

h2{
  text-align:center;
  font-family:monospace;
}