Css import and page style - html

Question

Hello and thank you in advance.
I have 3D cube on my site.
When I import external CSS file, it just makes my cube go wrong. Cube goes to left, and I can't move it again.
When I delete external css, everything works as it should.
#import url("mojmeni.css"); - located in head
body { font-family: sans-serif;
font-family: monospace;
text-transform: uppercase;
backgroud: #999;
}
.container {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
ul {
display: flex;
flex-direction: row;
font-size: 22px;
}
li {
position: relative;
list-style-type: none;
margin-right: 50px;
cursor: pointer;
color: black;
}
li:last-child {
margin-right: 0px;
}
li:after {
content: "";
position: absolute;
z-index: -1;
left: 50%;
transform: translateX(-50%) rotate(0deg);
}
li:nth-child(1):after {
background: #ED4337;
}
li:nth-child(2):after {
background: #A1D3A2;
}
li:nth-child(3):after {
background: #50B8E7;
}
li:nth-child(4):after {
background: #efe200;
}
li:nth-child(1):after {
clip-path: polygon(6% 10%, 100% 0, 64% 65%, 28% 65%);
height: 85px;
width: 75px;
bottom: -47px;
animation: stretch 2s ease infinite;
}
#keyframes stretch {
25% {
transform: translateX(-50%) rotate(2deg) scaleY(0.93);
}
50% {
transform: translateX(-50%) rotate(-2deg) scaleX(0.93);
clip-path: polygon(6% 20%, 100% 0, 64% 65%, 28% 65%);
}
75% {
transform: translateX(-50%) rotate(3deg) scale(1.05);
}
}
li:nth-child(2):after {
clip-path: polygon(61% 0%, 100% 19%, 71% 100%, 0% 100%);
height: 55px;
width: 75px;
bottom: -18px;
animation: stretch2 1.5s ease infinite;
}
#keyframes stretch2 {
25% {
transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
}
50% {
transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
clip-path: polygon(61% 0%, 100% 19%, 71% 100%, 12% 100%);
}
75% {
transform: translateX(-50%) rotate(3deg) scale(1.05);
clip-path: polygon(61% 0%, 80% 19%, 71% 100%, 12% 100%);
}
}
li:nth-child(3):after {
clip-path: polygon(0% 0%, 100% 0%, 100% 99%, 0% 57%);
height: 55px;
width: 45px;
bottom: -18px;
animation: stretch3 2s ease infinite;
}
#keyframes stretch3 {
25% {
transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
}
50% {
transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
clip-path: polygon(10% 5%, 100% 0%, 100% 99%, 0% 57%);
}
75% {
transform: translateX(-50%) rotate(3deg) scale(1.05);
clip-path: polygon(0% 0%, 100% 0%, 100% 99%, 10% 37%);
}
}
li:nth-child(4):after {
clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
height: 55px;
width: 45px;
bottom: -18px;
animation: stretch4 2s ease infinite;
}
#keyframes stretch4 {
25% {
transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
}
50% {
transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
}
75% {
transform: translateX(-50%) rotate(3deg) scaleY(1.05);
clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
}
}
li:hover:after {
animation: boink 1s ease forwards 1;
}
#keyframes boink {
80% {
transform: scaleX(1.9) scaleY(0.6) translateX(-30%);
}
}
#media (max-width: 600px) {
li {
font-size: 15px;
}
}
This is external css file
What is wrong with external css file so I can't insert it properly ? Thank you.
I have been stucked with this code.
Thank you very much.
https://www.jqueryscript.net/slider/3D-Cube-Slider-jQuery-cubeGallery.html
When I insert cube, everything works as it should be. But not when I insert external css.
Thank you.