main{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}


#content {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 10px;
    width: 65%;
    justify-content: center;
}

#content div {
    width: 90%;
    aspect-ratio: 16 / 9;
    border-radius: 5px;
    margin:0 20px;

}

#content {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 10px;
    width: 65%;
    justify-content: center;
}

#content div {
    width: 90%;
    aspect-ratio: 16 / 9;
    margin:0 20px;
    box-shadow:-3px 3px 0 3px var(--c3),
    -6px 6px 0 3px var(--c4),
    -9px 9px 0 3px var(--c1);
    display: none;
}


#content strong {
    font-size: 5em;
    margin: 40px 0;
    font-family: ZenB;
}

#content article {
    width: 88%;
}


#content button {
    border-radius: 150px;
    border: 2px solid var(--c1);
    font-family: Dir;
    font-size: 1.9em;
    padding: 4px 20px;
    background:var(--c1);
    cursor: pointer;
    color:var(--c3);
    transition: background 300ms ease,border 300ms ease;
    margin-bottom: 100px;
}

#content a {
    padding: 0;
}

#content button:not(#certifications button):hover {
    background:var(--c2);
    border: 2px solid var(--c2);
}




#content strong {
    font-size: 3em;
    margin: 40px 0;
    font-family: Dir;
    color: var(--c5);
}

#content article {
    width: 88%;
}


#content h1 {
    font-size: 2em;
    text-align: left;
    font-family: Dir;
    color:var(--c2);
    width: fit-content;
    padding: 7px 0;
    position: relative;
    text-transform: capitalize;
}

#content p {
    font-size: 1.7em;
    text-align: right;
    margin: 30px 0;
    font-family: Dir;
    color:var(--c5);
    opacity: 0.9;
}


@media screen and (max-width:1000px) {
    main {
        justify-content: center;
        align-items: center;
    }
    #content {
        width: 95%;
    }
    #content div {
        width: 95%;
    }

}