.container{min-height:100vh}.container,.container_top{display:flex;flex-direction:column;background-color:#f2f5c8}.container_top{width:70%;margin:1rem auto 1rem auto;align-items:center}.container_top h1{margin-bottom:2rem;padding:.5rem 3rem;color:#000;text-transform:uppercase;background-color:#c1deae;box-shadow:5px 5px 2px #219f94}.container_top .choiceBox{width:100%;display:flex;justify-content:center}.choiceBox_select{margin-right:4rem;padding:.5rem;color:#000;font-size:larger;font-weight:bolder;background-color:#c1deae;border:none;box-shadow:5px 5px 2px #219f94;transition-duration:.5s;transition-property:transform;outline:none;cursor:pointer}.choiceBox_select:active,.choiceBox_select:focus,.choiceBox_select:hover{transform:scale(1.1)}.choiceBox_button{padding:.5rem 1.5rem;color:#000;font-size:large;font-weight:700;background-color:#c1deae;border:none;box-shadow:5px 5px 2px #219f94;transition-duration:.5s;transition-property:transform;outline:none;cursor:pointer}.choiceBox_button:hover{transform:rotate(20deg) scale(1.1)}.choiceBox_button:active,.choiceBox_button:focus{transform:scale(1.1)}.container_bottom{width:85%;min-height:30vh;margin:1rem auto 0 auto;background-color:#f2f5c8;border-top:1px dotted #000;border-bottom:1px dotted #000;display:flex;align-items:center;flex-wrap:wrap}.container_bottom .card{flex-basis:calc(16.66667% - 30px);height:100px;margin:15px;border-radius:10px;box-shadow:5px 5px 2px #c1deae;overflow:hidden;transition-duration:.5s;transition-property:transform;outline:none;cursor:pointer}.container_bottom .card:active,.container_bottom .card:focus,.container_bottom .card:hover{transform:scale(1.1)}.container_bottom .cardAlreadySelected{-webkit-animation:already-selected 75ms infinite alternate;animation:already-selected 75ms infinite alternate}.card_img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;display:none}.bgCard{background-color:#219f94}.box-end,.box-start{position:relative;margin:1rem auto;width:600px;height:420px;background:none;border:3px solid #fff;background:#f0f3ae;border:3px solid #4f3130}.box-end{-webkit-animation:ending-croc 5s;animation:ending-croc 5s}.text-crocodile{margin:.3rem 4rem 0 4rem;padding:.5rem 3rem;color:#000;text-align:center;text-transform:uppercase;background-color:#c1deae;box-shadow:0 5px 2px #219f94}.head{background:#a8b956;width:25%;height:17%;top:35%;left:30%;border-bottom-left-radius:15px;z-index:1}.head,.mouth{position:absolute}.mouth{width:110px;height:2px;background:#422218;top:55%}.tooth{position:absolute;width:8%;height:22%;background:#fff;-webkit-clip-path:polygon(50% 0,0 100%,100% 100%);clip-path:polygon(50% 0,0 100%,100% 100%);top:33%;left:30%}.cheek{width:18%;height:36%;background:tomato;top:37%;right:16%}.cheek,.eye-right{position:absolute;border-radius:50%}.eye-right{top:20%;right:3%}.eye-left,.eye-right{width:6%;height:12%;background:#422218}.eye-left{border-radius:50%;top:12%;right:20%}.eye-left,.nose{position:absolute}.nose{width:27%;height:40%;background:#a8b956;top:-25%}.nose-hole-left{left:20%}.nose-hole-left,.nose-hole-right{position:absolute;background:#422218;width:15%;height:60%;border-radius:50%;top:30%}.nose-hole-right{right:20%}.body{background:#a8b956;left:40%;-webkit-clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)}.body,.body-copy{position:absolute;width:20%;height:60%;top:35%}.body-copy{background:#f0f3ae;left:56%}.fur-top{top:20%}.fur-middle,.fur-top{position:absolute;background:#879e2d;width:50%;height:25%;-webkit-clip-path:polygon(100% 50%,0 0,0 100%);clip-path:polygon(100% 50%,0 0,0 100%);z-index:1}.fur-middle{top:45%}.fur-bottom{position:absolute;background:#879e2d;width:50%;height:25%;bottom:5%;-webkit-clip-path:polygon(100% 50%,0 0,0 100%);clip-path:polygon(100% 50%,0 0,0 100%);z-index:1}.hat-container{position:absolute;background:none;height:20%;width:10%;right:40%;top:14%}.hat-base{position:absolute;background:#4f3130;height:70%;width:70%;top:10%;left:15%;border-top-left-radius:50px;border-top-right-radius:50px}.hat-ribbon{background:#fff;height:15%;bottom:0;z-index:1}.hat-bottom,.hat-ribbon{position:absolute;width:100%}.hat-bottom{background:#4f3130;height:14%;bottom:6%}.hat-feather-top{background:#aa5042;height:55%;width:50%;top:20%;right:-7%;transform:rotate(20deg)}.hat-feather-bottom,.hat-feather-top{position:absolute;-webkit-clip-path:polygon(25% 0,75% 0,61% 100%,36% 100%);clip-path:polygon(25% 0,75% 0,61% 100%,36% 100%);border-top-left-radius:90px;border-top-right-radius:90px}.hat-feather-bottom{background:#d8bd8a;height:45%;width:40%;top:33%;right:-10%;transform:rotate(40deg)}.belly{position:absolute;top:25%;left:-35%;width:100%;height:80%;-webkit-clip-path:ellipse(16% 40% at 50% 50%);clip-path:ellipse(16% 40% at 50% 50%);transform:rotate(5deg)}.stripes{height:100%;width:100%;background:linear-gradient(180deg,#bccc61,#bccc61 50%,#879e2d 0,#879e2d);background-size:100% 10px}@-webkit-keyframes ending-croc{0%{transform:scale(0)}10%{transform:scale(1.1)}20%{transform:scale(.8)}30%{transform:scale(1.1)}60%{transform:scale(1)}}@keyframes ending-croc{0%{transform:scale(0)}10%{transform:scale(1.1)}20%{transform:scale(.8)}30%{transform:scale(1.1)}60%{transform:scale(1)}}@-webkit-keyframes already-selected{0%{transform:scale(1.1) translateX(-3px)}to{transform:scale(1.1) translateX(3px)}}@keyframes already-selected{0%{transform:scale(1.1) translateX(-3px)}to{transform:scale(1.1) translateX(3px)}}@media only screen and (min-width:1600px){.container_top{width:45%;flex-direction:row;align-items:center;justify-content:space-between}.container_top h1{margin-right:4rem}.container_bottom{width:45%}}@media only screen and (max-width:700px){.container_bottom .card{flex-basis:calc(33.33333% - 30px)}.box-end,.box-start{width:550px;height:370px}.mouth{width:90px}}@media only screen and (max-width:600px){.container_bottom .card{flex-basis:calc(50% - 30px)}.container_top .choiceBox{flex-wrap:wrap;flex-direction:column;align-items:center}.container_top .choiceBox_select{margin:0 0 1rem 0}.box-end,.box-start{width:500px;height:320px}.text-crocodile{font-size:large}.mouth{width:70px}}@media only screen and (max-width:420px){.box-end,.box-start{width:350px;height:170px}.text-crocodile{font-size:small;margin:0 4rem 0 4rem;padding:.2rem}.mouth{width:50px}}*{box-sizing:border-box;padding:0;margin:0}html{font-size:100%;font-family:Comfortaa,cursive}