:root {
  --margins: 20px;
}

* {
  box-sizing: border-box;
  cursor:
    url("/images/cursors/point.png") 8 5,
    auto;
}

*:active {
  cursor:
    url("/images/cursors/grab.png") 8 5,
    auto;
}

html {
  height: 100%;
}

body {
  background-color: oklch(84.9% 0.09 225.75);
  font-family: "Comic Neue", sans-serif;
  font-size: large;
  padding: var(--margins);
}

.page {
  max-width: 900px;
  margin: auto;
}

header,
.avatar,
.info,
.links,
.button-card,
main,
.mutuals,
.not-mutuals,
.card {
  padding: 10px;
  border: 2px solid black;
  border-radius: 5px;
  box-shadow:
    7px 7px oklch(56.6% 0.06 225.75),
    7px 7px 0 1px black;
}

header {
  min-height: 150px;
  margin: var(--margins);
  background-image: url("/images/header.webp");
  background-size: 100%;
  background-position-y: 38%;
}

.content {
  display: flex;
  gap: 0 var(--margins);
  flex-wrap: wrap;
  margin-bottom: var(--margins);
}

aside {
  font-size: 90%;
  flex: 40px;
}

.avatar {
  max-width: 60%;
  padding: 0;
  margin: 0 20% var(--margins);
}

.info {
  background-color: oklch(84.9% 0.09 10.73);
  margin-bottom: var(--margins);
}

.links {
  background-color: oklch(84.9% 0.09 144.31);
  margin-bottom: var(--margins);
}

.button-card {
  background-color: oklch(84.9% 0.09 91.02);
  margin-bottom: var(--margins);
}

main {
  background-color: oklch(92.5% 0.009 106.58);
  flex: 600px;
}

footer {
  margin: var(--margins);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.mutuals {
  background-color: oklch(84.9% 0.09 10.73);
  flex-basis: 300px;
  text-align: center;
  margin-right: var(--margins);
  margin-bottom: var(--margins);
}

.not-mutuals {
  background-color: oklch(84.9% 0.09 313.58);
  flex-basis: 400px;
  flex-grow: 1;
  text-align: center;
  height: fit-content;
}

a {
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
}

p,
h1,
h2,
h3 {
  margin: 0;
  widows: 2;
}

p:not(:first-child),
h1:not(:first-child),
h2:not(:first-child),
h3:not(:first-child) {
  margin-top: 1em;
}

ul {
  list-style-type: square;
  padding-left: 1em;
}

.card {
  background-color: oklch(84.9% 0.09 91.02);
  display: inline-block;
  margin: var(--margins);
}

code {
  font-family: "Fira Code", monospace;
  font-size: medium;
}

button {
  font-family: inherit;
  font-weight: bold;
  font-size: larger;
}