/* Grid */
body>main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 7rem);
  padding: 1rem 0;
}

article {
  padding: 0;
  overflow: hidden;
}

article div {
  padding: 1rem;
}

@media (min-width: 576px) {
  body>main {
    padding: 1.25rem 0;
  }

  article div {
    padding: 1.25rem;
  }
}

@media (min-width: 768px) {
  body>main {
    padding: 1.5rem 0;
  }

  article div {
    padding: 1.5rem;
  }
}

@media (min-width: 992px) {
  body>main {
    padding: 1.75rem 0;
  }

  article div {
    padding: 1.75rem;
  }
}

@media (min-width: 1200px) {
  body>main {
    padding: 2rem 0;
  }

  article div {
    padding: 2rem;
  }
}

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

/* Hero Image */
article div:nth-of-type(2) {
  display: none;
  background-color: #374956;
  background-image: url("img/alessio-soggetti-8jeWeKdygfk-unsplash-1000x1200.jpg");
  background-position: center;
  background-size: cover;
}

@media (min-width: 992px) {
  .grid>div:nth-of-type(2) {
    display: block;
  }
}

/* Footer */
body>footer {
  padding: 1rem 0;
}

#themes button.theme-switcher:first-of-type {
    --font-weight: bold
}

#themes button.theme-switcher i {
    font-style: normal
}

.switcher {
    position: fixed;
    right: calc(var(--spacing)/ 2 + var(--scrollbar-width, 0px));
    bottom: var(--spacing);
    width: auto;
    margin-bottom: 0;
    padding: .75rem;
    border-radius: 2rem;
    box-shadow: var(--card-box-shadow);
    line-height: 1;
    text-align: right
}

.switcher::after {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: .15rem solid currentColor;
    border-radius: 50%;
    background: linear-gradient(to right, currentColor 0, currentColor 50%, transparent 50%);
    content: "";
    vertical-align: bottom;
    transition: transform var(--transition)
}

.switcher i {
    display: inline-block;
    max-width: 0;
    padding: 0;
    overflow: hidden;
    font-style: normal;
    font-size: .8rem;
    white-space: nowrap;
    line-height: 1rem;
}

.switcher:focus,
.switcher:hover {
    max-width: 100%;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)
}

.switcher:hover::after {
    transform: rotate(180deg)
}

.switcher:hover i {
    max-width: 100%;
    padding: 0 calc(var(--spacing)/ 2) 0 calc(var(--spacing)/ 4);
    transition: max-width var(--transition), padding var(--transition)
}

.switcher:focus {
    box-shadow: var(--card-box-shadow), 0 0 0 .2rem var(--secondary-focus)
}

@media (min-width:576px) {
    .switcher {
        right: calc(var(--spacing) + var(--scrollbar-width, 0px))
    }
}


@media (min-width:576px) {
    .switcher {
        right: calc(var(--spacing) + var(--scrollbar-width, 0px))
    }
}

input:not([type=checkbox],[type=radio],[type=range]){
	height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 1 + var(--border-width) * 1);
}