miom.space/styles.css

* {
  box-sizing: border-box;
}

html {
  --primary: #fd0ebf;
  --background: #fff;
  --foreground: #000;
  --box-padding: 0.6rem;

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

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

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

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

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

.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;
  bottom: 0;
  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;
  bottom: 0;
  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-bottom: 1px solid var(--foreground);
  position: sticky;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 100;
  display: flex;
  align-items: stretch;
}

.mi-nav--toggle {
  margin-left: calc(var(--box-padding) + 1px);
  padding: 0 1rem;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0;
  border-right: 1px solid var(--foreground);
  background: var(--background);
  font-size: 1rem;
  cursor: pointer;
}

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

.mi-nav--list {
  list-style: none;
  display: none;
  padding: var(--box-padding) 0;
  margin: 0;
  position: absolute;
  background: var(--background);
  border-bottom: 1px solid var(--foreground);
  left: calc(var(--box-padding) + 1px);
  right: calc(var(--box-padding) + 1px);
  top: calc(2rem + 1px);
  bottom: calc(-100vh + 2rem + var(--box-padding));
}

.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_content {
  padding: var(--box-padding);
}

.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.25rem 1rem;
  min-height: 300px;
}

.mi-card {
  background: var(--background);
  position: relative;
  height: 600px;
  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;
}