m3i-projects p-start{
    color:green;
}
m3i-projects p-end{
    color:red;
}
m3i-projecs p-pause{
    color:yellow;
}

m3i-projects #banner{
    width:100%;
    height:25%;
    min-height:500px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-family:Title;
    font-weight:600;
    color:var(--pallete-white);
    padding:1em;
    background-color:var(--pallete-2nd);
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    background-blend-mode: multiply;
}

m3i-projects #banner div{
    width:100%;
    max-width:var(--content-column-size);
    margin:0 auto;
    font-size:3.3em;    
    text-shadow:0 0 10px var(--pallete-black);
    animation-name: titleAnimation;
    animation-duration:1s;
    animation-fill-mode:forwards;
}

m3i-projects #container{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

m3i-projects .project-card{
    width:100%;
    max-width:333px;
    border:2px solid black;
    border-radius:13px;
}

m3i-projects .project-card div{
    padding:13px;
}

m3i-projects .project-card div[image]{
    width:100%;
    height:200px;
    background-size:cover;
    border-radius:10px 10px 0 0;
}

m3i-projects .project-card div[title]{
    font-size:1.23em;
    font-weight:600;
    text-align:center;
    padding:13px;
}

m3i-projects .project-card div[description]{
    text-align:justify;
}

m3i-projects .project-card div[logline]{
    display:flex;
    flex-wrap:nowrap;
    width:100%;
}

m3i-projects div[logline] span:nth-of-type(1){
    display:block;
    width:6em;
    text-align:left;
    font-size:1.13em;
}

m3i-projects div[logline] span:nth-of-type(2){
    display:block;
    width:calc(100% - 7em);
    text-align:justify;
}

m3i-projects div[logline] span:nth-of-type(3){
    display:block;
    width:50px;
    text-align:right;
}

m3i-projects .project-card li{
    font-size:1.13em;
    list-style:none;
}

@keyframes titleAnimation{
    from {opacity:0; transform: translateX(-5%);}
    to{opacity:1; transform: translateX(0%);}
}