* {
  box-sizing: border-box;
}

html, body {
  margin: 20;
}

html {
  scroll-behavior: smooth;
}

.popup {
  font-size: 50px;
  position: fixed;
  color: #172047;
  background-color: #FFFFFF;
  padding: 50px;
  border: 2px #172047 solid;
  text-align: center;
}

nav {
  background-color: #172047;
  position: sticky;
  padding: 20px;
}

.navbutton {
  font-family: "Ubuntu", sans-serif;
  color: #FFFFFF;
  padding: 20px;
  transition: padding 0.2s ease-out;
}
.navbutton:hover {
  padding: 20px 30px;
  transition: padding 0.2s ease-out;
}

.active {
  text-decoration: overline;
}

a {
  text-decoration: none;
}

h1 {
  font-family: "Ubuntu", sans-serif;
  font-size: 50px;
  padding: 0px 40px 20px;
  margin: 0px;
}

h2 {
  font-family: "Ubuntu", sans-serif;
}

h3 {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
}

h4 {
  font-family: "Ubuntu", sans-serif;
  font-size: 16px;
  font-weight: 400;
  padding: 0px 40px 20px;
  margin: 0px;
}

.display-experience {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 5px 5px;
  grid-auto-rows: minmax(50px, auto);
  padding: 30px 0px 0px 0px;
}

.experience {
  font-family: "Ubuntu", sans-serif;
  font-size: 24px;
  font-weight: 400;
  padding: 0px 20px 0px;
  margin: 5px;
  border: 2px #172047 solid;
  padding: 5px;
}
.experience:hover {
  background-color: #172047;
  color: #FFFFFF;
  transition: color 0.2s ease-out, background-color 0.2s ease-out;
}

.click {
  border: 1px #172047 solid;
  display: inline;
  padding: 5px;
  transition: color 0.2s ease-out, background-color 0.2s ease-out;
  vertical-align: bottom;
}
.click.click:hover {
  background-color: #172047;
  color: #FFFFFF;
  transition: color 0.2s ease-out, background-color 0.2s ease-out;
}

/* nesting did not work for just this class for some reason */
.works {
  border: 1px #172047 solid;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 95%;
}
.works.works:hover {
  animation: image-zoom 10s;
}

.arrow {
  width: 100px;
  height: 100px;
  float: right;
}

.traits {
  border: 2px #172047 solid;
  padding: 5px;
  /* filter: blur(2px); */
  transition: 0.2s;
}
.traits.traits:hover {
  border: 2px #FFFFFF;
  /* filter: blur(0px);
  transition: 0.2s; */
}

.red:hover {
  background-color: #FE5F55;
}

.yellow:hover {
  background-color: #FFBC42;
}

.blue:hover {
  background-color: #5A74F6;
}

.display {
  display: grid;
  grid-template-columns: 2fr 1fr; /* repeat(2, 1fr); */
  gap: 60px 5px;
  grid-auto-rows: minmax(100px, auto);
  padding: 30px 0px 0px 0px;
}

section {
  padding: 10px 10px 0px 10px;
}

.workRight {
  text-align: right;
}

.footer {
  text-align: center;
  background-color: #172047;
  color: #FFFFFF;
}

.center {
  text-align: center;
}

@keyframes image-zoom {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.loading-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  /* Initial opacity */
  transform: scale(1);
  /* Initial scale */
  animation: scaleOpacity 1s ease-in-out forwards;
  /* Apply animation */
}

@keyframes scaleOpacity {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.8);
    opacity: 0;
    display: none;
    /* Hide overlay after animation */
  }
}
.loading-spinner {
  border: 9px solid #f3f3f3;
  border-top: 6px solid green;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* @keyframes nav-slide {
    0% {
        transform: translateX(Calc(-50% + 250px));
    }

    100% {
        transform: translateX(0%);
    }
} */
#burger_wrapper {
  position: fixed;
  top: 0px;
  width: 100%;
  padding: 5px;
  display: none;
  z-index: 0;
}

#burger {
  position: block;
  text-align: right;
  font-size: 40px;
}

@media (max-width: 768px) {
  /* display none, change columsn to 2/3 1/3 to have two columns/crop it */
  section {
    grid-column: 1/-1;
  }
  .traits {
    border: 0px;
  }
  #burger_wrapper {
    display: block;
  }
  #topnav {
    display: none;
  }
}/*# sourceMappingURL=index.css.map */