styles.css

/* gabarito my beloved */

@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400..900&display=swap');

/* mobile solid background */

body { background-color: #0E0C15; }

/* the real stuff */

#mainbox {
  /* basic text coloring/style */
  color: #A387FF;
  font-family: "Gabarito", sans-serif;
  background-color: #0E0C15;
  padding: 4vh;
  h1,h2,h3 { color: #D7CCFF; }
  ul { list-style-type: "✦ "; }
  
  /* logo silliness */
  .logo {
    width: 12vh;
    height: 12vh;
    border: 5px solid #A387FF;
    border-radius: 100%;
    transition: transform 750ms;
  }
  .logo:hover { transform: rotate(360deg); }
  
  /* link coloring */
  a {
    color: #cf87ff;
    transition: color 0.3s ease;
    text-decoration: none;
    svg {
      width: 4vh;
      height: 4vh;
      padding: 0 2vh 0 0;
      fill: #cf87ff;
      transition: fill 0.3s ease;
    }
	svg:hover { fill: #ebceff; }
  }
  a:hover { color: #ebceff; }
}

/* desktop */

@media screen and (min-width: 900px) {
  body {
    background-image: url('space.gif');
    background-size: 2160px 1428px;
  }
  #mainbox {
    width: 40%;
    height: 40%;
    margin: 10% auto 10% auto;
    word-wrap: break-word;
    border: 5px solid #A387FF;
    border-radius: 20px;
  }
  .sorry { display: none; }
}