.text-vintage {
  font-family: 'Roboto Mono';
}

.text-modern {
  font-family: 'Montserrat';
}

.text-ordinary {
  font-size: 1em;
  color: var(--primary);
  letter-spacing: 3px;
}

#display div {
  margin-bottom: 30px;
}

.line {
  width: 100px;
  height: 3px;
  background: black;
  margin: 25px 0;
}

#description h1 {
  font-size: 4em;
  font-weight: 800;
  font-style: normal;
  font-family: 'Montserrat';
  line-height: 1.1em;
  margin: 0;
}

.wavy {
  margin: 20px 0 25px 0;
}

.wavy svg {
  width: 103px;
  height: 10px;
}

.text-subtitle {
  font-family: 'Montserrat';
  font-weight: 700;
  font-style: normal;
  letter-spacing: 1PX;
  font-size: 1.1em;
}

.text-description {
  font-family: 'Montserrat';
  font-weight: 400;
  font-style: normal;
  font-size: 1em;
  letter-spacing: 1px;
}

#section-priamary {
  margin: 50px 0;
}

@media (min-width: 768px) {
  #section-priamary {
    margin: 75px 0;
  }
}

#project ul {
  list-style: initial;
  padding-left: 20px;
}

#project ul li {
  margin: 15px 0;
}

.link-black-inverse {
  background-color: transparent;
  color: black;
  text-decoration: none;
  background-image: linear-gradient(#000,#000);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  transition: background-size .5s;
  padding-bottom: 1px;
  letter-spacing: 1px;
  font-weight: 400;
  font-size: 1em;
  font-style: normal;
}

.link-black-inverse:hover {
  background-size: 0% 1px;
  color: black;
}

.text-project {
  font-size: 1em;
  letter-spacing: 2px;
}

.text-date {
  font-size: 1em;
  color: var(--primary);
  letter-spacing: 1px;
}

#data {
  margin: 15px 0;
}

.link-blue {
  background-color: transparent;
  color: var(--primary);
  text-decoration: none;
  background-image: linear-gradient(var(--primary),var(--primary));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size .5s;
  padding-bottom: 1px;
  letter-spacing: 1px;
  font-weight: 400;
  font-size: 1em;
  font-style: normal;
}

.link-blue:hover {
  background-size: 100% 1px;
  color: var(--primary);
}

#btn-description {
  font-size: 35px;
  margin-bottom: 20px;
  color: var(--primary);
  cursor: pointer;
}

#dropdown {
  transition: height 0.6s ease-in-out;
  overflow: hidden;
  height: 0;
}

@media (min-width: 768px) {
  #dropdown {
    overflow: hidden;
    height: auto;
  }
}

#dropdown.active {
  height: auto;
  transition: height 0.6s ease-in-out;
}

@media (min-width: 768px) {
  #dropdown.active {
    height: auto;
    transition: height 0.6s ease-in-out;
  }
}

#btn-description .button-efect {
  width: 35px;
  height: 35px;
  transition: .3s ease;
  transform: rotate(0deg);
}

#btn-description .button-efect.active {
  transform: rotate(180deg);
}

.copyright {
  font-size: .9em;
  font-family: 'Roboto Mono';
  letter-spacing: 2px;
  color: var(--primary);
}