/* Overall Site Styles: Header, Buttons, Footer */
/* General Site Styles */
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@700&family=Roboto:wght@400;500;700;900&display=swap");
:root {
  --accentbright: #2196f3;
  --mainbright: #ffffff;
  --mainmid: #757575;
  --maindark: #212121;
  --background: #e5e5e5;
  --footercolor: #2f303a;
  --accentbackground: #f5f4fa;
  --accentbox: #eeeeee;
}

a:link:active {
  cursor: pointer;
}
a:link {
  text-decoration: none;
}

body {
  font-family: roboto;
}

button:hover {
  cursor: pointer;
}

button {
  border-radius: 4px;
}

ul {
  list-style: none;
}

/* Header */
.logo {
  color: var(--accentbright);
  font-family: raleway;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.174;
}

.nav-back {
  background-color: var(--mainbright);
}

.nav-link {
  color: var(--maindark);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.172;
}
.nav-link:hover {
  color: var(--accentbright);
}

.nav-contact {
  color: var(--mainmid);
  font-size: 14px;
  font-weight: 500;
}

.nav-contact:hover {
  color: var(--accentbright);
}

/* Footer */

.foot {
  font-style: normal;
}
.foot-address {
  color: var(--mainbright);
}

.foot-contact {
  color: var(--mainbright);
  opacity: 0.6;
}

/* Studio Page: Hero, Our Features, Our Team */

/* Hero */

.hero-back {
  background-color: var(--footercolor);
}

.hero {
  font-weight: 900;
  color: var(--mainbright);
  font-size: 44px;
  line-height: 1.36;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: roboto;
}

.promobutton {
  font-weight: 700;
  background-color: var(--accentbright);
  color: var(--mainbright);
  font-size: 16px;
  line-height: 1.88;
  letter-spacing: 0.06em;
}

/* Our Features */

.feature-subtitle {
  font-weight: 700;
  line-height: 1.172;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--maindark);
}

.feature-desc {
  color: var(--mainmid);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.714;
  letter-spacing: 0.03em;
}

/* What we Do */

.whatwedo {
  color: var(--maindark);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.172;
  letter-spacing: 0.03em;
}

/* Our Team */

.ourteamback {
  background-color: var(--accentbackground);
}

.ourteamhead {
  color: var(--maindark);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.172;
  letter-spacing: 0.03em;
}

.team-nametag {
  color: var(--maindark);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.172;
  letter-spacing: 0.03em;
}

.team-work {
  font-size: 16px;
  color: var(--mainmid);
  letter-spacing: 0.03em;
}

/* Portfolio Page */

.gallery-button {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.63;
  background-color: var(--accentbackground);
  border: 2px;
  color: var(--maindark);
  font-family: roboto;
  letter-spacing: 0.03em;
}
.gallery-button:hover {
  background-color: var(--accentbright);
  color: var(--mainbright);
}

.art-back {
  background-color: var(--accentbox);
}

.art-name {
  color: var(--maindark);
  font-style: bold;
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0.06em;
}

.art-desc {
  font-size: 16px;
  line-height: 1.88;
  color: var(--mainmid);
  letter-spacing: 0.03em;
}