/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/

*{
    margin: 0; padding: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    position: relative;
}
*::before, *::after{
    content: '';
    position: absolute;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
body{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    
    -webkit-box-align:center;
    
        -ms-flex-align:center;
    
            align-items:center;
    height:100vh;
    overflow:hidden;
    font-family: 'Montserrat', sans-serif;
}
main{top:-4vmin;}
/* coffin */
.coffin{
    --light-brown:#fab373;
    --dark-brown:#b97341;
    --cream:#fdfd9c;
    --radius:1.5vmin;
    --bg: linear-gradient(var(--light-brown) 70%,var(--dark-brown) 30%);
    top:10.5vmin;
}
.cover{
    width: 18vmin; height: 3vmin;
    background: var(--bg);
    border-radius: var(--radius);
    left:12%;
}
.beam{
    width: 24vmin; height: 3vmin;
    background: var(--bg);
    border-radius: var(--radius);
}
.column{
    width: 20vmin; height: 8vmin;
    background: var(--light-brown);
    left:8.8%;
    border-bottom:1px solid rgba(185, 115, 65, 0.11);
}
.column::before,.column::after, #decor{
    width: 2vmin; height: 5vmin;
    background: var(--cream);
    border-radius: var(--radius);
    top:20%;
}
.column::before{left: 0;}
.Nyakotey::before{
    display:block;
}
.column::after{right: 0;}
#decor{
    width: 5vmin;
    left:40%;
    background: transparent;
    border: 2vmin inset var(--cream);
}
/* Men */

