/* GRID */

.tutorial {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid rgb(130, 130, 130);
    width: 75%;
    margin-left: auto;
    margin-right: auto;
}

.title {
    border-bottom: 1px solid rgb(130, 130, 130);
    grid-column: 1 / -1;
    font-size: 1.5em;
    line-height: 3em;
    text-align: center;
    width: 100%;
}

.paragraph-container {
    grid-column: 1 / 3;
    margin: 1em 1em 1em 0.5em;
}

.paragraph {
    text-align: justify;
    text-justify: inter-character;
    font-size: 1.3em;
}

.video-container {
    grid-column: 3 / -1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 1em 0.5em 1em 1em;
}

.video {
    border-radius: 0.5em;
    width: 400px;
    height: 225px;
}

.CS-tutorial {
    margin-top: 1em;
}

/* PHONE LAYOUT */

@media only screen and (max-width: 1000px) {
    /* MENU */

    header {
        height: 5em;
    }
    
    .menu {
        height: 5em; /* same as the height of header */
    }
    
    .menu a:not(.logo) {
        margin-left: -1em;
        font-size: 1.3em;
    }
    
    .menu ul li {
        line-height: 5em; /* same as the height of header */
    }

    /* GRID */

    .tutorial {
        display: flex;
        flex-direction: column;
        width: 90%;
    }

    .title {
        font-size: 1.3rem;
        line-height: 3rem;
    }

    .paragraph-container {
        order: 2;
        margin: 0.5rem 0.5rem 1.5rem 0.5rem;
    }

    .paragraph {
        font-size: 1.1em;
        text-justify: inter-cluster;
    }

    .video-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 1.5rem 0.5rem 0.5rem 0.5rem;
        order: 1;
    }

    .video {
        width: 400px;
        height: 180px;
    }

    .CS-tutorial {
        margin-top: 1em;
    }
}

@media only screen and (max-width: 700px) {
    /* MENU */
    
    .menu {
        justify-content: space-between;
    }
    
    .menu ul li {
        display: none;
    }

    .brand-title {
        display: inline-block;
    }

    .toggle-button {
        display: flex;
    }    
}

@media only screen and (max-width:414px) {
    header {
        height: 4em;
    }
    
    .menu {
        height: 4em;
    }
    
    .menu ul li {
        line-height: 4em; /* same as the height of header */
    }
}