@import url("https://fonts.googleapis.com/css2?family=Concert+One&family=Poppins:wght@100;300;400;500;600;800&family=Spline+Sans:wght@300;400;500;600;700&display=swap");

:root {
  --white: #fff;
  --body: #545d6d;
  --dark: #202631;
  --border-color: rgba(0, 0, 0, 10);
  --border-width: 1px;
  --border-radius: 30px;
}

body {
  font-family: "Spline Sans", sans-serif;
  color: #777;
  line-height: 1.8;
}



a {
  color: var(--body);
  transition: all 0.4s ease;
  text-decoration: none;
  font-weight: 700;
}



a:hover {
  color: var(--dark);
}

.social-links a {
  width: 60px;
  height: 60px;
  background-color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  font-size: 2rem;
  margin-left: 5px;
  text-decoration: none;
}

@media (max-width: 992px) {
  .navbar {
    background-color: #232323;
  }

  .navbar-toggler {
    background-color: var(--white);
  }
}

@media (max-width: 1200px) {
  #hero {
    padding-top: 400px !important;
    padding-bottom: 100px !important;
    text-align: center;
    color: var(--white);
    background: #232323 url(../image/handsome-man-small.jpg) top center no-repeat !important;
    background-size: 600px !important;
  }

  .name {
    font-size: 2.5rem;
  }
}

#hero {
  background: #232323 url(../image/handsome-man.jpg) top right;
  min-height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  padding-top: 300px;
}

#hero h1 {
  color: var(--white);
}

#hero h1 {
  font-weight: 900;
}