@import url("./styles.css");

/* 
DeskTop
*/
ul{
    list-style:none;
}

h2{
    text-align:center;
}
.flexControlContainer{
    width: 100vw;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding-top: 10vh;
}

.cardBody{
    /* position:relative; */
    background:var(--cardBg);
    width:70vw;
    margin:1em;
    padding:0.15em;
    height:50vh;
    border-radius:0.33em;
    box-shadow:inset var(--overlayBoxShadow);
}

.describe{
    font-family:monospace;
    font-size:14px;
    margin: 1px;
    padding:0.25em;
}

.controllingHeader{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.title{
    font-size: 1.5em;
    margin-top: 0.33em;
    padding: 0.33em;
}
.description{
    text-align:center;
    margin-top:0.7em;
    padding: 0.33em;
}

.description p{
    max-height:8em;
    overflow: scroll;
}
.description h3{
margin:0.5em;
}

/* media queries for cards. content breaks out the bottom */
@media (max-width: 768px){
.cardBody{
    position:relative;
    width:18em;
    height:12em;
    margin:0.5em;
    padding:0.08em;
}

.description p{
    position:relative;
    max-height:6em;
    font-size:0.85em;
    overflow: scroll;
    /* overflow-wrap: anywhere; */
}

.title{
    font-size: 1em;
    margin-top: 0.15em;
    padding: 0.15em;
}

}