nav {
  display: flex;
  justify-content: space-between;
}

#nav_personal {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

header {
  background-color: #333;
}

h1 {
    margin-top: auto;
  margin-bottom: auto;
  font-family: "Science Gothic", sans-serif;
  font-size: x-large;
  text-decoration: none;
}

#logo_personal {
  border: 5px solid orangered;
  border-radius: 25px;
  margin:10px;
}

#person {
  font-family: "Science Gothic", sans-serif;
  font-size: xx-large;
  width: 400px;
  background-color: red;
  display: flex;
  align-items: left;
}

#title_name {
  font-size: x-large;
  color: white;
  margin-top:9%;
  margin-left:3%;
}

.icon {
  display: none;
}

a {
  margin-top: auto;
  margin-bottom: auto;
  font-family: "Science Gothic", sans-serif;
  font-size: x-large;
  color:white;
  text-decoration: none;
}

p{
  font-size: larger;
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

#name {
  color: white;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: large;
}

main {
  background-color:whitesmoke;
  padding:15px;
}

#foot {
  justify-content: space-around;
}

footer {
  background-color: #333;
  color: white;
  font-family: "Science Gothic", sans-serif;
  font-size:small;
}

.topnav{
  display: flex;
  justify-content: space-between;
}

#apps {
  display: flex;
  flex-wrap: wrap;        /* <-- allows wrapping onto the next line */
  gap: 20px;              /* spacing between items (optional) */
  justify-content: center; /* centers your items nicely */
  align-items: center;
  margin-top: 20px;
}

#apps div {
  text-align: center;     /* centers image + text inside each div */
}

.certs {
  width: 300px;           /* adjust size as needed */
  height: auto;
  border-radius:25px;
}

h2{
  font-family: monospace;
  font-size: xx-large;
}

main{
   display: flex;
  flex-direction: row; /* Items arranged horizontally */
  justify-content: center; /* Items centered along the main axis */
  align-items: center; /* Items centered along the cross axis */
  gap: 10px; /* Space between items */
}

.capsule {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  background-color: whitesmoke;
}

.scroll-track {
  display: inline-flex;
  animation: scroll-left 20s linear infinite;
}

.imagerow {
  width: 100px;
  margin-right: 20px;
}

@keyframes scroll-left {
  0% {
    transform: translateX(-30%); /* Off the screen on the left */
  }
  100% {
    transform: translateX(0); /* Fully visible by the end */
  }
}

@keyframes moveAcross {
   0% {
    transform: translateX(0%); /* Start off-screen to the left */
  }
  100% {
    transform: translateX(100vw); /* End off-screen to the right (100vw is 100% of viewport width) */
  }
}

.certs{
  margin-top:100px
}

.widescreen:hover{
  color:black;
  background-color:white;
}

.widescreen{
  display:none;
}

/* Style the navigation menu */
.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
}

/* Style navigation menu links */
.topnav a {
  color: white;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  height:200px;
  padding-top:40px;
}

.icon{
  display:none !important;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active link (or home/logo) */
.active {
  color: white;
  width:100px;
}

@media (max-width:1200px) {

  #title_name{
    display:none;
  }

  #person{
    width:110px;
  }

  footer{
    font-size:x-small;
  }
}