body {
  background-color: #11141c;
  height: 100vh;
 /* overflow: hidden;*/
}
h1 {
  font-family: "Audiowide", cursive;
  color: #f5e4c1;
  font-size: 5rem;
  text-shadow: 6px 6px #cf5729;
  text-align: center;
  margin-bottom:100px;
}
.year {
  display: flex;
  justify-content: center;
    margin-right: 0%;
}
#font{
  font-size: 48px;
  color:#40eaaf;
}

.copyright4 p {
  font-size: 20px;
font-weight: 300;
    line-height: 45px;
}

.number {
  margin: 0 10px;
}
.shape {
  height: 100px;
  width: 100px;
}
.two > .top,
.two > .bottom,
.zero {
  display: flex;
}
.two > .top > div:nth-of-type(1) > .shape {
  border-radius: 50rem 0 0;
  background-color: #efd84e;
}
.two > .top > div:nth-of-type(1) > .shape:nth-of-type(2) {
  background-color: #f4e5bf;
  margin-top: 5px;
}
.two > .top > .shape {
  height: 205px;
  border-radius: 0 50rem 50rem 0;
  background-color: #10a37a;
  margin-left: 5px;
}
.two > .bottom {
  margin-top: 5px;
}
.two > .bottom > .shape:nth-of-type(1) {
  border-radius: 0 50% 0 50%;
  background-color: #7385b3;
  margin-right: 5px;
}
.two > .bottom > .shape:nth-of-type(2) {
  border-radius: 0 50rem 0 0;
  background-color: #c93054;
}
.zero .shape {
  width: 130px;
}
.zero > div > .shape {
  height: 152px;
  border-radius: 50rem 0 0 0;
  background-color: #efd84e;
}
.zero > div > .shape:nth-of-type(2) {
  border-radius: 0 0 0 50rem;
  background-color: #c93054;
  margin-top: 5px;
}
.zero > .shape {
  height: 310px;
  background-color: #f4e5bf;
  border-radius: 0 50rem 50rem 0;
  margin-left: 5px;
}
.inactive.shape{
 opacity: 0;
}

@media screen and (max-width: 1100px){
.year {
display: flex  !important;
    justify-content: center  !important;
    padding-top: 0%  !important;
    -webkit-transform: rotate( 
0deg
 )scaleY(0.8)scaleX(0.8)  !important;
    margin-right: 4% !important;
}
.boy {
    position: absolute !important;
    left: 164vw !important;
    bottom: 48vw !important;
    width: 11.5vw !important;
    height: 28vw !important;
    animation: boy ease-in-out 300ms infinite alternate !important;
    -webkit-transform: rotate( 
0deg
 )scaleY(0.4)scaleX(0.4) !important;
}
.main {
    width: 15vw  !important;
    height: 0vw  !important;
    margin-left: 1px  !important;

}
.shadow {
margin-left: 90vw !important;
    bottom: 46vw !important;
    width: 17vw !important;
    left: 71.5vw !important;
    height: 2vw !important;
}
}


@media screen and (max-width: 800px){
.year {
display: flex  !important;
    justify-content: center  !important;
    padding-top: 0%  !important;
    -webkit-transform: rotate( 
0deg
 )scaleY(0.3)scaleX(0.3)  !important;
    margin-top: 26%  !important;
    margin-bottom: 0%  !important;
        margin-right: 0%  !important;
}
.boy {
    position: absolute  !important;
    left: 87vw  !important;
    bottom: 6vw  !important;
    width: 11.5vw  !important;
    height: 28vw  !important;
    animation: boy ease-in-out 300ms infinite alternate  !important;
}
.main {
    width: 15vw  !important;
    height: 0vw  !important;
    margin-left: 1px  !important;
    -webkit-transform: rotate( 
0deg
 )scaleY(1.3)scaleX(1.3)  !important;
}
.shadow {

    margin-left: 68vw !important;
        bottom: 4vw  !important;
    width: 13vw !important;
    left: 17.5vw !important;
    height: 2vw !important;
}
}