/* written by minish - 2024-03 */

:root {
  --accent-b: #c4b5a1;
  --accent: #908576;
}

* {
  margin: 0px;
  padding: 0px;

  box-sizing: border-box;
}

body {
  overflow: hidden;
}

#border {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100vw - calc(2px * 2));
  height: calc(100vh - calc(2px * 2));

  margin: 2px;

  border: 2px solid var(--accent);
}

#bg::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  /* backdrop-filter: blur(2px); */
}

#bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  background-image: linear-gradient(rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.53)),
    url(/assets/bg.webp);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  display: flex;
  flex-direction: column;

  font-size: 10pt;
  line-height: 2em;

  padding: 18px;
  padding-bottom: 14px;

  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8));

  border: 2px solid var(--accent);

  color: #fff;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

@media only screen and (max-width: 700px) {
  main {
    min-width: 92dvw;
  }

  #border {
    border-width: 0px;
  }

  #icon-desktop {
    display: none;
  }

  #learning {
    grid-template-columns: auto;
  }
}

@media only screen and (min-width: 701px) {
  #learning {
    grid-template-columns: auto auto;
  }

  #icon-mobile {
    display: none;
  }
}

.interests {
  grid-template-columns: auto auto;
}

::selection {
  color: #fff;
  background: var(--accent);
}

a:link,
a:visited,
a:hover,
a:active {
  color: var(--accent-b);
}

h2 {
  font-size: medium;
  font-weight: lighter;

  margin-bottom: 4px;
}

#floats {
  display: flex;
}

#icon-desktop {
  justify-self: right;

  /* make some space around it */
  margin-left: 24px;

  height: 7em;
}

#icon-mobile {
  height: 2.25em;
  margin-left: 10px;
}

#title, #icon-mobile {
  display: inline-block;
  vertical-align: middle;
}

.icon {
  filter: drop-shadow(1px 1px 0 var(--accent))
    drop-shadow(-1px 1px 0 var(--accent)) drop-shadow(1px -1px 0 var(--accent))
    drop-shadow(-1px -1px 0 var(--accent));
}

#yapping {
  justify-self: left;
}

ul {
  list-style-position: inside;
}

li {
  /* move the bulletpoint 6px inward on itself */
  padding-left: 6px;
}

#learning {
  display: grid;
}

.interests {
  display: grid;
}

.interests img {
  height: 1.75em;
  vertical-align: middle;
}

.interests img#yume,
.interests img#oneshot {
  height: 20px;
}

.interests img#yume {
  image-rendering: pixelated;
}

hr {
  margin-bottom: 10px;
  margin-top: 12px;

  border: 1px solid var(--accent);
}

#links {
  display: flex;
  justify-content: space-around;
}

#links img {
  height: 3.1em;
}

#cont {
  margin-top: auto;
}