@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
* {
  margin: 0;
  padding: 0;
}

:root {
  --color-white: #e2e2e2;
  --color-black: #121212;
  --transition-setting: 300ms ease-out;
}

/* ダークテーマファーストで記述 */

html {
  font-family: "Noto Sans JP", sans-serif;
  color: var(--color-white);
  background-color: var(--color-black);
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.profile {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2vw;
  position: relative;
  user-select: none;

  & > .logo {
    width: 20vw;

    & > .black, & > .white {
      transition: var(--transition-setting);
    }
  }

  & > .text {
    text-align: center;
    font-family: "Bebas Neue", sans-serif;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: .5vw;
    transition: var(--transition-setting);

    & > .my-name {
      font-size: 8vw;
    }

    & > .description {
      font-size: 5vw;
    }
  }
}

@media screen and (prefers-color-scheme: dark) {
  .logo .black {
    display: none;
  }
}

@media screen and (prefers-color-scheme: light) {
  html {
    color: var(--color-black);
    background-color: var(--color-white);
  }

  .logo .white {
    display: none;
  }
}