html {
  background: var(--purple);
}

body {
  width: 350px;
  padding: 10px;
  border: 3px solid var(--black);
  background: var(--white);
  margin-left: auto;
  border-radius: 20px;
  margin-right: auto;
}

links {
  display: block;
  background: white;
  border: 2px solid var(--black);
  border-radius: 20px;
}

links a {
  display: inline-block;
  width: calc(100% - 10px);
  padding: 5px;
  border-bottom: 1px solid var(--black);
  text-decoration: none;
  color: var(--black2);
  font-family: int;
  transition: 1s background;
  background: white;
}

links mark {
  display: inline-block;
  width: calc(100% - 20px);
  padding: 10px;
  text-align: center;
  font-size: 1.5em;
  font-family: glam; 
  background: var(--yellow);
  border-bottom: 2px solid var(--black);
  
}

links mark:first-of-type {
   border-radius: 20px 20px 0px 0px;
}
links a:last-of-type {
  border-bottom: none;
  border-radius: 0px 0px 20px 20px;
}

links a:nth-of-type(odd):hover {
  background: var(--pink);
}
links a:nth-of-type(even):hover {
  background: var(--purple);
}