/* Let's make things responsive */

/*@media only screen and (max-width: 625px) {}*/
@media only screen and (max-width: 1050px) {
    /* Basic */
    section[name="basic"] { width: calc(100% - 70px); height: auto; }
    section { width: calc(100% - 125px); }
    .double { width: calc(100% - 75px); }
    .basic { height: calc(100vw / 4) }
    #profile { width: calc((100vw / 3)); height: calc((100vw / 3)); }
}
@media only screen and (max-width: 800px) {
    /* General */
    .title { text-align: center; }
    section { width: calc(100% - 100px); }

    /* Basic */
    section[name="basic"] {
        grid-auto-flow: row;
        grid-template-columns: 100%;
        height: auto;
        width: calc(100% - 50px);
    }
    .double {
        width: auto;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        grid-gap: 20px;
    }
    .double section {
        width: calc(100% - 100px);
    }
    .double .left { justify-self: center; }
    .double .right { justify-self: center; }

    .basic {
        grid-row: 2 / span 1;
        height: auto;
    }
    #profile {
        grid-row: 1 / span 1;
        justify-self: center;
        margin: 10px;

        width: calc(100vw / 3);
        height: calc(100vw / 3);
    }
    div[name="name"] { height: 150px; }
    .entries1 {
        display: grid;
        grid-auto-flow: row;
        grid-template-columns: 1fr;
        text-align: center;
    }
}

@media only screen and (max-width: 375px) {
    header { font-size: 0.5em; }
    div[name="name"] { font-size: 1.5em; }
    body { font-size: 0.8em}
}


@media only screen and (max-width: 200px) {
    /*html { width: 100% }*/

    section { width: 100%; }
    section[name="basic"] { width: 100%; }
    .double { width: 100%;}
    footer { width: 100% }
    .basic { width: 100% }
    .double section { width: 100%; }
    #banner { width: 100%; }
    #profile {
        width: calc(100vw / 1.5);
        height: calc(100vw / 1.5);
    }

    header { font-size: 0em; }
}