*{
    margin: 0;
    padding: 0;
    box-sizing: 0;
}

li{
    list-style: none;
}

body{
    width: 100%;
}

.background{
width: 100%;
height: 100vh;
/* background: linear-gradient(to bottom right, #8ce , #7bd , #6ad , #6ac  , #59c, #48b, #27a); */
/* background: linear-gradient(to bottom, #8ce , #7bd , #6ad , #6ac  , #59c, #48b, #27a, #16a, #169); */
background: linear-gradient(to top, #84cff5, #71bfe7, #84cff5, #71bfe7, #7abddf, #71bfe7, 
#65bde9, #65bde9, #53a6cf,#4a9ec7, #4593b9, #4481a0, #326985);
}

.content{
    height: auto;
    position: absolute;
    left: 150px;
    z-index: 1;
  
}

.bear{
    position: relative;
    left: 200px;
    top: 200px;
    z-index: 5;
}

.bear:after{
content: "";
display: inline-block;
width: 150px;
height: 70px;
background: #bef;
position: absolute;
top:  160px;
left: -45px;
z-index: -2;
border-radius: 50%;
}

.head{
    background: #fff;
    width: 70px;
    height: 210px;
    border-radius: 30px 30px 0 0;
 
}

.neck, 
.neck:before{
    width: 100px;
    height: 60px; 
    background: #fff;
    position: relative;
    top: 32px;
    left: 0px;
    transform: rotate(70deg);
    border-radius: 10% 10px 0 0 ;
}

.neck:before{
    content: "";
    display: inline-block;
    transform: rotate(-135deg);
    position: absolute;
    top: 30px;
    left: -12px;
}

.ears ul li{
  width: 20px;
  height: 15px;
  background: #bbb;
  position: relative;
  top: -66px;
  left: 0px;
  border-radius:40px 40px 50% 50%;
  transform: rotate(-25deg);
  z-index: -1;
}

.ears ul li:nth-child(2){
    left: 56px;
    top: -78px;
    transform: rotate(45deg);
}

.ears li:after{
    content: "";
    display: inline-block;
    width: 10px;
    height: 6px;
    background:#676;
    border-radius:40px 40px 50% 50%;
    position: absolute;
    left: 5px;
    top: 6px;
}

.ears ul li:nth-child(2):after{
    left: 4px;
    top: 8px;
}

.eyes li{
    width: 5px;
    height: 5px;
    background: black;
    border-radius: 50%;
    position: relative;
    left: 15px;
    top: -70px;
}

.eyes li:nth-child(2){
    left: 50px;
    top: -75px;
}

.nose{
    width: 30px;
    height: 40px;
    position: relative;
    background: #bbb;
    left: 20px;
    top: -80px;
    border-radius: 10px;

}

.nose:before{
 display: inline-block;
 content: "";
 width: 20px;
 height: 6px;
 border-radius: 50%;
 background: black;
 position: absolute;
 top: 5px;
 left: 5px;
}

.mouth{
    width: 5px;
    height:7px;
    background: black;
    position: relative;
    left: 35px;
    top: -95px;
    z-index: 2;
    border-radius: 50%;
}

.cheeks li{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #bbb;
    position: relative;
    top: -115px;
    left: 4px;
}

.cheeks li:nth-child(2){
    left: 55px;
    top: -127px;
}

.arms li{
    width: 65px;
    height: 90px;
    background: #fff;
    position: relative;
    top: -140px;
    left: -37px;
    border-radius: 30%;
    transform: rotate(23deg);
    z-index: 1;
}

.arms li:nth-child(2){
    left: 36px;
    top: -227px;
    transform: rotate(-20deg);

}

.arms li:before, 
.arms li:after{
    display: inline-block;
    content: "";
    position: absolute;
   
}

.arms li:before{
    width: 53px;
    height:20px;
    top: 68px;
    left: 6px;
    transform: rotate(0deg);
    box-shadow: 1px 2px 2px #bbb;
    border-radius: 40px;
}

.arms li:after{
    width: 20px;
    height: 80px;
    transform: rotate(-21deg);
    left: 33px;
    top: -3px;
    box-shadow:2px 0px 2px #bbb inset;
    border-radius: 50%;
}

.arms li:nth-child(2):before{
    transform: rotate(-5deg);
    left: 7px;
    top: 67px;
    box-shadow: -1px 2px 2px #bbb;
}

.arms li:nth-child(2):after{
    transform: rotate(22deg);
    left: 17px;
    top: -4px;
    box-shadow:-2px 0px 2px #bbb inset;
}

.left-nails, 
.right-nails{
position: relative;
top: 10px;
z-index: 2;
}

.right-nails{
left: 2px;
top: 11px;
}

.left-nails li,
.right-nails li{
    width: 2px;
    height: 6px;
    background: black;
    position: relative;
    border-radius: 50%;
}

.right-nails li{
    transform: rotate(45deg);
    left: 51px;
    top: -267px;
}

.left-nails li{
    top: -250px;
    left: 6px;
    transform: rotate(-40deg);
    
}

.left-nails li:nth-child(2){
    left: 4px;
    top: -251px;
}

.left-nails li:nth-child(3){
    left: 0px;
    top: -254px;
}

.right-nails li:nth-child(2){
    left: 53px;
    top: -268px;
}

.right-nails li:nth-child(3){
    left: 58px;
    top: -270px;
}

.belly{
    width: 130px;
    height: 78px;
    border-radius:20px 20px 50% 50%;
    background: #fff;
    position: relative;
    top: -285px;
    left: -34px;
    z-index: -1;
}

.feet li{
    width: 30px;
    height: 35px;
    background:#666;
    position: relative;
    top: -350px;
    border-radius: 50%;
    left: -10px;
 
}

.feet li:nth-child(2){
left: 40px;
top: -385px;
}

.feet li:before,
.feet li:after{
    content: "";
    display: inline-block;
    width: 30px;
    height: 45px;
    border-radius: 20px 30px 40px 40px;
    background:#666;
    position: absolute;
}

.feet li:before{
    transform: rotate(-3deg);
    left: 1px;
    top: 13px;
    height: 48px;
}


.feet li:after{
    left: -5px;
    top: 15px;
    transform: rotate(13deg);
}

.feet li:nth-child(2):before{
    left: 1px;
    top: 12px;
    transform: rotate(-4deg);
    border-radius: 20px 20px 30px 20px;
}

.left-toes, .right-toes{
    position: relative;
    top: 5px;
}

.left-toes li,
.right-toes li{
    width:7px;
    height: 10px;
    border-radius: 50%;
    background-color: #333;
    position: relative;
    top: -410px;
    left: -7px;
}

.left-toes li:nth-child(2),
.right-toes li:nth-child(2){
    left: 0px;
    top: -420px;
    transform: rotate(10deg);
}

.right-toes li:nth-child(2){
    transform: rotate(-5deg);
    top: -480px;
    left: 54px;
}

.left-toes li:nth-child(3), 
.right-toes li:nth-child(1){
    transform: rotate(-10deg);
    width: 10px;
    height: 15px;
    top: -434px;
    left: 7px;
}

.right-toes li:nth-child(1){
    top: -470px;
    left: 45px;
    transform: rotate(15deg);
}

.right-toes li:nth-child(3){
  top: -490px;
  left: 60px;

}

.left-toes li:nth-child(4), 
.right-toes li:nth-child(4){
  width: 25px;
  height: 20px;
  top: -425px;
  left: -9px;
}

.right-toes li:nth-child(4){
    left: 40px;
    top: -480px;
}

.fur{
    width: 2px;
    height: 5px;
    background: #bbb;
    position: relative;
    top: -676px;
    left: 30px;
    z-index: 1;
    border-radius: 50%;
    box-shadow: 6px -2px 0px #bbb ,
                12px -2px 0px #bbb ,
                -40px 55px 0px #bbb ,
                -30px 55px 0px #bbb, 
                -55px 84px 0px #bbb, 
                -50px 87px 0px #bbb, 
                -45px 90px 0px #bbb, 
                -15px 75px 0px #bbb, 
                -5px 80px 0px #bbb,
                4px 75px 0px #bbb,
                20px 60px 0px #bbb,
                28px 55px 0px #bbb, 
                35px 50px 0px #bbb,
                16px 90px 0px #bbb, 
                20px 85px 0px #bbb, 
                30px 95px 0px #bbb, 
                50px 95px 0px #bbb, 
                20px 105px 0px #bbb, 
                15px 107px 0px #bbb, 
                10px 110px 0px #bbb, 
                -5px 100px 0px #bbb,
                -10px 98px 0px #bbb, 
                -15px 95px 0px #bbb, 
                -40px 105px 0px #bbb, 
                -45px 105px 0px #bbb, 
                -50px 102px 0px #bbb, 
                -65px 122px 0px #bbb, 
                -60px 125px 0px #bbb,
                -55px 130px 0px #bbb, 
                -5px 130px 0px #bbb, 
                0px 125px 0px #bbb, 
                10px 135px 0px #bbb,
                15px 130px 0px #bbb,
                45px 120px 0px #bbb,
                50px 118px 0px #bbb, 
                55px 115px 0px #bbb,
                65px 125px 0px #bbb,
                60px 130px 0px #bbb, 
                50px 140px 0px #bbb,
                46px 143px 0px #bbb, 
                42px 146px 0px #bbb, 
                5px 146px 0px #bbb, 
                0px 143px 0px #bbb, 
                -5px 145px 0px #bbb, 
                -4px 160px 0px #bbb, 
                4px 165px 0px #bbb, 
                -3px 175px 0px #bbb, 
                -60px 160px 0px #bbb, 
                -53px 158px 0px #bbb, 
                -47px 158px 0px #bbb, 
                -50px 170px 0px #bbb, 
                -55px 175px 0px #bbb, 
                45px 160px 0px #bbb,
                52px 160px 0px #bbb, 
                60px 165px 0px #bbb, 
                55px 175px 0px #bbb, 
                45px 180px 0px #bbb;
}

.ice li{
    position: relative;
    z-index: -3;
}

.ice li:nth-child(1){
    width: 240px;
    height: 60px;
    top: -340px;
    left:100px;
    transform: skewX(60deg);
    
    background: #dff;
}

.ice li:nth-child(2){
    width: 0;
    height: 0;
    border-width: 40px 80px 20px 0;
    border-style: solid;
    border-color: transparent #dff transparent transparent;
    top: -400px;
    left:21px;
    transform: skewX(60deg);
}

.ice li:nth-child(3){
    width: 240px;
    height: 50px;
    background: #dff;
    transform: skewX(-40deg);
    top: -401px;
    left: 130px;
    z-index: -1;
}

.ice li:nth-child(4){
    width: 120px;
    height: 55px;
    background: #3be;
    top: -465px;
    left: 39px;
    transform: skewY(10deg);
    z-index: -4;
    box-shadow: 0px -1px 10px #8ce inset;
}

.ice li:nth-child(5){
    width: 239px;
    height: 55px;
    background: #8df;
    top: -456px;
    left: 110px;
    z-index: -1;
    box-shadow: 0px -1px 10px #8ce inset;
}

.ice li:nth-child(6){
    background: #4cf;
    width: 43px;
   height: 56px;
   top: -536px;
   left: 349px;
   transform: skewY(-50deg);
   box-shadow: 0px -1px 5px #8ce inset;
}

.ice li:nth-child(7){
    width: 80px;
    height: 55px;
    background:rgba(26, 125, 191, .5);
    top: -580px;
    left: 39px;
    transform: skewY(10deg);
    z-index: -3;
    box-shadow: 0px -1px 5px #8ce inset;
}

.ice li:nth-child(8){
    width: 239px;
    height: 55px;
    top: -566px;
    left: 110px;
    background: rgba(50, 139, 195, .5);
    box-shadow: 0px -1px 5px #8ce inset;
    z-index: -5;
}

.ice li:nth-child(9){
    width: 43px;
    height: 56px;
    transform: skewY(-50deg);
    background:rgba(26, 125, 192, .5);
    top: -647px;
    left: 349px;
    z-index: -5;
    box-shadow: 0px -1px 10px #8ce inset;
}

/* for ice-7*/
.ice li:nth-child(10){
    width: 80px;
    height: 55px;
    background: #8ce;
    transform: skewY(10deg);
    top: -746px;
    left: 39px;
    z-index: -4;
}

/* for ice 8*/
.ice li:nth-child(11){
    width: 239px;
    height: 55px;
    background: #8ce;
    top: -733px;
    left:110px;
    z-index: -6;
}

/* for ice-9*/
.ice li:nth-child(12){
    width: 80px;
    height: 55px;
    background: #8ce;
    width: 43px;
    height: 56px;
    transform: skewY(-50deg);
    top: -814px;
    left: 349px;
    z-index: -6;
}

.circle{
    position: relative;
    top: -150px;
}

.circle li{
    z-index: -5;
    border-radius: 50%;
    position: relative;
    /* border-color: rgba(250, 250, 250, .5); */
    border-color: rgba(0, 84, 108, .4);
    border-style: solid;
}

.circle li:nth-child(1){
    width: 480px;
    height:160px;
    border-width: 2px 0 0 2px;
    top: -800px;
    left: -10px;
}

.circle li:nth-child(2){
 width: 210px;
 height: 30px;
 border-width: 0 0 2px 0;
 top: -840px;
 left:200px;
 transform: rotate(-10deg);
}

.circle li:nth-child(3){
 width: 700px;
 height: 210px;
 border-width: 2px 0 0 2px;
 top: -1010px;
 left: -90px;
}

.circle li:nth-child(4){
    top: -1050px;
    left: 190px;
    width: 350px;
   height: 40px;
   border-width: 0 0 2px 0;
   transform: rotate(-10deg);
}

.second-bear{
    opacity: 0.3;
    top: -1760px;
    transform: scaleY(-1);
    z-index: -7;
}

.plastic{
    position: absolute;
    left: 750px;
    top: 300px;

}

.plastic li{
  position: relative;
  transform: rotate(35deg);
}

.plastic li:before, 
.plastic li:after{
    content:"";
    display: inline-block;
    position: absolute;
}

.plastic li:nth-child(1){
   width: 15px;
   height: 10px;
   background: #f99;
   left:25px; 
   top: 2px;
   border-radius: 5px 5px 0 0 ;
}

.plastic li:nth-child(1):after{
    width: 2px;
    height: 5px;
    background: #f66;
   
    top: 4px;
    box-shadow: 3px 0px 0 #f66, 
                6px 0px 0 #f66, 
                9px 0px 0 #f66, 
                12px 0px 0 #f66
    ;
}

.plastic li:nth-child(2){
    width: 12px;
    height:8px;
    background: #0bd;
    top: 0px;
    left: 21px;
}

.plastic li:nth-child(2):after{
    width: 16px;
    height: 3px;
    top: 2px;
    left: -2px;
    background: rgba(93, 205, 232);
	  border-radius: 5px;
}

.plastic li:nth-child(3){
    width: 30px;
    height: 20px;
    background: rgba(93, 205, 232, .5);
    top: -4px;
    left:4px;
    border-radius: 90px 90px 40px 40px;
    border-bottom: 5px solid #0bd;
    z-index: 5;
}

.plastic li:nth-child(3):before, 
.plastic li:nth-child(3):after{
    border-width: 1px 1px 1px 3px;
    border-style: solid;
    border-color: transparent transparent transparent rgba(204, 255, 255, 0.5);
    border-radius: 50%;
    
}

.plastic li:nth-child(3):before{
    width: 10px;
    height: 20px;
    left: 3px;
    top: 3px;
    transform: rotate(20deg);
}

.plastic li:nth-child(3):after{
    width: 0px;
    height: 18px;
    top: 26px;
    left: 2px;
}

.plastic li:nth-child(4){
    width: 31px;
    height: 6px;
    background: rgba(93, 205, 232, .5);
    left: -7px;
    top: -8px;
    border-radius: 5px 5px 0 0 ;
    z-index: 0;
    border-bottom: 5px solid #f99;
}

 .plastic li:nth-child(4):before{
    width: 31px;
    height: 0px;
    border-bottom: 15px solid #f99;
    top: 10px;
    left: 0px;
}

.plastic li:nth-child(4):after{
    width: 0;
    height: 0;
    top: 5.5px;
    left: -7px;
    border-width:19px 28px 0px 10px;
    border-style: solid;
    border-color:   transparent #b77 transparent  transparent;
    transform: rotate(0deg);
} 

/* waves around plastic*/
.plastic li:nth-child(5){
    width: 45px;
    height: 15px;
    border-width: 0px 0px 8px 8px;
    border-style: solid;
    border-color: transparent transparent rgba(0, 84, 108, .6) rgba(0, 84, 108, .6) ;
    border-radius: 50%;
    left: -30px;
    top: -19px;
    transform: rotate(0deg);
    z-index: 4;
}

/* waves around plastic*/
.plastic li:nth-child(5):before{
  border: 7px solid rgba(0, 84, 108, .4);
  border-top: none;
  border-bottom: none;
  width: 80px;
  height: 40px;
  left: -30px;
  top: -5px;
  border-radius: 50%;
}

/* waves around plastic*/
.plastic li:nth-child(5):after{
  width: 130px;
  height: 50px;
  left: -50px;
  top: -10px;
  border: 4px solid rgba(0, 84, 108, .3);
  border-top: none;
  border-bottom: none;
  border-radius: 50%;
}

.plastic li:nth-child(6), 
.plastic li:nth-child(7), 
.plastic li:nth-child(8)
{
    width: 31px;
    background: rgba(0, 102, 125, 0.4);
    border-bottom: 5px solid rgba(0, 102, 136, .4);
}

.plastic li:nth-child(6){
    height: 5px;
    border-radius: 0 0 5px 5px;
    left: -21px;
    top: -22px;
    z-index: 2;
}

.plastic li:nth-child(7){
    height: 8px;
    border-radius: 8px;
    left: -26px;
    top: -25px;
   z-index:1;
}

.plastic li:nth-child(7):before, 
.plastic li:nth-child(8):before{
  border-width: 1px 0px 1px 3px;
  border-style: solid;
  border-color: transparent transparent transparent  rgb(16, 150, 173);
  width: 7px;
  height: 9px;
  border-radius: 50%;
  top: 2px;
  left: 2px;
}

.plastic li:nth-child(8){
    height: 13px;
    border-radius: 5px 5px 10px 10px;
    top: -29px;
    left: -34px;
}

.plastic li:nth-child(8):before{
    height: 12px;
}