: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));
}
body{
  background-color: var(--mBackground);
  margin: 0 clamp(100px,10vw,10px);
}

header{
  display: flex;
  justify-content: center;
}
#logo a{
  text-decoration: none;
  color: var(--mPrimary);
}
/*Activating all*/
#logo a:active #logo{
  background-color: #fff;
}

#logo{
  display: grid;
  text-align: center;

  margin: min(5vw, 50px) 0;
  padding: 1vw 1vw min(2vw, 150px);

  line-height: min(5vw, 100px);
  font-size: min(10vw, 200px);
  
  background-color: hsl(from var(--mSecondary) h s calc(l - 10));
  border-radius: 1vw;
  transition: all 0.25s;
}
#logo:hover {
  background-color: var(--mSecondary);
  border-radius: 5vw;
}


#pages-embed{
  display: flex;
  justify-content: center;
  height: max(70vw,300px);
}
#pages-embed iframe{
  height: 100%;
  width: 100vw;
}