@import "compass/css3";

    .container {
      margin: 120px auto;
      width: 20%;
    }

    a {
      text-decoration: none;
    }

    .frog {
      background: none repeat scroll 0 0 #69ad8a;
      border-radius: 50% 50% 50% 50%;
      height: 0;
      padding-top: 60%;
      position: relative;
      width: 100%;
    }

    .frog::after {
      background: none repeat scroll 0 0 #729133;
      border-radius: 50% 50% 50% 50%;
      content: "";
      height: 10%;
      left: 42.00%;
      position: absolute;
      top: 56.00%;
      width: 6%;
      z-index: 1;
    }

    .frog::before {
      background: none repeat scroll 0 0 #729133;
      border-radius: 50% 50% 50% 50%;
      content: "";
      height: 10%;
      left: 50.00%;
      position: absolute;
      top: 56.00%;
      width: 6%;
      z-index: 1;
    }

    .left-eye,
    .right-eye {
      background: none repeat scroll 0 0 #fff;
      border: 10px solid #69ad8a;
      border-radius: 50% 50% 50% 50%;
      height: 68.00%;
      left: -4.00%;
      position: absolute;
      top: -18.00%;
      width: 45.00%;
      z-index: 2;
    }

    .pupil {
      background: none repeat scroll 0 0 black;
      border-radius: 50% 50% 50% 50%;
      height: 38%;
      left: 50%;
      margin-left: -17.0%;
      margin-top: -19%;
      position: absolute;
      top: 50%;
      width: 35%;
      z-index: 1;
    }

    .right-eye {
      left: auto;
      right: -4.5%;
    }

    .mouth {
      height: 3%;
      background: black;
      position: absolute;
      bottom: 20%;
      left: 20%;
      width: 60%;
    }

    .column {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 200px;
      width: 20%;
    }

    .column1 {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 200px;
      width: 20%;
      border-top-left-radius: 10px;
      background-color: #6bba91;
    }

    .column2 {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 200px;
      width: 20%;
      border-top-right-radius: 10px;
      background-color: #729133;
    }

    .column3 {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 200px;
      width: 20%;
      border-bottom-left-radius: 10px;
      background-color: #6bba91;
    }

    .column4 {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 200px;
      width: 20%;
      border-bottom-right-radius: 10px;
      background-color: #729133;
    }

    .row {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 200px;
      position: relative;

      /&:before {
        content: "";
        position: absolute;
        width: 39%;
        height: 1.5px;
        background-color: black;
        bottom: 0;
        z-index: 2;
      }
    }

    .column:nth-child(even) {
      background-color: #85a447;
    }

    .column:nth-child(odd) {
      background-color: #69ad8a;
    }
	
	h2 {
		font-size:5rem;
		width:100%;
		text-align:center;
		
	}
	.tongue {
	display: none;	
	 background-color: #e66c6c;
  	border-radius: 0 0 50% 50%;
 	 height: 120px;
  	position: absolute;
 	 bottom: -59px;
  	left: 50%;
 	 transform: translateX(-50%);
  	width: 100px;
 	 z-index: 1;
	 transition: top 0.3s, height 0.3s;
}