body{
        box-sizing: border-box;
        font-family: "Open Sans", "Trebuchet Ms", "Roboto", sans-serif;
        white-space: normal;
}

.grid-container{
width:75%;
display:inline-flex;
flex-wrap: wrap;
}

.emptys{
width:100%;
height: 0.3%;
padding: 0.3%;
margin: auto;
}

.tip {
        font-size: 1.1em;
        font-weight: 600;
        color: #ffffff;
        background-color: tomato;
        padding: 0.1%;
        display:inline-block;
        line-height:1.1em;
        border-radius: 3%;
        float:left;
        flex-grow: 1;
}




.tiptext {
        text-align: center;
   font-weight: 400;
        width: 100%;
        display: block;
        line-height:1.2em;
padding: 0.3%;
        background-color: linen;
        float:left;
        flex-grow: 1;
}




.tiled {
        text-align: center;
line-height: 2em;
        font-size: 2em;
        font-weight: 600;
        float: left;
        padding: 2%;
        width: 17%;
        height: auto;
        border-radius: 5%;
        border: 1px solid gainsboro;
        box-shadow: 0 0 5px gainsboro;
        flex-grow: 1;
display:table-cell;
}


.annot{
line-height: 1.1em;
text-align: center;
margin:1%;
}


.card-tile {
font-size:1.1em;
         float: left;
        padding: 2%;
        width:38%;
        height: auto;
        border-radius: 2%;
        border: 1px solid gainsboro;
        box-shadow: 0 0 5px gainsboro;
flex-grow: 1;
display:grid;
margin: 1%;
}

.big-card-tile {
        float: left;
        padding: 2%;
        width:98%;
        height: auto;
        border-radius: 2%;
        border: 1px solid gainsboro;
        box-shadow: 0 0 5px gainsboro;
flex-grow: 1;
display:grid;
margin: 1%;
}

.narrow-card-tile {
         float: left;
        padding: 2%;
        width:22%;
        height: auto;
        border-radius: 2%;
        border: 1px solid gainsboro;
        box-shadow: 0 0 2px gainsboro;
flex-grow: 1;
display:grid;
margin: 1%;
}

.med-card-tile {
         float: left;
        padding: 2%;
        width:27%;
        height: auto;
        border-radius: 2%;
        border: 1px solid gainsboro;
        box-shadow: 0 0 2px gainsboro;
flex-grow: 1;
display:grid;
margin: 1%;
}

.alfbubble {
        font-size: 1.6em;
      
        font-weight: 600;
        padding: 2%;
        width: 99%;
        height:auto;
        border-radius: 2%;
        text-align: center;
        vertical-align:middle;
        margin:auto;
flex-grow: 1;
}




.explanation-title {
        font-size: 2em;
        color:#573379;
        font-weight: 600;
        width: 100%;
        box-shadow: 0 0 5px silver;
        padding: 2%;
        border-radius: 1%;
        margin-bottom: 3%;
        margin-top: 3%;
        float: left;
}




.sub-title {
        font-size: 1.5em;
        color:#673696;
        font-weight: 600;
        padding: 1.3%;
        width: 100%;
        box-shadow: 0 0 5px silver;
        border-radius: 1%;
        margin-bottom: 3%;
        margin-top: 3%;
        float: left;
}




.notes-title {
        font-size: 1.1em;
        font-weight: 600;
        color: #000000;
        background-color: lightgreen;
        padding: 0.3%;
        width: max-content;
        box-shadow: 0 0 5px silver;
        border-radius: 1%;
        margin: 1%;
        float: left;
}




.long-explanation {
        float: left;
        font-size: 1.5em;
        padding: 1%;
        width: 100%;
}




p {
        float: left;
        font-size: 120%;
        width: 100%;
        display: block;
line-height: 1.1em;
margin:1%;
}




.example {
        font-weight: 600;
        float: left;
        font-size: 1.2em;
        padding: 1%;
width:97%;
        display: inline-block;
background-color:ghostwhite;
border: 1px solid gainsboro;

}




.tra-example {
        font-weight: 400;
        float: left;
        font-size: 1.2em;
        padding: 1%;
width:97%;
  display: inline-block;
}








.vocabulary-groups {
        float: left;
        font-size: 2em;
        width: 31%;
        height: auto;
        border-radius: 2%;
        border: 1px solid gainsboro;
        box-shadow: 0 0 5px gainsboro;
        padding: 1%;
flex-grow: 1;
}




.bubble {
        font-size: 1em;
        background-color: linen;
        font-weight: 600;
        width: 99%;
        margin: auto;
        padding-bottom: 1%;
        border-radius: 2%;
        text-align: center;
        box-shadow: 0 0 5px gainsboro;
flex-grow: 1;
}




.endings-card {
        float: left;
        padding: 2%;
        width: 23%;
        height: auto;
        border-radius: 5%;
        border: 1px solid gainsboro;
        box-shadow: 0 0 5px gainsboro;
flex-grow: 1;
}




.grouping-bubble {
        font-weight: 600;
        float: left;
        font-size: 0.9em;
        padding: 1%;
        color: #554348;
        width: 100%;
flex-grow: 1;
}
.case-person-bubble {
        font-weight: 400;
        float: left;
        font-size: 0.8em;
        padding: 1%;
        color: #554348;
        width: 15%;
        display: inline-block;
flex-grow: 1;
}




.endings {
        font-weight: 600;
        float: right;
        font-size: 0.9em;
        padding: 1%;
        display: inline-block;
        width: 70%;
flex-grow: 1;
}




.row:after {
content: "";
display: table-cell;
clear: both;
}




@media screen and (max-width:600px) {
        .tiled, .card-tile, .narrow-card-tile, .endings-card, .med-card-tile, .big-card-tile
     {
                width: 100%;

        }
}