.man{
    --main:#666;
    --black:#222;
    --skin:#7f6657;
    top:-5.5vmin;
}
.man1{left:-45%;}
.man2{left:80%;top:-41vmin;}
.head{left:10%;}
.hat{left:10%;
    width: 10vmin; height: 7vmin;
    background: var(--main);    
    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);    
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    border-radius: 1vmin;
    border-bottom: 1vmin solid white;
    z-index: 1;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
            box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.tete{
    background-color: var(--skin);
    width: 7.3vmin; height: 8vmin;
    border-radius: 10% 10% 4vmin 4vmin / 3vmin 3vmin 50% 50%;
    left:5%;top:-0.9vmin;
}
.sunglass{
    top:1vmin;left:4%;
    -webkit-animation: glass 1s infinite alternate;
            animation: glass 1s infinite alternate;
    z-index: 1;
}
.sunglass *{background: var(--black);}
.s1,.s2{ 
    width: 3.5vmin; height: 3.5vmin; 
    border-radius: 20% 20% 50% 50%;
    position: absolute;
}
.s2{left:17%;top:0;}
.bar{
    width: 3vmin; height: .6vmin; 
    left:10%;top:10%;
}
.mouth{
    background: rgb(73, 56, 43);
    width: 3vmin; height: .6vmin; 
    position: absolute;
    bottom:20%;left:30%;
}
.shirt{
    background: var(--main);
    width: 15vmin; height: 20vmin;
    -webkit-clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
            clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
}
.shirt:before{
    background: white;
    width: 15vmin; height: 20vmin;
    -webkit-clip-path: polygon(30% 0, 70% 0, 60% 100%, 40% 100%);
            clip-path: polygon(30% 0, 70% 0, 60% 100%, 40% 100%);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
            box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
#flag{
    position: absolute;
    right:10%; top:10%;
    font-size: .6rem;
}
.upper-body::after{
    background: #5b5a5a;
     width: 14vmin; height: 4vmin; 
    left: 2%;bottom:-15%;
    z-index: 1;
}
.lower-body::before{
    background: #464343;
    width: 5vmin;
    height: 4.5vmin;
    border: 1vmin solid #52605e;
    border-radius: 50%;
    left:21%;
    top:-1.2vmin;
    z-index: 1;
}
.arm{
    position: absolute;
    top:-2%;
    z-index:21;
}
.arm *,.leg *{ background-color: var(--main);}
.left-arm{left:-20%;}
.right-arm{right:20%;}
.upper-arm{
    width: 4vmin; height: 15vmin;
}
.left-arm .upper-arm{
    left: 20%;
    -webkit-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
            transform: rotate(15deg);  
    border-radius:5vmin 0 3vmin 3vmin;
}
.right-arm .upper-arm{
    right:20%;
    -webkit-transform: rotate(-15deg);
        -ms-transform: rotate(-15deg);
            transform: rotate(-15deg);
    border-radius:0 5vmin 3vmin 3vmin;
}
.forearm{
    top:-2vmin;
    width: 3.7vmin; height: 10vmin;
    border-radius: 0 0 1.4vmin 1.4vmin /0 0 50% 50%; 
    -webkit-transform-origin: top; 
        -ms-transform-origin: top; 
            transform-origin: top;
    z-index: -1;
}
.left-arm .forearm{ 
    left: -15%;
    -webkit-transform: rotate(-0deg);
        -ms-transform: rotate(-0deg);
            transform: rotate(-0deg);  
    -webkit-animation: lhand 1s 1s infinite alternate;  
            animation: lhand 1s 1s infinite alternate; 
}
.right-arm .forearm{
    right: -20%;
    -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
            transform: rotate(0deg); 
    -webkit-animation: rhand 1s ease infinite alternate; 
            animation: rhand 1s ease infinite alternate;
    height:10vmin;
    border-radius: 0 0 1.4vmin 1.4vmin /0 0 50% 50%;
}
.hand{
    position: absolute;
    background: white;
    width: 3.5vmin; height: 3.5vmin; 
    border-radius: 20% 20% 50% 50%;
    bottom: -20%;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
            box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.leg{position: absolute;}
.left-leg{left:18%;}
.right-leg{right:27%;}
.thigh{
    width: 6.5vmin; height: 13vmin;
    left:-50%;
    -webkit-clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
            clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
}
.left-leg .thigh{-webkit-animation: lthigh 1s infinite alternate;animation: lthigh 1s infinite alternate;}
.right-leg .thigh{-webkit-animation: rthigh 1s 1s infinite alternate;animation: rthigh 1s 1s infinite alternate;}
.crus{
    width: 5.8vmin; height: 15vmin;
    -webkit-clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
            clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
    top:-0.8vmin;
/*     transform-origin: top; */
}
.left-leg .crus{
    left:-45%;
    -webkit-animation: lcrus 1s infinite alternate;
            animation: lcrus 1s infinite alternate;
}
.right-leg .crus{
    right:45%;
    -webkit-animation: rcrus 1s 1s infinite alternate;
            animation: rcrus 1s 1s infinite alternate;
}
.shoe{
    background: var(--black);
    width: 8vmin; height: 4vmin;
    position: absolute;
}
.left-leg .shoe{
    border-radius: 55% 0 10% 10%;
    right:62%; bottom:-11%;
    -webkit-animation: lshoe 1s infinite alternate;
            animation: lshoe 1s infinite alternate;
}
.right-leg .shoe{
    border-radius: 0 55% 10% 10%;
    right:18%; bottom:-11%;
    -webkit-animation: rshoe 1s 1s infinite alternate;
            animation: rshoe 1s 1s infinite alternate;
}

.shadow{
    position:absolute;
    left:-60%;bottom:3%;
    width:55vmin; height:5vmin;
    background: rgba(0,0,0, 0.2);
    border-radius: 50%;
    -webkit-animation: shadow 1s infinite alternate;
            animation: shadow 1s infinite alternate;
}
footer{
    position: absolute;
    bottom: 4%;
}
a{
    font-weight: bold;
    text-decoration: none;
    color:yellow;
    padding: .7rem 1.5rem;
    background: rgba(0,0,0, 0.2);
}
.btn{
    background:rgba(0,0,0, 0.7);
    color:white;
    padding:1rem;
}
/* animations */
@-webkit-keyframes glass {
    from{left:-2%;}
    to{left:9%;}   
}
@keyframes glass {
    from{left:-2%;}
    to{left:9%;}   
}
@-webkit-keyframes lhand {
    to{-webkit-transform:  rotate(-60deg);transform:  rotate(-60deg);}
}
@keyframes lhand {
    to{-webkit-transform:  rotate(-60deg);transform:  rotate(-60deg);}
}
@-webkit-keyframes rhand {
    to{-webkit-transform:  rotate(60deg);transform:  rotate(60deg);}
}
@keyframes rhand {
    to{-webkit-transform:  rotate(60deg);transform:  rotate(60deg);}
}
@-webkit-keyframes lthigh{
    to{-webkit-transform:  rotate(10deg);transform:  rotate(10deg);}
}
@keyframes lthigh{
    to{-webkit-transform:  rotate(10deg);transform:  rotate(10deg);}
}
@-webkit-keyframes rthigh{
    to{-webkit-transform:  rotate(-10deg);transform:  rotate(-10deg);}
}
@keyframes rthigh{
    to{-webkit-transform:  rotate(-10deg);transform:  rotate(-10deg);}
}
@-webkit-keyframes lcrus {
    to{left:-60%;}
}
@keyframes lcrus {
    to{left:-60%;}
}
@-webkit-keyframes rcrus {
    to{right:25%;}
}
@keyframes rcrus {
    to{right:25%;}
}
@-webkit-keyframes lshoe{
    to{right:80%;}
}
@keyframes lshoe{
    to{right:80%;}
}
@-webkit-keyframes rshoe{
    to{right:-10%;}
}
@keyframes rshoe{
    to{right:-10%;}
}
@-webkit-keyframes shadow{
    to{-webkit-transform: scaleX(1.2);transform: scaleX(1.2);}
}
@keyframes shadow{
    to{-webkit-transform: scaleX(1.2);transform: scaleX(1.2);}
}
@-webkit-keyframes intro {
    from{-webkit-transform:scale(0.25);transform:scale(0.25);}
    to{-webkit-transform:scale(1);transform:scale(1);}
}
@keyframes intro {
    from{-webkit-transform:scale(0.25);transform:scale(0.25);}
    to{-webkit-transform:scale(1);transform:scale(1);}
}
@-webkit-keyframes bg-color{
    0%{background-color:rgba(255, 255, 255, 0.8);}
    20%{background-color:rgba(27, 231, 214, 0.8);}
    40%{background-color:rgba(52, 231, 27, 0.8);}
    60%{background-color:rgb(255 230 0 / 0.7);}
    80%{background-color:rgba(231, 27, 37, 0.6);}
    100%{background-color:white}
}
@keyframes bg-color{
    0%{background-color:rgba(255, 255, 255, 0.8);}
    20%{background-color:rgba(27, 231, 214, 0.8);}
    40%{background-color:rgba(52, 231, 27, 0.8);}
    60%{background-color:rgb(255 230 0 / 0.7);}
    80%{background-color:rgba(231, 27, 37, 0.6);}
    100%{background-color:white}
}

/* init */
main,footer{display:none;}