@charset "utf-8";

html, body{
  width: 100dvw;

  margin: 0;
  padding: 0;

  background-color: var(--base2);

  font-size: 8px;
  
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;

  overflow-x: hidden;

  scroll-behavior: smooth;
}

/* ================================================== */
/* ================================================== */
/* ================================================== */

header{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 3rem;

  width: var(--mainWidth);
  height: 5rem;

  margin: 0;
  padding: 1.5rem calc((100% - var(--mainWidth)) / 2);

  border: none;
  border-radius: 0;
  outline: none;

  background-color: color-mix(in srgb, var(--base2), transparent 50%);

  box-shadow: var(--shadow2);
  backdrop-filter: blur(0.25rem);
}

header>a:nth-of-type(1){
  display: block;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  color: var(--text1);
  font-size: 2.75rem;
  font-weight: 600;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;

  text-decoration: none;
  text-align: left;
  line-height: 5rem;
  letter-spacing: 0;

  white-space: nowrap;
}

header>a:nth-of-type(n+2){
  display: var(--menuDisplay1);

  width: fit-content;
  height: 100%;

  margin: 0;
  padding: 0;

  color: var(--text1);
  font-size: 2rem;
  font-weight: 400;
  font-family: "Nunito Sans", "Noto Sans JP", sans-serif;

  text-decoration: none;
  text-align: right;
  line-height: 5rem;
  letter-spacing: 0;

  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ================================================== */

button#menuOpen{
  position: relative;

  display: var(--menuDisplay2);

  height: 100%;
  aspect-ratio: 3 / 5;

  margin: 0;
  padding: 0;

  outline: none;
  border: none;
  border-radius: 0;

  background-color: transparent;
}

button#menuOpen>span{
  position: absolute;

  display: block;

  width: 100%;
  height: 2px;

  margin: 0;
  padding: 0;

  outline: none;
  border: none;
  border-radius: 0;

  background-color: var(--text3);

  transition: all .25s;
}
button#menuOpen>span:nth-of-type(1){
  top: calc((100% - 2px * 3) / 4 * 1 + 2px);
  right: 0;
}
button#menuOpen>span:nth-of-type(2){
  top: calc((100% - 2px * 3) / 4 * 2 + 2px);
  right: 0;
}
button#menuOpen>span:nth-of-type(3){
  top: calc((100% - 2px * 3) / 4 * 3 + 2px);
  right: 0;
}
button#menuOpen.active>span:nth-of-type(1), button#menuOpen.active>span:nth-of-type(3){
  top: calc((100% - 2px * 3) / 4 * 2 + 2px);
  right: 0;
}

menu{
  position: fixed;
  top: 8rem;
  right: 0;
  z-index: 998;

  display: var(--menuDisplay2);

  width: 50%;
  height: calc(100% - 8rem);

  margin: 0;
  padding: 0;

  background-color: color-mix(in srgb, var(--base3), transparent 50%);

  box-shadow: var(--shadow2);
  backdrop-filter: blur(0.25rem);

  transform: translateX(100%);

  transition: all .25s;
}
menu.active{
  transform: translateX(0);
}

menu>ul{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: 2rem;

  width: calc(100% - 3rem * 2);
  height: 100%;

  margin: 0;
  padding: 0 3rem;
}

menu>ul>li{
  display: block;

  width: 100%;
  height: auto;

  margin: 0;
  padding: 0;
}

menu>ul>li>a{
  display: block;

  width: 100%;
  height: auto;

  margin: 0;
  padding: 0;

  color: var(--text1);
  font-size: 2rem;
  font-weight: 400;
  font-family: "Nunito Sans", sans-serif;

  text-decoration: underline;
  text-align: left;
  line-height: 3rem;
  letter-spacing: 0;

  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* ================================================== */

span#topspan{
  display: block;

  width: 100%;
  height: calc(5rem + 1.5rem * 2);

  margin: 0 0 4rem 0;
  padding: 0;

  background-color: transparent;
}

/* ================================================== */
/* ================================================== */
/* ================================================== */

div#welcome{
  display: block;

  width: var(--mainWidth);
  height: fit-content;

  margin: 0 auto 4rem auto;
  padding: 5rem;

  border: none;
  border-radius: 0;
  outline: none;
}

div#welcome>h1{
  display: block;

  width: 100%;
  height: fit-content;

  margin: 2rem 0;
  padding: 0;

  color: var(--text1);
  font-size: 6rem;
  font-weight: 800;
  font-family: "Nunito Sans", sans-serif;

  text-decoration: none;
  text-align: left;
  line-height: 8rem;
  letter-spacing: 0;
}

