style.css

/* font */
@font-face {
  font-family: 'Space Mono';
  src: url('SpaceMono-Regular.woff') format('woff'),
}

/* reasonable box model */
*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: 'Space Mono', monospace;
  /* no text selection */
  user-select: none;
}

/* remove default margin */
* {
  margin: 0;
}

/* allow percentage-based heights in the application */
html,
body {
  height: 100%;
  background-color: #fffff0;
}

/* add accessible line-height and improve text rendering */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* remove built-in form typography styles */
input,
button,
textarea,
select {
  font: inherit;
}

/* avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  /* blend difference text */
  /* color: #fff;
  mix-blend-mode: difference; */
}

/* hide scrollbar */
* {
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
  /* overflow-y: scroll; */
}

*::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}

/* create a root stacking context (optional for frameworks) */
/* #root,
#__next {
  isolation: isolate;
} */

body {
  text-align: center;
}

main {
  padding: 3vh 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

img {
  width: 100px;
  /* notice that padding and border-radius may conflict */
  border-radius: 50%;
  border: 1px solid black;
}

h1 {
  font-size: medium;
}

img,
h1,
p,
li,
p {
  margin-bottom: 10px;
}

ul {
  list-style-type: none;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
}

li {
  width: 50vw;
  max-width: 600px;
  min-width: 300px;
  border: 2px solid #f0f0f0;
  margin-top: 15px;
  padding: 10px 0;
  border-radius: 10px;
  transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}

li:hover {
  cursor: pointer;
  border: 2px solid black;
}

a {
  color: black;
  text-decoration: underline;
}