* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

a,
p,
h1,
h4 {
  color: white;
}

a:visited,
a:hover,
a:active {
  color: white;
}

hr {
  width: 20vw;
}

body {
  display: flex;
  flex-direction: column;
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  overscroll-behavior: none;
  text-transform: uppercase;
  width: 100%;
}

.navbar-container {
  position: sticky;
  top: 0;
  left: 0;
  right:0;
  width: 100%;
}

.navbar {
  background: rgba(0 0 0 / 1);
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}

.main-img {
  display: flex;
  align-items: center;
  flex-direction: column;
  background: linear-gradient(to bottom, #0e7490,  #1e40af);
  justify-content: center;
  padding: 100px;
  width:100%;
}

.main-img h1 {
  line-height: 2;
}

.me-image {
  border-radius: 50%;
}

.portfolio-links, .portfolio-links-left {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.portfolio-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding:20px 0;
}

.portfolio-projects {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  flex-wrap: wrap;
  gap: 5px;
}

.around-the-web {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.social-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to top, #0e7490,  #1e40af);
  gap: 20px;
  padding:20px 0;
  margin-top: auto;
}

.portfolio-projects div {
    display: flex;
    flex: 1;
    flex-basis: 33%;
    align-items: center;
    justify-content: center;
}

.social-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.footer-copyright {
  background: rgba(0 0 0 / 1);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

@media screen and (min-width: 2560px) {
  html, body {
      min-height: 100vh;
    }
  .navbar div {
    margin:2rem;
  }
}


@media only screen and (max-width: 650px) {

  body {
    overscroll-behavior: inherit;
  }

  .contact-right,
  .portfolio-right,
  .name, .around-the-web {
    font-size: 0.9rem;
  }

  .main-img h1 {
    line-height: 2;
    width: 100vw;
    text-align: center;
  }

  .main-img p {
    text-align: center;
    width: 75vw;
  }

  #copyright, #contact {
    font-size:0.8rem;
  }

  #portfolio h2 {
    font-size:1.5rem;
  }
}

@media only screen and (max-width: 300px) {
  .contact-right, .portfolio-right, .name, .around-the-web {
    font-size:0.7rem;
  }
}