I'm having trouble making the shell fill up to the bottom 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>