* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  font-size: 62.5%;

  --bg-color-primary: #F15156;
  --bg-color-secondary: #E44449;
  --bg-card-section: hsla(356, 81%, 96%, 0.5);
  --bg-about-section: #FFFFFF;
  
  --tc-primary: #FFFFFF;
  --tc-secondary: #0D3B66;
  --tc-card-section: hsla(0, 0%, 0%, 1);
  --tc-friends-section: hsla(47, 87%, 66%, 1);

  --btn-color-off: #FFFFFF; 
  --btn-color-on: #d4d4d4; 

}

.hide {
  display: none;
  visibility: hidden;
}

body, button {
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
}

section {    
  margin: 0 auto;
  max-width: 68rem;    
  position: relative;
}

strong {
  font-weight: 800;
}

h1 {
  font-weight: 700;
  font-size: 44px;
  line-height: 110%;
  letter-spacing: -0.02em;
}

p {
  font-size: 1.4rem;
}

header {
  padding: 2rem;
  width: 100%;
  height: 8rem;
  background-color: var(--bg-color-secondary);

  display: flex;
  justify-content: space-between;
  align-items: center;

  z-index: 100;
  position: relative;
}

.opened {
  transform: translateY(38rem);
  transition: transform .5s;
}

button {
  border: none;
  background-color: var(--btn-color-off);
  border-radius: .8rem;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
}

button.menu {
  width: 4rem;
  height: 4rem;
}

nav {
  position: absolute;
  background-color: var(--bg-color-secondary);
  width: 100%;

  border-radius: 0 0 2rem 2rem;
  padding: 0 2rem 2.8rem;

  top: -30rem;
  z-index: 100;
}

.line {
  margin-top: 5px;
  width: 100%;
  height: 0px;   
  opacity: 0.2;
  border: 1px solid var(--tc-primary);
}

ul {
  list-style-type: none;

  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding-top: 2.7rem;
}

li a {
  text-decoration: none;

  font-weight: 600;
  font-size: 1.8rem;
  line-height: 110%;
  letter-spacing: -0.02em;

  color: var(--tc-primary);
  opacity: 0.5;
}

li a:hover {
  opacity: 1;
  transition: .7s;
  font-weight: 700;
}

/* Main Section */