/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Reset
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul, menu {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Unstyle Links */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Settings & Variables
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/

:root {
  /* Settings ———————————————————————————————————————— */
  /* Stop iOS Safari from increasing the default font-size when you switch a website from portrait to landscape */
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Position settings */
  position: relative;
  min-height: 100%;
	overflow-x: hidden;
  /* Font settings */
  font-family: system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  
  /* Variables ———————————————————————————————————————— */
  /* Colors */
  --c-black: #080808;
  --c-white: #ffffff;
  --c-grey: #AAAAAA;
  /* Spacing */
  --offset: 40px;
  --offset-neg: -40px;
  --space: 8px;
  /* Typography */
  --fw-light:      200;
  --fw-book:       300;
  --fw-regular:    400;
  --fw-text:       425;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-ultrabold:  800;
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Fonts Import
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* OTR Grotesk 
@font-face { 
  font-family: 'OTR Grotesk';
  src: url('/fonts/OTRGroteskVF.woff2') format("woff2 supports variations"),
       url('/fonts/OTRGroteskVF.woff2') format("woff2-variations");
  font-weight: 200 800;
/* Variable settings helper
  Light:      200 
  Book:       400
  Regular:    400
  Text:       425
  Medium:     500
  SemiBold:   600
  Bold        700
  UltraBold:  800 
} */

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Accessibility
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
.visually-hidden {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Site Wrapper
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
body {
  position: relative;
  background: #080808;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  height: 100%;
  min-height: 100vh;
  margin: 0 16px;
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Site Wrapper
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/

main {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  gap: 40px;
  margin: 0 auto;
  max-width: 1024px;
}

.sec-intro {
  margin-top: 80px;
}

.sec-content {
  width: 50%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

.sec-content img {
  max-width: 25%;
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Typography
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/

.copy {
  font-family: sans-serif, Helvetica, Arial;
  font-size: 1em;
  letter-spacing: 0.04em;
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Buttons
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
.button {
  margin: 40px 0 40px 0;
  height: fit-content;
  padding: 8px 24px;
  border-radius: 40px;
  border: 2px solid var(--c-black);
  text-align: center;
  text-decoration: none;
  background-color: #080808;
  cursor: pointer;
  color: var(--c-white);
  
  transition: all 0.125s ease-out;
}
.button a {
  color: inherit;
  background-color: var(--c-grey);
  text-decoration: none;
  
}

/* .menu__item_active:hover {color: var(--c-grey);} */
.button:hover {
  color: var(--c-black);
  background-color: var(--c-white);
}


    /* Media Query for typography | Small < 900px */
@media screen and (max-width:640px) {
  .sec-intro {
    margin-top: 40px;
  }

  .sec-content img {
    max-width: 100%;
  }
}