.permanent-marker-regular {
  font-family: "Permanent Marker", cursive;
  font-weight: 400;
  font-style: normal;
}

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

body {
    background-color: var(--main-grey);
    
}
.container {
    
    /*display: grid;*/
    display: flex;
    justify-content: center;
    align-items: center;
    color: aqua;
    /*position: relative;*/
    
}
/*
.container > div {
    width: 200px;
    height: 200px;
    background-color: cyan;
    /*position: absolute;*/
/*    margin-top: 200px;
 
    
    /*transform: rotateX(80deg);*/
    /*transform: translateX(100px); radi*/
    /*transform: rotateX(40deg); radi*/
    /*transform: rotateZ(75deg); radi*/
   
   /*transform: scale(1,5);radi*/
   /* super je */
  /* transform: skew(-50deg);
    
}

*/
/*.container > a {
    text-decoration: none;
    border: 2px solid red;
    padding: 10px 20px;
    color: brown;
    margin-top: 200px;
  */  
    /* Transition - Transition timing functions website  - https://cubic-bezier.com/#.21,.94,.95,.4*/
 /*   transition-property: all;
    transition-duration: 1s;*/
    /*transition-timing-function: ease-out;*/
    /*transition-timing-function: ease-in;*/
    /*transition-timing-function: linear;*/
  /*  transition-timing-function: cubic-bezier(.21,.94,.95,.4);*/
    /*cubic-bezier(0.25, 0.1, 0.25, 1)
    cubic-bezier(0.1, -0.6, 0.2, 0)
    cubic-bezier(0, 0, 1, 1)
    */
/*}*/
/*
.container > a:hover {
    background-color: brown;
    color: white;
}

*/

.container > div {
    width: 400px;
    height: 400px;
    background-color: #ffcc66;
    margin-top: 200px;
    border-radius: 10px;
    
    /* Animation */
    animation-name: InAndOut;
    animation-duration: 5s;
    animation-iteration-count: 1;     /*   infinite    */
    animation-timing-function: ease-in-out;
}

@keyframes InAndOut {
    0% {
        transform: scale(2);
    }
    
    25% {
        transform: scale(0.2);
        background-color: teal;
        transform: skew(10deg);
    }
    
    50% {
        background-color: #00ffff;
        transform: skew(40deg);
        border-radius: 50%;
    }
    
    75% {
        background-color: #990033;
        transform: skew(-50deg);
        border-radius: 50%;
    }
}


div > p {
    padding: 30px;
    margin-top: 50px;
    font-family: "Permanent Marker", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 17px;
}