* {
  font-family: "Montserrat", "Zen Maru Gothic", sans-serif;
  --primary: #e45a22;
  /* --background: #e4c6ba; */
  --secondary: #e4cd22;
  --accent: #22ade4;
}

html {
  scroll-behavior: smooth;
}

#background {
  background: linear-gradient(to left, var(--primary), var(--secondary));
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
}

div#overlay {
  position: absolute;
  /* width: 75vw; */
  width: 0vw;
  height: 15vw;
  background-color: black;
}

body {
  display: block !important;
  /* min-height: 100vh; */
  background-color: white;
  overflow: scroll;
}

div#top {
  height: 0;
  width: 100vw;
  top: 0;
}

.title {
  background-color: white;
  height: 100vh;
  width: 100vw;
  mix-blend-mode: screen;
  position: fixed;
  top: 0;
  left: 0;
}

h1 {
  font-size: 10vw;
  font-weight: 700;
  color: white;
  margin-top: 10vmin;
}

h1#tozaburo {
  color: black;
}

h2 {
  text-align: center !important;
  font-size: 5vmin;
  font-weight: 700;
  color: #e45a22;
}

section {
  min-height: 100vh;
  width: 100vw;
}

#works h1 {
  color: white;
  font-size: 20vmin;
}

#works h1 span {
  margin: 0;
  padding: 0;
  transition: all 0.1s ease-in-out;
}

.main {
  width: 100vw;
  min-height: 100vh;
}

/* .blur-circle {
  position: absolute;
  top: 0;
  left: 0;
  height: 30vmin;
  width: 30vmin;
  backdrop-filter: blur(1vmin);
  border-radius: 50%;
  transform: translate(-50%, -50%);
} */

div.menu {
  height: 5vmin;
  width: 70vmin;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1vmin;
}

div.menu a {
  font-size: 3vmin;
  height: 100%;
  width: 100%;
  background-color: black;
  color: white;
  border-radius: 1vmin;
  mix-blend-mode: screen;

  transition: all 0.2s ease-in-out;
}

div.menu a.active {
  background-color: white;
  color: black;
}

a#see-more {
  margin-top: 5vmin;
  height: 5vmin;
  width: 70vmin;
  background-color: black;
  color: white;
  border-radius: 1vmin;
  mix-blend-mode: screen;

  transition: all 0.2s ease-in-out;
}

a#see-more:hover {
  background-color: white;
  color: black;
}

div#contents {
  /* height: 40vmin; */
  width: 70vmin;

  display: grid;
  gap: 1vmin;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  margin-top: 5vmin;
}

a.content img {
  /* position: absolute; */
  /* border-radius: 1vmin; */
  width: 100%;
  display: block;
  /* margin: 2.5vmin; */
  cursor: pointer;
  /* filter: blur(0.2vmin); */
  /* transform: scale(1.1); */
  transition: all 0.5s ease-in-out;
  height: 100%;
  object-fit: cover;
}

/* a.content img:hover {
  filter: blur(0vmin);
  transform: scale(1.05);
} */

a.content {
  position: relative;
  border-radius: 1vmin;
  display: inline-block;
  content: "";
  /* width: 100%;
  height: 100%; */
  backdrop-filter: blur(1vmin);
  overflow: hidden;
  border: solid transparent 0.5vmin;
  backdrop-filter: blur(1vmin) brightness(1.1);
}

a.content:hover img {
  /* filter: blur(1vmin); */
}

a.content:hover p {
  opacity: 1;
}

p.content-title {
  /* margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  backdrop-filter: blur(1vmin);
  transition: opacity 0.5s ease;
  color: white;
  text-shadow: 0vmin 0vmin 2vmin black;
  font-size: 2vmin;
  font-weight: 900;
  white-space: pre-wrap;
  word-break: keep-all;
  text-align: center;
  text-wrap: balance;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
}

#index {
  position: fixed;
  top: 0;
  right: 0;
  writing-mode: vertical-lr;
  height: 100vh;
  width: 4vmin;
  display: grid;
  grid-template-columns: 100fr 100fr 100fr;
  grid-template-rows: 1fr;
  z-index: 1;
}

a.index {
  border-radius: 1vmin 0 0 1vmin;
  flex-grow: 1;
  flex-basis: auto;
  text-align: center;
  backdrop-filter: blur(1vmin);
  transition: all 0.2s ease-in-out;
  color: black;
  text-shadow: 0vmin 0vmin 1vmin white;
}

a.index:hover {
  text-shadow: 0vmin 0vmin 1vmin transparent;
  color: white;
  background-color: color-mix(in srgb, #e4cd22 50%, transparent);
}

a.link {
  height: 5vmin;
  width: 70vmin;
  border-radius: 1vmin;
  margin: 1vmin;
  font-size: 3vmin;

  background-color: black;
  color: white;
  mix-blend-mode: screen;
  transition: all 0.2s ease-in-out;
}

a.link:hover {
  background-color: white;
  color: black;
}