miom.space/styles.css

* {
  box-sizing: border-box;
}

html {
  --primary: #fd0ebf;
  --background: #fff;
  --foreground: #000;
  --grayish: #777;
  --box-padding: 1.5rem;

  font-family: 'Raleway', sans-serif;

  font-size: 16px;
  line-height: 175%;
}

@media screen and (min-width: 800px) {
  html {
    --box-padding: 3rem;
  }
}

*:focus {
  outline: 1px dashed var(--grayish);
  outline-offset: -5px;
}

.mi-page {
  margin: 0;
  padding: 0;
  background: var(--background);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100vw;
}

.mi-border {
  pointer-events: none;
  z-index: 10;
}

.mi-border > * {
  pointer-events: all;
}

.mi-border--top,
.mi-border--bottom,
.mi-border--left,
.mi-border--right {
  background: var(--background);
  position: fixed;
  overflow: hidden;
  border: 1px solid var(--foreground);
  box-sizing: content-box;
  font-size: calc(0.5 * var(--box-padding));
  line-height: 150%;
}

.mi-border--top::before,
.mi-border--bottom::before,
.mi-border--left::before,
.mi-border--right::before {
  display: flex;
  align-items: center;
  white-space: nowrap;
  content: 'each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one';
  color: black; 
  height: var(--box-padding);
}

.mi-border--top::before,
.mi-border--bottom::before {
  width: 100%;
}

.mi-border--left::before,
.mi-border--right::before {
  width: 10000vh;
}

.mi-border--top {
  height: var(--box-padding);
  top: 0;
  left: 0;
  right: 0;
  border-top: 0;
  margin-left: var(--box-padding);
  margin-right: var(--box-padding);
}

.mi-border--bottom {
  height: var(--box-padding);
  bottom: 0;
  left: 0;
  right: 0;
  border-bottom: 0;
  margin-left: var(--box-padding);
  margin-right: var(--box-padding);
}

.mi-border--left {
  width: var(--box-padding);
  top: 0;
  left: 0;
  height: calc(100% - 2 * var(--box-padding) - 2px);
  border-left: 0;
  margin-top: var(--box-padding);
  margin-bottom: var(--box-padding);
}

.mi-border--left::before {
  transform-origin: 0 0;
  transform: translateY(100vh) rotateZ(-90deg);
}

.mi-border--right {
  width: var(--box-padding);
  top: 0;
  right: 0;
  height: calc(100% - 2 * var(--box-padding) - 2px);
  border-right: 0;
  margin-top: var(--box-padding);
  margin-bottom: var(--box-padding);
}

.mi-border--right::before {
  transform-origin: 0 0;
  transform: translateX(var(--box-padding)) translateY(-17px) rotateZ(90deg);
}

.mi-border--bottom::before {
  transform: rotateZ(-180deg) translateX(-34px);
  text-align: right;
}

