@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');

:root{
    --black: #1F2232;
    --purple: #9370DB;
    --lilac: #B393E8;

    --header: 0.7em 'Source Sans Pro', sans-serif;
    --text: 1.3em 'Source Sans Pro', sans-serif;
    --text-responsive: 0.7em 'Source Sans Pro', sans-serif;
    --padding: 2em 4em;
    --padding-table: 1em 1em;
    --indent: 3em;

    --margin-align: 2em;
    --margin-text: 1em 12em;
    --margin-responsive: 1em 3em;
    
    --round: 9px;

    --line: 0.1em solid;
}

body{
    font: var(--text);
    align-content: center;
    margin: var(--margin-text);
}

header{
    font: var(--header);
    background-color: var(--black);
    color: white;
    padding: var(--padding);
    border-radius: var(--round);
    text-align: center;
}

main{
    background-color: white;
    color: black;
    text-align: justify;
}

.section{
    border-bottom: var(--line) var(--black);
}

p{
    text-indent: var(--indent);
}

.italic{
    font-style: italic;
    color: var(--purple);
}

table{
    width: 100%;
    text-align: center;
}

td{
    width: 50%;
    color: white;
    background-color: var(--lilac);
    padding: var(--padding-table);
    border: var(--line);
}

img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
    width: 25%;
}

.references > p , #tests > p{
    text-indent: 0em;
    text-align: left;
}

.link:link , .link:visited , .link:active{
    color: var(--purple);
    text-decoration: none;
}
.link:hover{
    color: var(--lilac);
    text-decoration: underline;
}

footer > p{   
    text-indent: 0;
    text-align: center;
}

@media (max-width: 768px){
    body{
        font: var(--text-responsive);
        align-content: center;
        margin: var(--margin-responsive);
    }

    header{
        font: var(--header);
    }
}