/* Neutralizes the default styles applied by browsers */
@import url("reset.css");
@import url('https://fonts.googleapis.com/css2?family=Jaro:opsz@6..72&family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');
 

body {
  background-color: #281914;
}

.background {
  background-image: linear-gradient(45deg, #281914, #F13932, #FCDE02);
  height: 100vh;
  margin: auto;
  aspect-ratio: 4 / 3;
}

h1 {
  font-family: jaro, sans-serif;
  font-size: 64pt;
  text-align: center;
  padding-top: 5%;
  margin-bottom: 5%;
}

h2 {
  font-family: jaro, sans-serif;
  font-size: 48pt;
  color: white;
  text-align: center;
  transition: ease-in-out 250ms;
}

p {
  font-family: public-sans, sans-serif;
  font-size: 14pt;
  color: white;
  font-weight: 300;
  align-self: center;
}

.navigation {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: flex-end;
  margin-bottom: 32px;
  text-align: center;
}

.copy {
  width: 92%;
  margin-left: 5%;
}

.nav-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding: 18px;
}


.main-contain {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 32px;
}

.background-img {
  display: flex;
  justify-content: center;
  background-color: black;
  width: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  flex: 1 1 70%;
}

.background-img img {
  margin: 0 auto;
}

.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  
  flex: 1 1 30%;
}

.detail-body {
  width: 96%;
  padding-left: 32px;
}

.header img:hover {
  scale: 110%;
  transition: ease-out 250ms;
}

.header img:active {
  scale: 97%;
  transition: ease-in 250ms;
}

.nav-bar img:hover {
  scale: 110%;
  transition: ease-out 250ms;
}

.nav-bar img:active {
  scale: 97%;
  transition: ease-in 250ms;
}

.nav-bar h2:hover {
  scale: 110%;
  transition: ease-out 250ms;
}

.nav-bar h2:active {
  scale: 97%;
  transition: ease-in 250ms;
}