@font-face {
  font-family: "Mono";
  src: url("../fonts/SFMonoSemibold.otf");
}
@font-face {
  font-family: "MonoBold";
  src: url("../fonts/SFMonoBold.otf");
}
@font-face {
  font-family: "SFPro";
  src: url("../fonts/SFPro.ttf");
}
.startpage {
  height: 100vmax;
  width: 100vmax;
  overflow: hidden;
}
.startpage * {
  font-family: "SFPro";
  font-weight: bold;
}
.startpage a {
  text-decoration: none;
}
.startpage header {
  box-sizing: content-box;
  padding-top: 2vh;
  padding-left: 2rem;
  padding-right: 2rem;
  height: 8vmin;
  background-color: transparent;
}
.startpage header .header-content {
  display: flex;
  justify-content: space-between;
}
.startpage header .header-content p {
  font-size: 1.5rem;
  font-weight: 600;
}
.startpage main {
  height: 92vmin;
}
.startpage main .main-content {
  box-sizing: border-box;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60vw;
  height: 40vh;
  border-radius: 8px;
  padding-top: 1rem;
}
.startpage main .main-content .main-input-container {
  height: 15%;
  box-sizing: content-box;
  padding: 2vh 3rem;
}
.startpage main .main-content .main-input-container input {
  font-family: "MonoBold";
  display: block;
  margin: auto auto;
  width: 100%;
  height: 80%;
  font-size: 1.5rem;
}
.startpage main .main-content .main-input-container input:focus {
  outline: none;
}
.startpage main .main-content .main-link-container {
  height: 75%;
  display: flex;
  justify-content: space-evenly;
}
.startpage main .main-content .main-link-container .main-link-column {
  display: inline-block;
  width: 200px;
  box-sizing: border-box;
}
.startpage main .main-content .main-link-container .main-link-column * {
  text-align: center;
  text-overflow: ellipsis;
  display: block;
  padding: 0.4rem 0;
}
.startpage main .main-content .main-link-container .main-link-column .column-header {
  font-size: 1.2rem;
  padding-bottom: 1rem;
  text-overflow: ellipsis;
}
.startpage main .main-content .main-link-container .main-link-column .link {
  margin: 0 auto;
  width: min-content;
  text-decoration: none;
  text-overflow: ellipsis;
}
.startpage .line-div {
  margin: 5px auto;
  height: 5px;
  display: block;
  width: 100%;
}

.light {
  background-color: #dad3c1;
}
.light p {
  color: #05080a;
}
.light .main-content {
  background-color: #dad3c1;
  border: 0.125rem solid #05080a;
  box-shadow: #BFB9AA 12px 12px 0px, #999488 24px 24px 0px, #807C71 36px 36px 0px, #656057 48px 48px 0px, #4d4a43 60px 60px 0px;
}
.light input {
  background-color: #dad3c1;
  border: none;
  border-bottom: 5px solid #05080a;
  color: #05080a;
}
.light input::placeholder {
  color: #999488;
}
.light .column-header {
  color: #05080a;
}
.light .link {
  color: #5a5852;
  transition: color 0.2s ease-in-out;
}
.light .link:hover {
  color: #05080a;
}
.light .line-div {
  background-color: #05080a;
}

.light2 {
  background-color: #eee;
}
.light2 p {
  color: #111;
}
.light2 .main-content {
  background-color: #eee;
  border: 0.125rem solid #111;
  box-shadow: #bbb 12px 12px 0px, #878787 24px 24px 0px, #545454 36px 36px 0px, #202020 48px 48px 0px, #000000 60px 60px 0px;
}
.light2 input {
  background-color: #eee;
  border: none;
  border-bottom: 5px solid #111;
  color: #111;
}
.light2 input::placeholder {
  color: #222;
}
.light2 .column-header {
  color: #bc012e;
}
.light2 .link {
  color: #000;
  transition: color 0.2s ease-in-out;
}
.light2 .link:hover {
  color: #bc012e;
}
.light2 .line-div {
  background-color: #05080a;
}

