/* Global CSS variables */
:root {
  --spacing-company: 3rem;
  --font-weight: 400;
  --primary: #5e35b1;
}

/* Typography */
h2,
h3,
hgroup> :last-child {
  font-weight: 200;
}

small {
  color: var(--muted-color);
}

/* Header */
.hero {
  background-color: #394046;
  background-image: url("img/sascha-eremin-DNQ-M93tHmA-unsplash-3000x1000.jpg");
  background-position: center;
  background-size: cover;
}

header {
  padding: var(--spacing-company) 0;
}

header hgroup> :last-child {
  color: var(--h3-color);
}

header hgroup {
  margin-bottom: var(--spacing-company);
}

article {
  border-radius: 1rem;
  margin: var(--block-spacing-vertical) var(--block-spacing-horizontal);
}

article>footer{
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

/* Nav */
summary[role="link"].contrast:is([aria-current], :hover, :active, :focus) {
  background-color: transparent;
  color: var(--contrast-hover);
}

/* Main */
@media (min-width: 992px) {
  main .grid {
    grid-column-gap: var(--spacing-company);
  }
}

article {
  position: relative;
  z-index: -1;
  overflow: hidden ;
}

.container {
  max-width: 800px;
  position: relative;
}

a {
  width: 100%;
}

.bg-img {
  height: 1000px;
  background-image: url("petal_teal.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  position: fixed;
  top: -200px; right: 200px; bottom: 0;
  opacity: 20%;
  z-index: -2;
  width: 500px;
  position: absolute;
  transform: rotate(90deg);
}

.pm-logo {
  width:85px;
  height: 45px;
}