.mi-nav {
  border: 0;
  position: sticky;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 100;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

.mi-nav--toggle {
  margin-left: calc(var(--box-padding) + 1px);
  padding: 0 1rem;
  height: 2.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0;
  border-right: 1px solid var(--foreground);
  border-bottom: 1px solid var(--foreground);
  color: var(--foreground);
  text-decoration: none;
  background: var(--background);
  font-size: 1.25rem;
  cursor: pointer;
  z-index: 1;
  font-family: inherit;
  font-weight: inherit;
}

.mi-nav--toggle:hover {
  color: var(--primary);
}

.mi-nav--top {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
  margin-right: calc(var(--box-padding) + 1px);
  border: 0;
  border-bottom: 1px solid var(--foreground);
  background: var(--background);
  font-size: 1.25rem;
  height: 2.4rem;
  z-index: 1;
}

@media screen and (min-width: 800px) {
  .mi-nav--top,
  .mi-nav--toggle {
    border-bottom: 0;
    height: var(--box-padding);
  }
}

.mi-nav--top-item {
  border: 0;
  border-left: 1px solid var(--foreground);
  text-decoration: none;
  display: flex;
}

.mi-nav--top-item-link {
  color: var(--foreground);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 1rem;
  text-decoration: none;
}

.mi-nav--top-item-link_icon-only {
  padding: 0;
  width: 2.4rem;
}

@media screen and (min-width: 800px) {
  .mi-nav--top-item-link_icon-only {
    width: var(--box-padding);
  }
}

.mi-nav--top-item-link:hover {
  color: var(--primary);
}

.mi-nav--top-item-icon {
  height: 50%;
  display: block;
}

.mi-nav--list {
  list-style: none;
  display: none;
  padding: var(--box-padding) 0;
  margin: 0;
  position: fixed;
  background: var(--background);
  left: calc(var(--box-padding) + 1px);
  right: calc(var(--box-padding) + 1px);
  top: calc(var(--box-padding) + 1px);
  bottom: calc(var(--box-padding) + 1px);
}

@media screen and (min-width: 800px) {
  .mi-nav--list {
    font-size: 1.5rem;
    line-height: 1.5;
  }
}

@media screen and (min-width: 800px) {
  .mi-nav--toggle {
    border-bottom: 0;
  }
}

.mi-nav_open .mi-nav--list {
  display: flex;
  flex-direction: column;
}

.mi-nav--divider {
  flex-grow: 1;
}

.mi-nav--link {
  display: flex;
  padding: 0.25rem var(--box-padding);
  color: var(--foreground);
  text-decoration: none;
}

.mi-nav--link:before {
  display: inline-block;
  content: '__';
}

.mi-nav--link:hover {
  color: var(--primary);
  text-decoration: underline;
}

.mi-main {
  background: var(--background);
  margin: 0 var(--box-padding);
  flex-grow: 1;
  position: relative;
  margin-bottom: var(--box-padding);
}

.mi-main a,
.mi-main  a:visited {
  color: var(--primary);
}

.mi-main_content {
  padding: var(--box-padding) 0;
}

.mi-main_content > * {
  margin: calc(0.5 * var(--box-padding)) var(--box-padding);
  max-width: 800px;
}

.mi-cards {
  display: grid;
  background: var(--foreground);
  grid-gap: 1px;
  grid-template-columns: 1fr;
}

@media screen and (min-width: 800px) {
  .mi-cards {
    grid-template-columns: repeat(8, 1fr);
  }

  .mi-card {
    grid-column: auto / span 4;
  }
  
  .mi-logo {
    grid-column: 1 / span 3;
  }

  .mi-tagline {
    grid-column: 4 / span 5;
  }
}

@media screen and (min-width: 1600px) {
  .mi-card {
    grid-column: auto / span 2;
  }
}

.mi-logo {
  background: var(--background);
}

.mi-logo--img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mi-tagline {
  background: var(--background);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.5rem 2rem;
  min-height: 300px;
  font-size: 2rem;
  line-height: 1.75;
}

.mi-tagline > * {
  margin-bottom: 0;
}

.mi-tagline > *:first-child {
  margin-top: 0;
}

.mi-card {
  background: var(--background);
  position: relative;
  height: 600px;
  max-height: 70vh;
  padding: 1rem;
}

.mi-card:hover,
.mi-card:focus {
  z-index: 1;
}

.mi-card--background {
  width: calc(100% - 2rem);
  height: calc(100% - 2rem);
  position: absolute;
  top: 1rem;
  left: 1rem;
  object-fit: cover;
  filter: grayscale(100%);
}

.mi-card:focus .mi-card--background,
.mi-card:hover .mi-card--background {
  filter: grayscale(0%);
}

.mi-card--text {
  color: var(--background);
  background: var(--foreground);
  display: flex;
  z-index: 1;
  padding: 0.25rem 1rem;
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  right: 2rem;
}

.mi-card:hover .mi-card--text {
  color: var(--primary);
}

.mi-footer {
  border-top: 1px solid var(--foreground);
  background: var(--background);
  margin: var(--box-padding);
}

.mi-footer--links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mi-footer--link {
  text-decoration: none;
  color: var(--foreground);
  padding: 0.25rem 1rem;
}

.mi-footer--link:hover {
  text-decoration: underline;
}