@import url('https://fonts.cdnfonts.com/css/segoe-ui-4');
:root {
  font-family: 'Segoe UI', sans-serif;
  --ig-primary-background: #000;
  --ig-text-primary: #f5f5f5;
  --ig-hover-overlay: rgba(255, 255, 255, 0.1);
  --ig-border-navbar: #2e2e2e;
  --tablet-breakpoint: 768px;
  --desktop-breakpoint: 1264px;
}

html {
  box-sizing: border-box;
  font-family: 'Segoe UI', sans-serif;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  display: flex;
  color: black;
  margin: 0;
  padding: 0;
  background-color: var(--ig-primary-background);
  height: 100dvh;
}

main {
  padding: 1rem;
  width: 100%;
  height: 100%;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: white;
}

.link {
  padding: 12px;
  border-radius: 8px;
}

.link > a {
  display: flex;
  align-items: center;
  gap: 16px;
}

.link__text {
  display: none;
}

.navbar {
  width: 100%;
  position: fixed;
  bottom: 0;
  padding: 16px;
  border-top: 1px solid var(--ig-border-navbar);
  display: flex;
  gap: 40px;
}

.navar__container {
  display: flex;
  gap: 16px;
  justify-content: space-evenly;
  width: 100%;
  margin: 0;
  padding: 0;
}

.link__image--profile {
  border-radius: 50%;
}

.link--mobile-hide {
  display: none;
}

.navbar__logo {
  display: none;
}

.navbar__logo .logo__image,
.navbar__logo .logo__isotype {
  display: none;
}

.navbar__more {
  display: none;
}

/* Tablet Device */

@media (min-width: 768px) {
  .navbar {
    position: inherit;
    width: auto;
    border-top: none;
    border-right: 1px solid var(--ig-border-navbar);
    flex-direction: column;
    align-items: center;
  }

  .navbar__logo {
    display: flex;
    padding: 24px 0 0 0;
  }

  .navbar__logo .logo__isotype {
    display: flex;
  }

  .navar__container {
    flex-direction: column;
    flex: 1;
    justify-content: start;
  }

  .navbar__more {
    width: 100%;
    display: flex;
    gap: 16px;
  }

  .link--mobile-hide {
    display: flex;
  }

  .link:hover {
    background-color: #1a1a1a;
    transition: 200ms;
    cursor: pointer;
  }

  .link:hover .link__image {
    transition: 100ms;
    transform: scale(1.05);
  }
}

/* Desktop Device */

@media (min-width: 1264px) {
  .navbar {
    align-items: start;
  }

  .navbar__logo {
    width: 100%;
    display: flex;
    padding: 24px 12px 0 12px;
  }

  .navbar__logo .logo__image {
    width: inherit;
    display: flex;
    justify-content: center;
  }

  .navbar__logo .logo__isotype {
    display: none;
  }

  .navbar .link__text {
    display: block;
    padding-right: 50px;
    color: var(--ig-text-primary);
  }
}