* {
    box-sizing: border-box;
}

body {
    background: linear-gradient(lightgreen, white) no-repeat;
    min-height: 100vh;
    margin: 0;
}

.ortu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
}

.yazi {
    background-image: url('../png/tr.png'), url('../png/rt.png');
    background-size: 288px 39px;
    background-repeat: no-repeat;
    background-position: center top, center bottom;
    padding: 40px 20px;
    position: relative;
    min-width: 300px;
    height: 350px;
    width: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    text-indent: 30px;
    background-color: white;
    border-radius: 30px;
}
p{
   
}
    .yazi:before,
    .yazi:after {
        border-radius: 10px 0 0 10px;
        border: solid black;
        border-width: 2px 0 2px 2px;
        width: calc(50% - 142px);
        position: absolute;
        content: '';
        bottom: 17px;
        top: 19px;
        left: 0;
    }

    .yazi:after {
        border-radius: 0 10px 10px 0;
        border-width: 2px 2px 2px 0;
        left: auto;
        right: 0;
    }
.titl {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fleur De Leah', cursive;
    margin:10px;
    font-size:36px;
}

h3 {
    display: block;
    float: left;
    margin-left:20px;
}

.im {
    /*border-radius:50%;*/
    margin-right:10px;
    margin-bottom:-10px;
}

.total {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 20px;
    margin-right: 20px;
    
}

.social {
    border: 0px solid black;
    margin-top: 5px;
}

#bir {
    background-color: #f80c49;
    color:white;
}
#iki {
    background-color: #334bf3;
    color: white;
}
#uc {
    background-color: #ffd800;
    color: black;
}
#dort {
    background-color: #1c8006;
    color: #ffffff;
}
#bes {
    background-color: #558855;
    color: white;
}
#alti {
    background-color: #89538a;
    color: #fce4ed;
}
#yedi {
    background-color: #4c5072;
    color: white;
}
#sekiz {
    background-color: #b6bdf7;
    color: black;
}
#dokuz {
    background-color: #f88484;
    color: black;
}
#on {
    background-color: #808080;
    color: yellow;
}
#onbir {
    background-color: #f302c2;
    color: lightcyan;
}
#oniki {
    background-color: #0bf50f;
    color: #4c5072;
}
#onuc {
    background-color: #ff006e;
    color:white;
}
#ondort {
    background-color: #06fafa;
    color: black;
}
#onbes {
    background-color: #b6bdf7;
    color: black;
}
#onalti {
    background-color: #ece9e9;
    color: black;
}
#onyedi {
    background-color: #5d0ab5;
    color: wheat;
}
#onsekiz {
    background-color: #16940a;
    color: floralwhite;
}
#ondokuz {
    background-color: lightgreen;
    color: black;
}
#yirmi {
    background-color: lightcyan;
    color: black;
}



#yirmibir {
   
   background-color:darkcyan;
    color: white;
    text-indent: 0;
}

#yirmiiki {
    background-color: #f302c2;
    color: white;
    text-indent: 0;
}

#yirmiuc {
    background-color: #ffd800;
    color: black;
    text-indent: 0;
}

#yirmidort {
    background-color: #4c5072;
    color: #ffffff;
}

#yirmibes {
    background-color: #89538a;
    color: white;
}

#yirmialti {
    background-color: #808080;
    color: #fce4ed;
}

#yirmiyedi {
    background-color: #f302c2;
    color: white;
}

#yirmisekiz {
    background-color: #06fafa;
    color: black;
}

#yirmidokuz {
    background-color: #16940a;
    color: white;
}

#otuz {
    background-color: darkcyan;
    color: yellow;
}

#onbir {
    background-color: #f302c2;
    color: lightcyan;
}

#oniki {
    background-color: #0bf50f;
    color: #4c5072;
}

#onuc {
    background-color: #ff006e;
    color: white;
}

#ondort {
    background-color: #06fafa;
    color: black;
}

#onbes {
    background-color: #b6bdf7;
    color: black;
}

#onalti {
    background-color: #ece9e9;
    color: black;
}

#onyedi {
    background-color: #5d0ab5;
    color: wheat;
}

#onsekiz {
    background-color: #16940a;
    color: floralwhite;
}

#ondokuz {
    background-color: lightgreen;
    color: black;
}

#yirmi {
    background-color: lightcyan;
    color: black;
}
#elliyedi {
    background-color: #5d0ab5;
    color: wheat;
}
#atmisiki {
    background-color: #0bf50f;
    color: #4c5072;
}
@media all and (max-width: 968px){
    .im {
        /*border-radius:50%;*/
        margin-right: 0;
        margin-bottom: 10px;
    }
    h3{
        display:flex;
        align-items:center;
        justify-content:center;
        flex-direction:column;
        
    }
    .total {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-bottom: 10px;
        margin-right:0;
        margin-left:0;
    }
}