style.css

/* Load Google Font */
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');

/* Diagnostic */
/* {
  outline: 1px solid peachpuff;
} */

/* Style Tile with css variables */
:root {
  --color1: lightsalmon;
  --color2: #7A3A88;
  --color3: #D9B7E1;
  --font1: "Mulish", sans-serif;
}



/* wrapper */
main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  
  font-family: var(--font1);
}

article {
  background-image: url('data:image/svg+xml,%3Csvg width="52" height="26" viewBox="0 0 52 26" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%239C92AC" fill-opacity="0.4"%3E%3Cpath d="M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z" /%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
  box-shadow: inset 0 0 0 1000px rgba(158,224,123, 0.2);
}

/* on hover left colum, no background image */

article:hover {
  background-image: none;
}

h1, p {
  animation-name: fadeInUpBig;
  animation-duration: 1s;
  animation-iteration-count 1;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

p {
  width: 400px;
  animation-delay: 3s;
}


 /* .p1 {
  background: red;
  width: 600px;
} */

/* Article */
article {
  display: flex;
  flex-direction: column;
  /* main axis   */
  justify-content: center;
  /* cross axis   */
  align-items: center;
}


/* aside image */
aside img { 
  width: 100%;
  max-width: 100%;

  /* full height     */
  height: 10%;
  height: 100vh;
  object-fit: cover;
}

/* Drop Cap */
p span {
  float: left; 
  font-size: 2em;
  color: var(--color2);
  border: solid 3px var(--color3);
  border-radius: 6px;
}


/* ----------------------------------- */


/*  maximum width in pixels, tranform the layout ||
also, 'nesting' stuff via {} inside of {} */
/* mobile phone size */
@media (max-width: 480px ) {
  
  body {
    background: rgb(10, 197, 104);
  }
  
  main {
      grid-template-columns: 1fr;
  }
  
  article nav a {
    display: block;
    margin: 1em 0 1em 0;
  }
  
  p span {
    float: none;
    font-size: 1.5em;
  }
}