/*Downloaded from https://www.codeseek.co/13lank-null/html-andamp-css-practice-vEPMLQ */
body {
background: #FFFADD;
}
#wrapper{
position: relative;
}
/* circles */
#circle {
margin: 20% auto;
width: 50%;
padding-bottom: 50%;
height: 0;
background-color: #FE722E;
border-radius: 50%;
border: 5px solid #4A0437;
}
#circle::before {
content: '';
display: block;
position: relative;
width: 88%;
height: 0;
padding-bottom: 88%;
border-radius: 50%;
margin: 6% auto;
background: radial-gradient(circle, transparent 20%, #FF935A 69.5%, #FCD42A 2%);
-webkit-filter: blur(4.5px);
}
#circle::after {
content: '';
display: block;
position: relative;
width: 20%;
height: 0;
padding-bottom: 20%;
border-radius: 50%;
background-color: #FCD42A;
border: 5px solid #4A0437;
margin: -82% 15%;
}
.in-circle {
position: absolute;
width: 5%;
height: 0;
padding-bottom: 5%;
border: 4px dotted #4A0437;
border-radius: 50%;
left: 35%;
top: 24%;
}
/* line */
.ln1 {
display: box;
position: absolute;
width: 42%;
height: 20%;
border-top: 5.5px solid #4A0437;
top: 19.3%;
left: 39.9%;
border-radius: 0 3px 3px;
}
.ln1:after {
content: '';
position: absolute;
width: 100%;
border: 3px solid #4A0437;
top: 40%;
left: 8%;
border-radius: 5px 20px 20px;
}
.ln1:before {
content: '';
position: absolute;
width: 65%;
border-top-width: 3px;
border-top-style: solid;
border-image: -webkit-linear-gradient(left,rgba(44,2,53,1),rgba(74,4,55,1),rgba(74,4,55,.3),rgba(252, 214, 44, .1),rgba(0, 0, 0, 0))20% round;
top: 14%;
left: 6%;
border-radius: 5px 20px 20px;
}
.ln2 {
display: box;
position: absolute;
width: 33%;
height: 20%;
border-top: 5.5px solid #4A0437;
top: 30%;
left: 0;
border-radius: 5px 3px 3px;
}
.ln2:after {
content: '';
position: absolute;
width: 100%;
border: 3px solid #4A0437;
top: 38%;
left:8%;
border-radius: 20px 20px 20px;
}
.ln2:before {
content: '';
position: absolute;
width: 30%;
border-top-width: 3px;
border-top-style: solid;
border-image: -webkit-linear-gradient(right,rgba(44,2,53,1),rgba(74,4,55,.5),rgba(254,114,46,.2), rgba(254,114,46,0))20% round;
top: 14%;
left: 69.5%;
border-radius: 20px 20px 20px;
}
.ln3 {
display: box;
position: absolute;
width: 60%;
height: 20%;
border-top: 5.5px solid #4A0437;
top: 70%;
left: 20%;
border-radius: 5px 3px 3px;
z-index: 3;
}
.ln3:after {
content: '';
position: absolute;
width: 30%;
border-top-width: 3px;
border-top-style: solid;
border-image: -webkit-linear-gradient(right,rgba(44,2,53,1),rgba(74,4,55,1),rgba(74,4,55,.3),rgba(252, 214, 44, .2),rgba(252, 214, 44, 0))20% round;
top: 40%;
left: 25%;
border-radius: 20px 20px 20px;
}
.ln3:before {
content: '';
position: absolute;
width: 30%;
border-top-width: 3px;
border-top-style: solid;
border-image: -webkit-linear-gradient(left,rgba(44,2,53,1),rgba(74,4,55,1),rgba(74,4,55,.3),rgba(252, 214, 44, .2),rgba(252, 214, 44, 0))20% round;
top: 14%;
left: 47%;
border-radius: 20%;
}
.ln4 {
width: 40%;
position: absolute;
border: 3px solid #4A0437;
border-radius: 36px;
top: 85%;
left: 58%;
}
/* triangle */
.tr1 {
position: absolute;
width: 16%;
height: 0;
padding-left:16%;
padding-bottom: 16%;
overflow: hidden;
top: 39%;
left: 39.5%;
z-index: 1;
}
.tr1:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left:-400px;
border-left: 400px solid transparent;
border-right: 400px solid transparent;
border-bottom: 500px solid #4A0437;
}
.in-tr1 {
position: absolute;
width: 15%;
height: 0;
padding-left:15%;
padding-bottom: 14%;
overflow: hidden;
top: 43%;
left: 40.5%;
z-index: 1;
}
.in-tr1:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left:-400px;
border-left: 400px solid transparent;
border-right: 400px solid transparent;
border-bottom: 500px solid #FF9772;
}
.tr2 {
position: absolute;
width: 10%;
height: 0;
padding-left:10%;
padding-bottom: 10%;
overflow: hidden;
top: 51%;
left: 33%;
}
.tr2:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left:-400px;
border-left: 400px solid transparent;
border-right: 400px solid transparent;
border-bottom: 500px solid #4A0437;
}
.in-tr2 {
position: absolute;
width: 8%;
height: 0;
padding-left:8%;
padding-bottom: 8%;
overflow: hidden;
top: 55%;
left: 35%;
z-index: 0;
}
.in-tr2:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left:-400px;
border-left: 400px solid transparent;
border-right: 400px solid transparent;
border-bottom: 500px solid #FF9772;
}
/* Dots */
ul {
position: absolute;
transform: rotate(-40deg);
top: 44%;
left: 55%;
z-index: 5;
float: left;
}
/* Footer */
footer {
margin: 0 auto;
text-align: center;
left: 50%;
color: #FE722E;
}
a {
color: #4A0437;
text-decoration: none;
}