@font-face {
  font-family: 'rocgrotesk';
  src: url('../asset/font/rocgrotesk/medium/rocgrotesk-medium.woff2') format('woff2'),
       url('../asset/font/rocgrotesk/medium/rocgrotesk-medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: block;
}

html,
body,
main,
article,
header {
  display: block;
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  height: 100%;
  background: #1d252e;
  background-color: #1d252e;
  scrollbar-width: thin;
}

body {
  width: 100%;
  height: 100%;
  font-family: 'rocgrotesk', sans-serif;
  font-variant: normal;
  font-style: normal;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1em;
  color: #ffffff;
  font-kerning: normal;
  -webkit-font-feature-settings: 'kern' 1;
  font-feature-settings: 'kern' 1;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  background: #1d252e;
  background-color: #1d252e;
  overflow-x: hidden;
}

body:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 19.5rem;
  margin: auto;
  -webkit-mask: var(--svg);
  mask: var(--svg);
  --svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 648 648"><circle cx="324" cy="324" r="324"/></svg>')
  center -38.25rem / 40.5rem 40.5rem no-repeat;
  background-color: #ffffff;
}

h1, p {
  display: block;
  margin: 0;
  padding: 0;
  margin-bottom: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
}

p:last-of-type {
  margin-bottom: 0;
}

a {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
  -webkit-tap-highlight-color: rgba(29,37,46,0);
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.1875rem #0076d5,
  -1px 0 0 0.1875rem rgba(0,118,213,0.18),
  1px 0 0 0.1875rem rgba(0,118,213,0.18);
}

::selection {
  color: #ffffff;
  background-color: #0076d5;
}

main {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  width: 19.5rem;
  min-height: 100%;
  margin: auto;
  font-size: 1.125rem;
  line-height: 1.5em;
  overflow: hidden;
}

article {
  margin: auto 1.125rem 0 1.125rem;
  padding: 4.3125rem 0 2.25rem 0;
}

header {
  display: flex;
  flex-direction: column;
  position: relative;
}

