@charset "UTF-8";

html {
  font-size: 62.5%;
  overflow-y: scroll;
  scroll-behavior: smooth;
  scroll-padding-top: var(--height-header, 0px);
}

html:has(input[type=email]:focus),
html:has(input[type=number]:focus),
html:has(input[type=password]:focus),
html:has(input[type=search]:focus),
html:has(input[type=tel]:focus),
html:has(input[type=text]:focus),
html:has(input[type=url]:focus) {
  scroll-padding: initial !important;
}

@media (min-width: 768px) and (max-width: 1399px) {
  html{
    font-size: calc(10 * (100vw / 1400));
  }
}

@media (min-width: 1400px) {
  html {
    font-size: 10px;
  }
}

body {
  width: 100%;
  color: var(--color-text-default);
  font-weight: var(--fw-regular);
  line-height: var(--leading-default);
  letter-spacing: var(--tracking-default);
}

.global-container{
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
}

.global-contents{
  padding-bottom: 3rem;
}

.global-content__fluid-wrapper{
  width: var(--container-default);
  margin: auto;
  padding-right: var(--padding-horizontal-global) !important;
  padding-left: var(--padding-horizontal-global) !important;
}

@media (min-width: 768px) {
  .global-contents{
    padding-bottom: 4rem;
  }
}

:where(a){
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
  :where(a):hover {
    opacity: 0.7;
  }
}