div#welcome>h2{
  display: block;

  width: 100%;
  height: fit-content;

  margin: 1rem 0;

  color: var(--text1);
  font-size: 3rem;
  font-weight: 600;
  font-family: "Nunito Sans", "Noto Sans JP", sans-serif;

  text-decoration: none;
  text-align: left;
  line-height: 4rem;
  letter-spacing: 0;
}

div#welcome>span{
  display: block;
  
  width: fit-content;
  height: fit-content;

  margin: 3rem 0;
  padding: 1.5rem;

  border: none;
  border-radius: 1rem;
  outline: none;

  background-color: var(--text1);

  color: var(--base1);
  font-size: 2rem;
  font-weight: 500;
  font-family: "Nunito Sans", "Noto Sans JP", sans-serif;

  text-decoration: none;
  text-align: left;
  line-height: 2.5rem;
  letter-spacing: 0;
}

div#welcome>p{
  display: block;
  
  width: 100%;
  height: fit-content;

  margin: 1rem 0;
  padding: 0;

  background-color: transparent;

  color: var(--text1);
  font-size: 1.75rem;
  font-weight: 400;
  font-family: "Nunito Sans", "Noto Sans JP", sans-serif;

  text-decoration: none;
  text-align: left;
  line-height: 3rem;
  letter-spacing: 0;
}

/* ================================================== */
/* ================================================== */
/* ================================================== */

section{
  display: block;

  width: var(--mainWidth);
  height: fit-content;

  margin: -10rem auto 8rem auto;
  padding: 10rem 0;

  border: none;
  border-radius: 0;
  outline: none;

  background-color: transparent;
}

section>h1{
  display: block;
  
  width: fit-content;
  height: fit-content;

  margin: 1rem 0;
  padding: 0;

  color: var(--text1);
  font-size: 4rem;
  font-weight: 800;
  font-family: "Nunito Sans", "Noto Sans JP", sans-serif;

  text-decoration: none;
  text-align: left;
  line-height: 3rem;
  letter-spacing: 0;
}

section>h2{
  display: block;
  
  width: fit-content;
  height: fit-content;

  margin: 2rem 0;
  padding: 0;

  color: var(--text1);
  font-size: 2rem;
  font-weight: 600;
  font-family: "Nunito Sans", "Noto Sans JP", sans-serif;

  text-decoration: none;
  text-align: left;
  line-height: 3rem;
  letter-spacing: 0.25rem;
}

/* ================================================== */
/* ================================================== */
/* ================================================== */

section#about>h3{
  position: relative;

  display: block;
  
  width: fit-content;
  height: fit-content;

  margin: 4rem 0 1rem 0;
  padding: 0 0 0 3rem;

  color: var(--text1);
  font-size: 2.5rem;
  font-weight: 600;
  font-family: "Nunito Sans", "Noto Sans JP", sans-serif;

  text-decoration: none;
  text-align: left;
  line-height: 3rem;
  letter-spacing: 0;
}
section#about>h3::before{
  content: "";

  position: absolute;
  top: 0.5rem;
  left: 0;

  display: block;

  width: 2rem;
  height: 2rem;

  margin: 0;
  padding: 0;

  background-color: var(--text2);

  clip-path: polygon(75% 50%, 0 0, 0 100%);
}

section#about>p{
  display: block;
  
  width: calc(100% - 3rem);
  height: fit-content;

  margin: 0;
  padding: 0 0 0 3rem;

  color: var(--text1);
  font-size: 2rem;
  font-weight: 400;
  font-family: "Nunito Sans", "Noto Sans JP", sans-serif;

  text-decoration: none;
  text-align: left;
  line-height: 3.5rem;
  letter-spacing: 0;
}

section#about>ul{
  display: block;
  
  width: calc(100% - 4rem);
  height: fit-content;

  margin: 0;
  padding: 1rem 0 1rem 4rem;

  color: var(--text1);
  font-size: 2rem;
  font-weight: 400;
  font-family: "Nunito Sans", "Noto Sans JP", sans-serif;

  text-decoration: none;
  text-align: left;
  line-height: 3.5rem;
  letter-spacing: 0;

  word-break: break-all;

  list-style: inside;
}

/* ================================================== */
/* ================================================== */
/* ================================================== */

section#link>a{
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;

  width: calc(100% - 2.5rem * 2);
  height: fit-content;

  margin: 0 auto 3rem auto;
  padding: 2.5rem;

  border: none;
  border-radius: 1rem;
  outline: var(--base4) 1px solid;

  background-color: transparent;

  text-decoration: none;

  transition: all .2s;
}
section#link>a::after{
  content: ">";

  position: absolute;
  right: 3rem;
  top: calc((9rem + 2.5rem * 2 - 3rem) / 2);

  display: block;

  width: fit-content;
  height: fit-content;

  margin: 1rem 0;
  padding: 0;

  color: var(--text1);
  font-size: 3rem;
  font-weight: 500;
  font-family: "Nunito Sans", "Noto Sans JP", sans-serif;

  text-decoration: none;
  text-align: center;
  line-height: 3rem;
  letter-spacing: 0;
}
section#link>a:hover{
  background-color: var(--base3);
}