header:before,
header:after,
h1:before {
  content: '';
  position: absolute;
  background:
  repeating-linear-gradient(rgba(29,37,46,0),
  rgba(29,37,46,0) 1.5rem,
  #ffffff 1.5rem,
  #ffffff 1.6875rem);
}

header:before {
  display: none;
}

header:after {
  right: 0;
  bottom: -1.6875rem;
  left: 0;
  height: 2.25rem;
}

header svg {
  flex: 0 0 auto;
  width: 19.5rem;
  height: 19.5rem;
  margin: 0 -1.125rem -0.1875rem -1.125rem;
  fill: #ffffff;
}

h1 {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  margin: 0.140625rem 0 0.421875rem 0;
  font-size: 1.6875rem;
  line-height: 1.3333333em;
  background-color: #1d252e;
}

h1:before {
  display: none;
}

h1 span,
p span {
  position: relative;
}

h1 span:first-of-type {
  left: -0.03515625em;
}

h1 span:nth-of-type(2) {
  align-self: flex-end;
  right: -0.03515625em;
  white-space: nowrap;
}

p {
  display: flex;
  justify-content: space-between;
  margin-top: 1.6875rem;
}

p span:first-of-type {
  left: -0.0234375em;
  width:  calc(100% - 8.4375rem);
}

p span span:first-of-type {
  white-space: nowrap;
}

p span:nth-of-type(2) {
  align-self: flex-end;
  right: -0.0234375em;
  width: 8.4375rem; 
  text-align: right;
  white-space: nowrap;
}

p a {
  padding: 0.1875rem 0 0.1875rem 0;
  white-space: nowrap;
}

@media screen and (min-width: 40.5em) {
  body:before {
    display: none;
  }
  main {
    width: 40.5rem;
  }
  main:after {
    content: '';
    position: absolute;
    top: -38.25rem;
    left: 50%;
    transform: translateX(-50%);
    width: 40.5rem;
    height: 40.5rem;
    margin: auto;
    background-color: #ffffff;
    border-radius: 50%;
  }
  article {
    margin: auto 1.875rem 0 1.875rem;
    padding: 2.0625rem 0 2.25rem 0;
  }
  header {
    flex-direction: row;
    align-items: flex-end;
  }
  header:before {
    display: block;
    top: 0.1875rem;
    right: 0;
    bottom: 0;
    left: 19.5rem;
    height: 15.75rem;
  }
  h1:before {
    display: block;
    top: -1.25rem;
    right: 0.5625rem;
    left: 0.5625rem;
    height: 2.25rem;
    background-position: 100% -1.125rem;
    background-color: #1d252e;
  }
  h1 {
    position: absolute;
    right: 0;
    bottom: 0.421875rem;
    left: 19.5rem;
    margin: 0.140625rem -0.5625rem 0 -0.5625rem;
    padding: 0 0.5625rem 0 0.5625rem;
  }
}

@media screen and (min-width: 54em) and (min-height: 36em) {
  a:focus-visible,
  button:focus-visible,
  [tabindex]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.25rem #0076d5,
    -1px 0 0 0.25rem rgba(0,118,213,0.24),
    1px 0 0 0.25rem rgba(0,118,213,0.24);
  }
  main {
    width: 54rem;
    font-size: 1.5rem;
  }
  main:after {
    top: -51rem;
    width: 54rem;
    height: 54rem;
  }  
  article {
    margin: auto 2.5rem 0 2.5rem;
    padding: 2.75rem 0 3rem 0;
  }
  header:before,
  header:after,
  h1:before {
    background:
    repeating-linear-gradient(rgba(29,37,46,0),
    rgba(29,37,46,0) 2rem,
    #ffffff 2rem,
    #ffffff 2.25rem);
  }
  header:before {
    top: 0.25rem;
    left: 26rem;
    height: 21rem;
  }
  header:after {
    bottom: -2.25rem;
    height: 3rem;
  }
  header svg {
    width: 26rem;
    height: 26rem;
    margin: 0 -1.5rem -0.25rem -1.5rem;
  }
  h1:before {
    top: -1.6666666rem;
    right: 0.75rem;
    left: 0.75rem;
    height: 3rem;
    background-position: 100% -1.5rem;
    background-color: #1d252e;
  }
  h1 {
    bottom: 0.5625rem;
    left: 26rem;
    margin: 0.1875rem -0.75rem 0 -0.75rem;
    padding: 0 0.75rem 0 0.75rem;
    font-size: 2.25rem;
  }
  p {
    margin-top: 2.25rem;
  }
  p span:first-of-type {
    width:  calc(100% - 11.25rem);
  }
  p span:nth-of-type(2) {
    width: 11.25rem; 
  }
  p a {
    padding: 0.25rem 0 0.25rem 0;
  }
}

@media screen and (min-width: 67.5em) and (min-height: 45em) {
  a:focus-visible,
  button:focus-visible,
  [tabindex]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.3125rem #0076d5,
    -1px 0 0 0.3125rem rgba(0,118,213,0.30),
    1px 0 0 0.3125rem rgba(0,118,213,0.30);
  }
  main {
    width: 67.5rem;
    font-size: 1.875rem;
  }
  main:after {
    top: -63.75rem;
    width: 67.5rem;
    height: 67.5rem;
  }
  article {
    margin: auto 3.125rem 0 3.125rem;
    padding: 3.4375rem 0 3.75rem 0;
  }
  header:before,
  header:after,
  h1:before {
    background:
    repeating-linear-gradient(rgba(29,37,46,0),
    rgba(29,37,46,0) 2.5rem,
    #ffffff 2.5rem,
    #ffffff 2.8125rem);
  }
  header:before {
    top: 0.3125rem;
    left: 32.5rem;
    height: 26.25rem;
  }
  header:after {
    bottom: -2.8125rem;
    height: 3.75rem;
  }
  header svg {
    width: 32.5rem;
    height: 32.5rem;
    margin: 0 -1.875rem -0.3125rem -1.875rem;
  }
  h1:before {
    top: -2.083333333rem;
    right: 0.9375rem;
    left: 0.9375rem;
    height: 3.75rem;
    background-position: 100% -1.875rem;
    background-color: #1d252e;
  }
  h1 {
    bottom: 0.703125rem;
    left: 32.5rem;
    margin: 0.234375rem -0.9375rem 0 -0.9375rem;
    padding: 0 0.9375rem 0 0.9375rem;
    font-size: 2.8125rem;
  }
  p {
    margin-top: 2.8125rem;
  }
  p span:first-of-type {
    width:  calc(100% - 14.0625rem);
  }
  p span:nth-of-type(2) {
    width: 14.0625rem; 
  }
  p a {
    padding: 0.3125rem 0 0.3125rem 0;
  }
}

@media screen and (min-width: 81em) and (min-height: 54em) {
  a:focus-visible,
  button:focus-visible,
  [tabindex]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.375rem #0076d5,
    -1px 0 0 0.375rem rgba(0,118,213,0.36),
    1px 0 0 0.375rem rgba(0,118,213,0.36);
  }
  main {
    width: 81rem;
    font-size: 2.25rem;
  }
  main:after {
    top: -76.5rem;
    width: 81rem;
    height: 81rem;
  }
  article {
    margin: auto 3.75rem 0 3.75rem;
    padding: 4.125rem 0 4.5rem 0;
  }
  header:before,
  header:after,
  h1:before {
    background:
    repeating-linear-gradient(rgba(29,37,46,0),
    rgba(29,37,46,0) 3rem,
    #ffffff 3rem,
    #ffffff 3.375rem);
  }
  header:before {
    top: 0.375rem;
    left: 39rem;
    height: 31.5rem;
  }
  header:after {
    bottom: -3.375rem;
    height: 4.5rem;
  }
  header svg {
    width: 39rem;
    height: 39rem;
    margin: 0 -2.25rem -0.375rem -2.25rem;
  }
  h1:before {
    top: -2.5rem;
    right: 1.125rem;
    left: 1.125rem;
    height: 4.5rem;
    background-position: 100% -2.25rem;
    background-color: #1d252e;
  }
  h1 {
    bottom: 0.875rem;
    left: 39rem;
    margin: 0.25rem -1.125rem 0 -1.125rem;
    padding: 0 1.125rem 0 1.125rem;
    font-size: 3.375rem;
  }
  p {
    margin-top: 3.375rem;
  }
  p span:first-of-type {
    width:  calc(100% - 16.875rem);
  }
  p span:nth-of-type(2) {
    width: 16.875rem; 
  }
  p a {
    padding: 0.375rem 0 0.375rem 0;
  }
}

@media screen and (min-width: 108em) and (min-height: 72em) {
  a:focus-visible,
  button:focus-visible,
  [tabindex]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.5rem #0076d5,
    -1px 0 0 0.5rem rgba(0,118,213,0.48),
    1px 0 0 0.5rem rgba(0,118,213,0.48);
  }
  main {
    width: 108rem;
    font-size: 3rem;
  }
  main:after {
    top: -102rem;
    width: 108rem;
    height: 108rem;
  }
  article {
    margin: auto 5rem 0 5rem;
    padding: 5.5rem 0 6rem 0;
  }
  header:before,
  header:after,
  h1:before {
    background:
    repeating-linear-gradient(rgba(29,37,46,0),
    rgba(29,37,46,0) 4rem,
    #ffffff 4rem,
    #ffffff 4.5rem);
  }
  header:before {
    top: 0.5rem;
    left: 52rem;
    height: 42rem;
  }
  header:after {
    bottom: -4.5rem;
    height: 6rem;
  }
  header svg {
    width: 52rem;
    height: 52rem;
    margin: 0 -3rem -0.5rem -3rem;
  }
  h1:before {
    top: -3.3333333rem;
    right: 1.5rem;
    left: 1.5rem;
    height: 6rem;
    background-position: 100% -3rem;
    background-color: #1d252e;
  }
  h1 {
    bottom: 1.16666666rem;
    left: 52rem;
    margin: 0.3333333rem -1.5rem 0 -1.5rem;
    padding: 0 1.5rem 0 1.5rem;
    font-size: 4.5rem;
  }
  p {
    margin-top: 4.5rem;
  }
  p span:first-of-type {
    width:  calc(100% - 22.5rem);
  }
  p span:nth-of-type(2) {
    width: 22.5rem; 
  }
  p a {
    padding: 0.5rem 0 0.5rem 0;
  }
}