:root{
  --mPrimary: hsl(300, 63%, 80%);
  --mAccent: hsl(from var(--mPrimary) h s calc(l - 30));
  --mText: hsl(from var(--mPrimary) h s calc(l + 10));
  --mBackground: hsl(240, 14%, 10%);
  --mSecondary: hsl(from var(--mBackground) h s calc(l + 30));
}
.lightmode{
  --mPrimary: hsl(300, 63%, 20%);
  --mAccent: hsl(from var(--mPrimary) h s calc(l + 30));
  --mText: hsl(from var(--mPrimary) h s calc(l - 10));
  --mBackground: hsl(240, 14%, 70%);
  --mSecondary: hsl(from var(--mBackground) h s calc(l - 30));
}

html{
  background-color: var(--mBackground);
}

body{
  margin: 2vw 0;
}

header{
  display: flex;
  justify-content: center;
  text-align: center;
}
h1{
  color: var(--mPrimary);
  background-color: var(--mSecondary);
  font-size: 5vw;
  padding: 1vw;
  border-radius: 1vw;
}

span a{
  color: var(--mAccent);
  text-decoration: none;
  transition: all 0.15s;
}
span a:hover{
  color: var(--mPrimary);
}

main{
  display: grid;
  justify-content: center;
}

.item{
  margin-top: 3vw;
  border: solid var(--mAccent);
  border-width: 0 0 0 1vw;
  border-radius: 0.5vw;
}
.item a{
  color: var(--mText);
  text-decoration: none;
  background-color: var(--mSecondary);
  font-size: 5vw;
  margin: 1vw;
  padding: 0.5vw;
  border-radius: 1vw;
}
.child a{
  background-color: hsl(from var(--mSecondary) h s calc(l + 15));
}

.family{
  border: solid var(--mAccent);
  border-width: 0 0 0 1vw;
}
.parent{
  margin: 0;
  border: none;
}
.child{
  border-radius: 0;
}