section#link>a>h3{
  display: block;

  width: calc(100% - 5rem);
  height: 4rem;

  margin: 0;
  padding: 0;

  color: var(--text1);
  font-size: 3rem;
  font-weight: 600;
  font-family: "Nunito Sans", "Noto Sans JP", sans-serif;

  text-decoration: none;
  text-align: left;
  line-height: 4rem;
  letter-spacing: 0;
  
  white-space: nowrap;
  text-overflow: ellipsis;

  overflow: hidden;
}

section#link>a>h4{
  display: block;

  width: calc(100% - 5rem);
  height: 2rem;

  margin: 0;
  padding: 0;

  color: var(--text1);
  font-size: 1.5rem;
  font-weight: 400;
  font-family: "Nunito Sans", "Noto Sans JP", sans-serif;

  text-decoration: none;
  text-align: left;
  line-height: 2rem;
  letter-spacing: 0;
  
  white-space: nowrap;
  text-overflow: ellipsis;

  overflow: hidden;
}

section#link>a>p{
  display: block;

  width: calc(100% - 5rem);
  height: 3rem;

  margin: 0 5rem 0 0;
  padding: 0;

  color: var(--text1);
  font-size: 2rem;
  font-weight: 400;
  font-family: "Nunito Sans", "Noto Sans JP", sans-serif;

  text-decoration: none;
  text-align: left;
  line-height: 3rem;
  letter-spacing: 0;
  
  white-space: nowrap;
  text-overflow: ellipsis;

  overflow: hidden;
}

/* ================================================== */
/* ================================================== */
/* ================================================== */

section#repository>p{
  display: block;
  
  width: 100%;
  height: fit-content;

  margin: 0 0 4rem 0;
  padding: 0;

  color: var(--text1);
  font-size: 2rem;
  font-weight: 400;
  font-family: "Nunito Sans", "Noto Sans JP", sans-serif;

  text-decoration: none;
  text-align: left;
  line-height: 3.5rem;
  letter-spacing: 0;
}

section#repository>a{
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;

  width: calc(100% - 1.5rem * 2);
  height: fit-content;

  margin: 0 auto 1.5rem auto;
  padding: 1.5rem;

  border: none;
  border-radius: 1rem;
  outline: var(--base4) 1px solid;

  background-color: transparent;

  text-decoration: none;

  transition: all .2s;
}
section#repository>a::after{
  content: ">";

  position: absolute;
  right: 3rem;
  top: calc((5rem + 1.5rem * 2 - 3rem) / 2);

  display: block;

  width: fit-content;
  height: fit-content;

  margin: 1rem 0;
  padding: 0;

  color: var(--text1);
  font-size: 3rem;
  font-weight: 500;
  font-family: "Nunito Sans", "Noto Sans JP", sans-serif;

  text-decoration: none;
  text-align: center;
  line-height: 3rem;
  letter-spacing: 0;
}
section#repository>a:hover{
  background-color: var(--base3);
}

section#repository>a>h3{
  display: block;

  width: calc(100% - 5rem);
  height: 3rem;

  margin: 0 5rem 0 0;
  padding: 0;

  color: var(--text1);
  font-size: 2rem;
  font-weight: 400;
  font-family: "Nunito Sans", "Noto Sans JP", sans-serif;

  text-decoration: none;
  text-align: left;
  line-height: 3rem;
  letter-spacing: 0;
  
  white-space: nowrap;
  text-overflow: ellipsis;

  overflow: hidden;
}

section#repository>a>p{
  display: block;

  width: fit-content;
  height: fit-content;

  margin: 0;
  padding: 0;

  color: var(--text1);
  font-size: 1.75rem;
  font-weight: 600;
  font-family: "Nunito Sans", "Noto Sans JP", sans-serif;

  text-decoration: none;
  text-align: left;
  line-height: 2rem;
  letter-spacing: 0;
}

/* ================================================== */
/* ================================================== */
/* ================================================== */

footer{
  display: block;
  
  width: var(--mainWidth);
  height: fit-content;

  margin: 8rem auto;
  padding: 0;

  background-color: transparent;
}

footer>p{
  display: block;

  width: 100%;
  height: fit-content;

  margin: 0;
  padding: 0;

  color: var(--text1);
  font-size: 2rem;
  font-weight: 400;
  font-family: "Nunito Sans", "Noto Sans JP", sans-serif;

  text-decoration: none;
  text-align: right;
  line-height: 3rem;
  letter-spacing: 0;
}