:root {
  --bg: #1a1e2d;
  --green: #a5ea9b;
  --pink: #ff61d8;
  --blue: #569cfa;
  --orange: #ffcc81;
  --cyan: #7ed1e2;
}
@media (min-width: 1025px) {
.test{
  position: relative;
  height: 100vh;
  width: 80vw;
  background: var(--bg);
  display: flex;
  overflow: hidden;
}
    .catmain {
        position: relative;
        transform: translate(100%, -70%);
        height: 50%;
        width: 50%;
    }

#bongo-cat {
  fill: var(--bg);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
  height:60%;
}
#bongo-cat .laptop-cover,
#bongo-cat .headphone .band {
  fill: none;
}
#bongo-cat .paw, #bongo-cat .head {
  stroke: var(--orange);
}
#bongo-cat .laptop-keyboard {
  stroke-width: 2;
}
#bongo-cat .terminal-code {
  stroke-width: 5;
}
#bongo-cat .music .note,
#bongo-cat .laptop-base,
#bongo-cat .laptop-cover,
#bongo-cat .paw .pads {
  stroke: var(--pink);
}
#bongo-cat .table line,
#bongo-cat .headphone .band,
#bongo-cat .headphone .speaker path:nth-child(3) {
  stroke: var(--green);
}
#bongo-cat .terminal-frame,
#bongo-cat .laptop-keyboard,
#bongo-cat .headphone .speaker path:nth-child(2) {
  stroke: var(--blue);
}
#bongo-cat .terminal-code,
#bongo-cat .headphone .speaker path:first-child {
  stroke: var(--cyan);
}
}


@media (min-width: 481px) and (max-width: 1025px) {
.catmain{
   margin-left: 300px;
   margin-top: -130px;
}
.test{
  position: absolute;
  height: 100vh;
  width: 100vw;
  background: var(--bg);
  display: flex;
  overflow: hidden;
}

.container1 {
  
  width: 50vw;
  height: 50vh;
}
.container1 svg {
  height: 150%;
  width: 150%;
  overflow: hidden;
}

#bongo-cat {
  fill: var(--bg);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}
#bongo-cat .laptop-cover,
#bongo-cat .headphone .band {
  fill: none;
}
#bongo-cat .paw, #bongo-cat .head {
  stroke: var(--orange);
}
#bongo-cat .laptop-keyboard {
  stroke-width: 2;
}
#bongo-cat .terminal-code {
  stroke-width: 5;
}
#bongo-cat .music .note,
#bongo-cat .laptop-base,
#bongo-cat .laptop-cover,
#bongo-cat .paw .pads {
  stroke: var(--pink);
}
#bongo-cat .table line,
#bongo-cat .headphone .band,
#bongo-cat .headphone .speaker path:nth-child(3) {
  stroke: var(--green);
}
#bongo-cat .terminal-frame,
#bongo-cat .laptop-keyboard,
#bongo-cat .headphone .speaker path:nth-child(2) {
  stroke: var(--blue);
}
#bongo-cat .terminal-code,
#bongo-cat .headphone .speaker path:first-child {
  stroke: var(--cyan);
}


}

@media (max-width: 481px) {
  .catmain{
   margin-left:90px ;
   margin-top: -200px;
}
.test{
  position: absolute;
  height: 100vh;
  width: 100vw;
  background: var(--bg);
  display: flex;
  overflow: hidden;
}

.container1 {
  
  width: 80vw;
  height: 80vh;
}
.container1 svg {
  height: 100%;
  width: 100%;
  overflow: visible;
}

#bongo-cat {
  fill: var(--bg);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}
#bongo-cat .laptop-cover,
#bongo-cat .headphone .band {
  fill: none;
}
#bongo-cat .paw, #bongo-cat .head {
  stroke: var(--orange);
}
#bongo-cat .laptop-keyboard {
  stroke-width: 2;
}
#bongo-cat .terminal-code {
  stroke-width: 5;
}
#bongo-cat .music .note,
#bongo-cat .laptop-base,
#bongo-cat .laptop-cover,
#bongo-cat .paw .pads {
  stroke: var(--pink);
}
#bongo-cat .table line,
#bongo-cat .headphone .band,
#bongo-cat .headphone .speaker path:nth-child(3) {
  stroke: var(--green);
}
#bongo-cat .terminal-frame,
#bongo-cat .laptop-keyboard,
#bongo-cat .headphone .speaker path:nth-child(2) {
  stroke: var(--blue);
}
#bongo-cat .terminal-code,
#bongo-cat .headphone .speaker path:first-child {
  stroke: var(--cyan);
}



}