@import url('https://fonts.googleapis.com/css2?family=Playwrite+NZ+Basic&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Slab:wght@100..900&family=Share+Tech&display=swap');
body {
  font-family: "Roboto Mono",Mono ;
}

:root {
  --bg: #fff;
  --fg: #000;
  --a: #00f;

  @media (prefers-color-scheme: dark) {
    --bg: #000;
    --fg: #fff;
    --a: #f00;
  }
}
* {
  margin: 0;
  padding: 0;
  
}

body{
  background:var(--bg);
  display:flex;
  justify-content: center;
  font-family:"Roboto Mono",Mono;
}

#page{
  background:var(--bg);
  color:var(--fg);
  padding:1rem;
  display:flex;
  flex-direction:column;
}
#page > *{
  margin-bottom: 1rem;
}
header > *,section > *,footer > *{
  margin-bottom: 0.5rem;
}
#avatar{
  width:12rem;
  height:12rem;
  border-radius:50%;
}
#arcet {
  display:flex;
  align-items:center;
  gap:0.5rem;
}
#arcet *{
  margin:0;

}
ul{
  margin-left:1rem;
}
.collection{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:0.5rem;
}
li{
  padding:0.25rem;
  list-style-type: "✨";
}
p{
  margin-bottom: 1rem;
}
a{
  color:var(--a);
  text-decoration:none;
}
h1,h2{
  font-family:"Roboto Mono",Mono Slab;
}