/* styles.css */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&family=Open+Sans:wght@400;600&family=Lobster&family=Pacifico&family=Montserrat:wght@400;600&family=Quicksand:wght@400;500&family=Oswald:wght@400;600&family=Slabo+27px&family=Playfair+Display&family=Raleway:wght@400;600&family=PT+Serif:wght@400;600&family=Nunito:wght@400;600&family=Anton&family=Permanent+Marker&display=swap');

/* General Styles */
body {
    font-family: 'Open Sans';
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

.container {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
}

.font-list {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.font-item {
    font-size: 24px;
    margin: 15px;
    text-align: center;
}

.above-fold {
    position: absolute;
    top: 0;
    width: 100%;
    background-color: #fff;
    z-index: 10;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
}

.above-fold h1 {
    margin-bottom: 30px;
}

.below-fold {
    margin-top: 2000px;
    background-color: #dfe6e9;
}

/* Fonts for Above the Fold */
.above-fonts .font-item {
    font-family: 'Roboto' ;/* Font 1 */
}

.above-fonts .font-item:nth-child(2) {
    font-family: 'Lobster'; /* Font 2 */
}

.above-fonts .font-item:nth-child(3) {
    font-family: 'Pacifico'; /* Font 3 */
}

.above-fonts .font-item:nth-child(4) {
    font-family: 'Montserrat'; /* Font 4 */
}

.above-fonts .font-item:nth-child(5) {
    font-family: 'Quicksand'; /* Font 5 */
}

.above-fonts .font-item:nth-child(6) {
    font-family: 'Oswald'; /* Font 6 */
}

.above-fonts .font-item:nth-child(7) {
    font-family: 'Slabo 27px'; /* Font 7 */
}

.above-fonts .font-item:nth-child(8) {
    font-family: 'Playfair Display'; /* Font 8 */
}

.above-fonts .font-item:nth-child(9) {
    font-family: 'Raleway'; /* Font 9 */
}

.above-fonts .font-item:nth-child(10) {
    font-family: 'PT Serif'; /* Font 10 */
}

/* Fonts for Below the Fold */
.below-fonts .font-item {
    font-family: 'Nunito'; /* Font 1 */
}

.below-fonts .font-item:nth-child(2) {
    font-family: 'Anton'; /* Font 2 */
}

.below-fonts .font-item:nth-child(3) {
    font-family: 'Permanent Marker'; /* Font 3 */
}

.below-fonts .font-item:nth-child(4) {
    font-family: 'Lora'; /* Font 4 */
}

.below-fonts .font-item:nth-child(5) {
    font-family: 'Dancing Script'; /* Font 5 */
}

.below-fonts .font-item:nth-child(6) {
    font-family: 'Merriweather'; /* Font 6 */
}

.below-fonts .font-item:nth-child(7) {
    font-family: 'Poppins'; /* Font 7 */
}

.below-fonts .font-item:nth-child(8) {
    font-family: 'Fredoka One'; /* Font 8 */
}

.below-fonts .font-item:nth-child(9) {
    font-family: 'Cinzel'; /* Font 9 */
}

.below-fonts .font-item:nth-child(10) {
    font-family: 'Lobster'; /* Font 10 */
}