/* Home page */

* { 
  /* Make CSS behave more sensibly... */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: "Fira Sans";
  src: url("./assets/fonts/FiraSans-Regular.otf");
  font-weight: 400;
}

@font-face {
  font-family: "Fira Sans";
  src: url("./assets/fonts/FiraSans-Heavy.otf");
  font-weight: 900;
}


/* Containers */

body {
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: [gutter-left] 1fr [content-column] 1fr [gutter-right] 1fr;
  grid-template-rows: [header] 1fr [center] 1fr [footer] 1fr;
  font-family: 'Fira Sans', sans-serif;
}

.main {
  grid-column: content-column / content-column;
  grid-row: center / center;
}


/* Monogram */

.monogram {
  display: flex;
}

.triangle {
  display: block; /* Because these are <a> tags */
  background-color: black;
  position: relative; /* Required for the absolute positioning of the triangle-label */
  width: 20vh;
  height: 20vh;
  max-width: 40vw;
  max-height: 40vw;
}

.triangle-bottom {
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.triangle-top {
  clip-path: polygon(0 0, 0 100%, 100% 0);
}

.triangle img {
  display: block; /* Prevents the annoying inline-block gap after */
  filter: grayscale(100%);
  mix-blend-mode: overlay;
  width: 100%;
  height: 100%;
}

.triangle:hover {
  background-color: hsl(50, 90%, 50%);
}

.triangle-label {
  position: absolute;
  color: black;
  left: 0.5rem;
  bottom: 0.5rem;
}

.triangle-label.multiline {
  margin-top: -2rem;
}

.triangle-top .triangle-label {
  top: 0.5rem;
}


/* Title and links */

h1 {
  font-weight: bold;
  font-size:  1.7rem;
  margin-top: 1em;
}

.navigation {
  font-size: 1.4rem;
}

.navigation a {
  color: black;
  text-decoration: none;
  margin-left: -0.25ch;
  border-left: 0.25ch solid rgba(0,0,0,0);
  border-right: 0.25ch solid rgba(0,0,0,0);
  margin-right: 0.75ch;
}

.navigation a:visited {
  color: black;
}

.navigation a:active,
.navigation a:hover {
  background-color:hsl(50, 100%, 70%);
  border-left: 0.25ch solid hsl(50, 100%, 70%);
  border-right: 0.25ch solid hsl(50, 100%, 70%);
}


/* Adjustments for touchscreen devices */

@media (hover: none) {
  .triangle-label {
    color: white;
    opacity: 0.75;
  }

  .triangle:hover .triangle-label {
    color: black;
    opacity: 1;
  }
}