main.css

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  body {
    background: radial-gradient(#2d5d98, #311414 100%);
  }
  svg {
    display: block;
    margin: 0 auto;
  }  
  .st0{fill:url(#SVGID_1_);stroke:#1B272C;stroke-miterlimit:10;}
  .st1{fill:url(#SVGID_2_);}
  .st2{fill:url(#SVGID_3_);}
  .st3{fill:#FFFFFF;}
  .st4{fill:#1B272C;}
  .st5{fill:url(#SVGID_4_);}
  .st6{fill:#F9F9F9;}
  .st7{fill:url(#SVGID_5_);stroke:#1B272C;stroke-miterlimit:10;}
  .st8{fill:url(#SVGID_6_);}
  .st9{fill:url(#SVGID_7_);}
  .st10{fill:url(#SVGID_8_);}
  
  .st02{fill:url(#SVGID_1_2);stroke:#1B272C;stroke-miterlimit:10;}
  .st12{fill:url(#SVGID_2_2);}
  .st22{fill:url(#SVGID_3_2);}
  .st32{fill:#FFFFFF;}
  .st42{fill:#1B272C;}
  .st52{fill:url(#SVGID_4_2);}
  .st62{fill:#F9F9F9;}
  .st72{fill:url(#SVGID_5_2);stroke:#1B272C;stroke-miterlimit:10;}
  .st82{fill:url(#SVGID_6_2);}
  .st92{fill:url(#SVGID_7_2);}
  .st102{fill:url(#SVGID_8_2);}
  svg {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -150px;
    filter: drop-shadow(0 0 15px rgba(0,0,0,.4));
    transition: .6s all;
    transform: rotate(30deg);
    cursor: -moz-grab;
    cursor: -webkit-grab;
    cursor: grab;
  }
  svg:hover {
    filter: drop-shadow(0 0 100px rgba(250,250,250,.1));
    opacity: 1;
  }
  svg:active {
    transform: rotate(-150deg);
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
    cursor: grabbing;
  }
  .eye {
    opacity: 0.6;
  }
  .st0 {
    filter:url(#inset-and-drop-shadow1);
  }
  .st02 {
    filter:url(#inset-and-drop-shadow2);
  }
  #python-orange {
    transform: translate(168px, 183px) rotate(180deg)
  }
  
  @media (max-height: 350px) {
    svg {
      height: 200px;
      margin-top: -100px;
    }
  }
  @media (max-height: 250px) {
    svg {
      height: 100px;
      margin-top: -50px;
    }
  }