Increase the size of the shield

Question

I’m having trouble getting the shield to fill up by the end of the page. How do I do this?

.circle {
  margin: auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #3c404f;
  background: linear-gradient(to right, var(--color1), var(--color2), var(--color1));
}

#circle1 {
  width: 256px;
  height: 256px;
  --color1: red;
  --color2: #C10101;
}

#circle2 {
  width: 206px;
  height: 206px;
  --color1: white;
  --color2: white;
}

#circle3 {
  width: 156px;
  height: 156px;
  --color1: red;
  --color2: #C10101;
}

#circle4 {
  width: 106px;
  height: 106px;
  --color1: blue;
  --color2: #02264D;
}

#star {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 35px solid white;
  transform: rotate(180DEG);
}

#star:before {
  position: absolute;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 35px solid white;
  transform: rotate(70DEG);
  content: "";
  left: -50px;
}

#star:after {
  position: absolute;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 35px solid white;
  transform: rotate(-70DEG);
  content: "";
  left: -48.8px;
  top: 0.1px;
}

<div id="circle1" class="circle">
  <div id="circle2" class="circle">
    <div id="circle3" class="circle">
      <div id="circle4" class="circle">
        <div id="star">
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

You can use VMIN instead of pixels. So the size will be set equal to the smallest screen size. In case the PC would be the height of the screen, and the mobile phone standing would be the width.

This way the shield will always occupy the whole screen and will not be cut.

for example:

.circle1{
     width: 100vmin;
     height: 100vmin;
}
.cicle2{
     width: 96vmin;
     height: 96vmin;
}

I used the values as an example, but for your shield you will have to calculate in percentage. 100vmin=100% of the smaller screen size.

I hope I’ve helped.