a#howItWorksLink {
    color: #0577c7;
    border-bottom: 3px solid #0577c7;
}

section {
    text-align: center;
}

p {
    text-align: left;
}

div {
    text-align: left;
}

ul {
    text-align: left;
}

div#knowledgeGraphFrame {
    text-align: center;
    margin-top: 50px;
}

img#knowledgeGraph {
    margin: 0 auto;
    width: 60%;
}

img#activeLearningLoop {
    margin: 0 auto;
    width: 50%;
}

div.screenshot {
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 50px;
}

div#dailyXPGoalScreenshot {
    background: url('/img/screenshots/daily-xp-goal.png');
    background-size: 100%;
    background-repeat: no-repeat;
    width: 450px;
    height: 150px;
}

div#customizationScreenshot {
    background: url('/img/screenshots/xp-goals-dialog.png');
    background-size: 100%;
    background-repeat: no-repeat;
    width: 500px;
    height: 455px;
}

div#tasksScreenshot {
    background: url('/img/screenshots/tasks.png');
    background-size: 100%;
    background-repeat: no-repeat;
    width: 450px;
    height: 410px;
}

div#introductionScreenshot {
    background: url('/img//screenshots/introduction.png');
    background-size: 100%;
    background-repeat: no-repeat;
    width: 450px;
    height: 490px;
}

div#exampleScreenshot {
    background: url('/img//screenshots/example.png');
    background-size: 100%;
    background-repeat: no-repeat;
    width: 460px;
    height: 520px;
}

div#practiceScreenshot {
    background: url('/img//screenshots/practice.png');
    background-size: 100%;
    background-repeat: no-repeat;
    width: 450px;
    height: 680px;
}

div#leaderboardScreenshot {
    background: url('/img//screenshots/leaderboard.png');
    background-size: 100%;
    background-repeat: no-repeat;
    width: 350px;
    height: 500px;
}


div#diagnosticFoundationsScreenshot {
    background: url('/img//screenshots/diagnostic-foundations.png');
    background-size: 100%;
    background-repeat: no-repeat;
    width: 400px;
    height: 450px;
}

div#diagnosticProgressScreenshot {
    background: url('/img//screenshots/diagnostic-progress.png');
    background-size: 100%;
    background-repeat: no-repeat;
    width: 400px;
    height: 770px;
}

div#diagnosticCompletionScreenshot {
    background: url('/img//screenshots/diagnostic-completion.png');
    background-size: 100%;
    background-repeat: no-repeat;
    width: 400px;
    height: 260px;
}

@media screen and (max-width: 600px) {
    div#dailyXPGoalScreenshot {
        width: 80%;
        height: 23vw;
    }

    div#customizationScreenshot {
        width: 80%;
        height: 67vw;
    }

    div#tasksScreenshot {
        width: 80%;
        height: 67vw;
    }

    div#introductionScreenshot {
        width: 80%;
        height: 81vw;
    }

    div#exampleScreenshot {
        width: 80%;
        height: 85vw;
    }

    div#practiceScreenshot {
        width: 80%;
        height: 110vw;
    }
}

div#joinBetaButtonFrame {
    height: fit-content;
    width: 100%; 
    margin-top: 30px; 
    text-align: center;
}

div#joinBetaButton {
    display: inline-block;
    padding: 12px 24px 12px 24px;
    line-height: 15px;
    border-radius: 5px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    background: #0577c7;
    color: white;
    cursor: pointer;
    margin: 0 auto;
}