.dark {
  background-color: #05080a;
}
.dark p {
  color: #dad3c1;
}
.dark .main-content {
  background-color: #0b1015;
  border: 0.125rem solid #dad3c1;
  box-shadow: #BFB9AA 12px 12px 0px, #999488 24px 24px 0px, #807C71 36px 36px 0px, #656057 48px 48px 0px, #4d4a43 60px 60px 0px;
}
.dark input {
  background-color: #0b1015;
  border: none;
  border-bottom: 5px solid #dad3c1;
  color: #dad3c1;
}
.dark input::placeholder {
  color: #999488;
}
.dark .column-header {
  color: #dad3c1;
}
.dark .link {
  color: #999488;
  transition: color 0.2s ease-in-out;
}
.dark .link:hover {
  color: #dad3c1;
}
.dark .line-div {
  background-color: #dad3c1;
}

.apple {
  background-color: #edf3e5;
}
.apple * {
  font-family: "SFPro";
  font-weight: bold;
}
.apple p {
  color: #000000;
}
.apple .main-content {
  background-color: #edf3e5;
  border: 0.125rem solid #61bc44;
  box-shadow: #fdb922 12px 12px 0px, #f58319 24px 24px 0px, #e1373c 36px 36px 0px, #973a98 48px 48px 0px, #009edd 60px 60px 0px;
}
.apple input {
  background-color: #edf3e5;
  border: none;
  border-bottom: 5px solid #000000;
  color: #000000;
}
.apple input::placeholder {
  color: #000000;
}
.apple .column-header {
  color: #000000;
}
.apple .link {
  color: #000000;
  transition: color 0.2s ease-in-out;
}
.apple .link:nth-of-type(+1):hover {
  color: #fdb922;
}
.apple .link:nth-of-type(+2):hover {
  color: #f58319;
}
.apple .link:nth-of-type(+3):hover {
  color: #e1373c;
}
.apple .link:nth-of-type(+4):hover {
  color: #973a98;
}
.apple .link:nth-of-type(+5):hover {
  color: #009edd;
}
.apple .line-div {
  background-color: #000000;
}

.light3 {
  background-color: #e3edf1;
}
.light3 p {
  color: #111;
}
.light3 .main-content {
  background-color: #e3edf1;
  border: 0.125rem solid #81a3b1;
  box-shadow: #5f96b4 12px 12px 0px, #106f8f 24px 24px 0px, #0a475c 36px 36px 0px, #041f28 48px 48px 0px, #020f13 60px 60px 0px;
}
.light3 input {
  background-color: #e3edf1;
  border: none;
  border-bottom: 5px solid #111;
  color: #111;
}
.light3 input::placeholder {
  color: #222;
}
.light3 .column-header {
  color: #bc012e;
}
.light3 .link {
  color: #000;
  transition: color 0.2s ease-in-out;
}
.light3 .link:hover {
  color: #e2bc32;
}
.light3 .line-div {
  background-color: #05080a;
}

.dark2 {
  background-color: #0b1015;
}
.dark2 p {
  color: #fb435d;
}
.dark2 .main-content {
  background-color: #0b1015;
  border: 0.125rem solid #81a3b1;
  box-shadow: #5f96b4 12px 12px 0px, #106f8f 24px 24px 0px, #0a475c 36px 36px 0px, #041f28 48px 48px 0px, #020f13 60px 60px 0px;
}
.dark2 input {
  background-color: #0b1015;
  border: none;
  border-bottom: 5px solid #4db1cd;
  color: #4db1cd;
}
.dark2 input::placeholder {
  color: #4db1cd;
}
.dark2 .column-header {
  color: #fb435d;
}
.dark2 .link {
  color: #ff9b22;
  transition: color 0.2s ease-in-out;
}
.dark2 .link:hover {
  color: #ff4300;
}
.dark2 .line-div {
  background-color: #ff9b22;
}

/*# sourceMappingURL=index.css.map */