@charset 'UTF-8';

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300&display=swap');

/** 
* reset
**/
:root {
  --black: #000000;
  --white: #ffffff;
  --color-primary: #01a69b;
}

/**
* common
**/
body {
  margin: 0;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  background-color: var(--white);
  color: var(--black);
}
.wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
}
h3 {
  margin: 1rem;
}
p {
  margin: 1rem;
}
.mask {
  width: 300px;
  height: 200px;
  background-color: var(--color-primary);
  mask-size: 300px 200px;
}
.multi {
  mask-image: url("img/mask1.png"), url("img/mask2.png");
}

/* それぞれの領域を足し合わせます。 */
.add { 
  mask-composite: add;
}
/* 1つ目のマスク画像から2つ目のマスク画像で減算 */
.subtract {
  mask-composite: subtract;
}
/* マスク画像の塗りが重なる部分をマスク領域 */
.intersect {
  mask-composite: intersect;
}
/* マスク画像の塗りが重なる部分以外をマスク領域 */
.exclude {
  mask-composite: exclude;
}