/**************
 *  border.css  *
 **************/

:root {
/*** 色指定変数 ***/
  --color: white;
  --background: black;
  --innerBackground: black;
  --c1: red;
  --c2: yellow;
  --c3: cyan;

/*** サイズ指定変数 ***/
  --outerWidth: 65vw;
  --outerHeight: 35vw;
  --borderWidth: 0.2vw;
  --outerRadius: 5vw;
  --fontSize: 9vw;
  --outerCircleSize: 10vw;
  --innerCircleSize: calc( var(--outerCircleSize) - var(--borderWidth) * 2 );

/*** 位置指定変数 ***/
  --circleTop: calc( (var(--outerHeight) - var(--outerCircleSize)) / 2 );
  --partsSidePosition: calc( var(--outerCircleSize) / -2 );
}
 
body { 
  background: var(--background);
  color: var(--color);
  padding: 5vw;
}

.inner{
  text-align: center;
  font-size: var(--fontSize);
  line-height: 1;
}

* { box-sizing: border-box;}


/*** ボーダーになる要素 ***/
.border {
  width: var(--outerWidth);
  height: var(--outerHeight);
  margin: auto;
  padding: var(--borderWidth);
  position: relative;
  transition: all 300ms cubic-bezier(0.03, 0.98, 0.53, 0.99) 0s;
  background: linear-gradient(
    to right,var(--c1),var(--c2),var(--c3) );
  border-radius: var(--outerRadius);
}

/*** 外側のサークル ***/
.border:before, .border:after {
  content: "";
  display: block;
  position: absolute;
  top: var(--circleTop);
  width: var(--outerCircleSize);
  height: var(--outerCircleSize);
  border-radius: 50%;
  z-index: 2;
}
.border:before {
  left: var(--partsSidePosition);
  background: var(--c1);
}
.border:after {
  right: var(--partsSidePosition);
  background: var(--c3);
}


/*** 内側の要素 ***/
.notch {
  width: 100%;
  height: 100%;
  position: relative;
}

/*** 内側のサークル ***/
.notch:before, .notch:after {
  content: "";
  display: block;
  position: absolute;
  top: var(--circleTop);
  width: var(--innerCircleSize);
  height: var(--innerCircleSize);
  border-radius: 50%;
  background: var(--background);
  z-index: 3;
}
.notch:before { left: var(--partsSidePosition);}
.notch:after { right: var(--partsSidePosition);}


/*** はみ出したサークルのカバー ***/
.left, .right {
  position: absolute;
  top: var(--circleTop);
  width: calc( var(--outerCircleSize) / 2 );
  height: var(--outerCircleSize);
  background: var(--background);
  z-index: 4;
}
.left { left: var(--partsSidePosition);}
.right { right: var(--partsSidePosition);}