@import "./variables"; * { margin: 0; line-height: 1; font-family: "Lato", sans-serif; color: white; box-sizing: border-box; } svg { overflow: visible; } $content-width: 1200px; $breakpoint: 1200px; body, html { overflow-x: hidden; background: $black; } @mixin nav-height() { height: 80px; @media all and (max-width: $breakpoint) { height: 75px; } } @mixin margin-nav-height() { margin-top: 80px; @media all and (max-width: $breakpoint) { margin-top: 75px; } } @mixin button($color, $bg-color) { cursor: pointer; display: flex; text-decoration: none; align-items: center; @media all and (min-width: $breakpoint) { & > div:not(:last-child) { margin-right: 1rem; } } justify-content: space-between; background: $bg-color; color: $color; border-radius: 2px; width: 100%; height: 56px; max-width: fit-content; padding: 1rem; margin: 2rem 0; border: 0; transition: all 400ms ease; &:hover { box-shadow: 0px 0px 20px 0px $yellow; } span { font-weight: 900; } } .text-18-white { font-weight: 400; color: white; font-size: 1.125rem; line-height: 1.6rem; } .text-18-white-padding { font-weight: 400; padding-top: 2rem; color: white; font-size: 1.125rem; line-height: 1.6rem; } .text-18-black-padding { font-weight: 400; padding-top: 2rem; color: $black; font-size: 1.125rem; line-height: 1.6rem; } .text-16-black-padding { font-weight: 400; padding-top: 2rem; color: $black; font-size: 1rem; line-height: 1.3rem; } .text-18-black { font-weight: 400; color: $black; font-size: 1.125rem; line-height: 1.6rem; } .text-26-white-bold-padding { font-weight: 900; padding-top: 2rem; color: white; font-size: 1.625rem; line-height: 2rem; } .text-36-white { font-weight: 900; font-size: 2.25rem; } .text-36-black { font-weight: 900; font-size: 2.25rem; color: $black; } .yellow { color: $yellow; } @media all and (max-width: $breakpoint) { .text-36-white, .text-36-black { font-size: 1.85rem; } }