:root{
    --main-color:#d6d6d6;
}
#white-corner{
    background-color: white;
    width: 300px;
    height: 400px;
    position: absolute;
    transform: rotate(45deg);
    top: -280px;
    left: -118px;
    z-index: 100;
}
#container-ply{
    position: absolute;
    top: 8px;
    /* background-color: grey */
    height: 180px;
    width: 180px;
    padding: 0;
    margin-left: 0;
    /* margin-top: 120px */
    z-index: 99;
}
#upper-ply{
    position: absolute;
    bottom: 30px;
    right: 30px;
    width: 120px;
    height: 120px;
    border-left-color: rgba(140, 140, 140, 0.62);
    border-bottom: 3px solid rgba(140, 140, 140, 0.62);
    border-right: 3px solid rgba(140, 140, 140, 0.62);
    border-top-color: rgba(140, 140, 140, 0.62);
    z-index: 9999;
    border-radius: 0 0 40px 0;
    background: linear-gradient(135deg, rgba(226,226,226,0) 55%, rgba(157,157,157,0.5) 60%, rgba(211,211,211,0) 65%, rgba(214,214,214,0) 100%);
    pointer-events: none;
}
#inner-ply-up{
    position: absolute;
    top: -8px;
    width: 30px;
    height: 38px;
    background: linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(134,134,134,1) 26%, rgba(211,211,211,1) 55%, rgba(214,214,214,1) 100%);
    right: 2px;
    border-radius: 40px 0 0 0;
    z-index: 9999;
    /* margin-top: 40px */
    border-left: 3px solid rgba(140, 140, 140, 0.62);
    border-color: rgba(140, 140, 140, 0.62);
    border-top: 3px solid rgba(140, 140, 140, 0.62);
}
#inner-ply-down{
    height: 30px;
    width: 38px;
    border-radius: 40px 0 0 0;
    z-index: 300;
    background: linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(134,134,134,1) 26%, rgba(211,211,211,1) 55%, rgba(214,214,214,1) 100%);
    position: absolute;
    bottom: 3px;
    left: -1px;
    border-left: 3px solid rgba(140, 140, 140, 0.62);
    border-color: rgba(140, 140, 140, 0.62);
    border-top: 3px solid rgba(140, 140, 140, 0.62);
}

#main_container{
    height: 100%;
    width: 100%;
    position: relative;
    margin: 0;
}
#wrap-container{
    height: 100%;
    display: flex;
    position: relative;
    justify-content: center;
    padding-inline: 6%;background-color: #d6d6d6;
    border-radius: 40px;
    /* width: 100vh; */
    border: 2px solid rgba(140, 140, 140, 0.62);
}

.middle_content{
z-index: 99;
margin-top: 150px;
}
.btn_follow{
    display: inline-block;
    padding: 10px 20px;
    background-color: #15314f;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
}
.middle_content .st0, .middle_content .st1,.middle_content .st4,.middle_content .st5,.middle_content .st6{
    fill: #d6d6d6;
    /* stroke: #5f3838; */
    /* stroke-width: 2; */
    stroke-miterlimit: 10;
    /* box-shadow: inset 0 0 10px #f8a100; */
}

.park{
    position:relative;
    bottom: 20px;
    width: calc(100% - 20px);
    height: 4px;
    border-bottom: 1px solid grey;
    margin-inline: 10px;
}
svg.text-svg{
    height: 50px;
}

svg.text-svg path{
    fill: transparent !important;
    stroke:transparent !important;
}

.text-svg text {
  fill: #595959;
  font-size: 0px;
}
.park svg{
    transform: translateX(-50%);
}
.park>*{
    position: absolute;
    bottom: 0;
}
.park path{
    stroke-width: 5;
    stroke: grey !important;
    fill: none;
}
.park-fill{
    fill:var(--main-color) !important;
}
.stones{
    z-index: 1000;
    bottom:-2px;
}
.cup{
    bottom:-2px;
}
.cup path{
    stroke-width:3;
}

.birds{
    width:100%;
    z-index: 1000;
}
.birds svg{
    opacity:0;
    height: 70px;
    position:absolute;
    /* max-width: 180px; */
    vertical-align: initial;
}
.birds svg:hover{
   opacity:1; 
}

.birds svg path{
    stroke-width: 2;
}
#vocab{
    left: 40%;
    bottom:100px;
}
#share{
    left: 65%;
    bottom:20px;
}
#debate{
    left:60%;
    bottom:100px;
}
#ask{
    left: 35%;
    bottom:20px;
}
#study{
    left: 50%;
    bottom:215px;
    transform:translateX(-15%);
}

.park svg g g path{
    stroke: #030303;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
 }