home_page{
    display: flex;
    justify-content: center;
    > home{
        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        padding-bottom: 5vw;
        
        > p{
            font-family: "Hoves";
            font-size: 18vw;
            margin: 5px;
            margin-top: 12vw;
            background: var(--white_text);
            background-size: 600% 600%;
            animation: GradientAnimation 8s ease infinite;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        };
        > img{
            margin-top: 5vw;
            width: 25vw;
        };
        > button:hover{
            transform: translateY(5px);
        };
        > button {
            width: fit-content;
            min-height: 4vw;
            max-height: 8vw;

            padding: 5px;
            padding-left: 4vw;
            padding-right: 4vw;
            
            margin-top: 3vh;


            buttonText{
                font-size: 3vw;
                font-family: "8bit";
                background: var(--white_text);
                background-size: 600% 600%;
                animation: GradientAnimation 8s ease infinite;
                background-clip: text;
                -webkit-text-fill-color: transparent;
            }
            
            background: #2a9b92;
            background: var(--menu_background);
            background-size: 200% 200%;
            animation: GradientAnimation 20s ease infinite;

            box-shadow: var(--light_box_shadow);

            border-color: rgba(255, 245, 227, 0.42);
            border-style: solid;
            border-width: 3px;
            border-radius: 20px;

        };
        > content {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 85vh;
            anchor{
                padding-top: 5vh;
            };
             button:hover{
                transform: translateY(5px);
            };
             button{
                 width: fit-content;
                 padding-left: 40vw;
                 padding-right: 40vw;

                buttonText{
                    text-align: center;
                    font-size: 3vw;
                    font-family: "8bit";
                    background: var(--white_text);
                    background-size: 600% 600%;
                    animation: GradientAnimation 8s ease infinite;
                    background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
                
                background: #2a9b92;
                background: var(--menu_background);
                background-size: 200% 200%;
                animation: GradientAnimation 20s ease infinite;
                box-shadow: var(--light_box_shadow);
                
                margin: 5px;
                
                border-color: rgba(255, 245, 227, 0.42);
                border-style: solid;
                border-width: 3px;
                border-radius: 20px;
            };
            > about_me{
                display: flex;
                flex-direction: row;
                justify-content: space-evenly;
                align-items: center;
                
                width: 90vw;
                > text{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    width: 80vw;

                    padding:5vw;
                    text-align: center;
                    h1{
                        font-size: 8vw;  
                        font-family: "8bit";
                        margin: 0;
                        background: var(--white_text);
                        background-size: 600% 600%;
                        animation: GradientAnimation 8s ease infinite;
                        background-clip: text;
                        -webkit-text-fill-color: transparent;
                    };
                    p{
                        align-items: center;
                        font-family: "8bit";
                        font-size: 3vw;
                        margin: 0;
                        background: var(--white_text);
                        background-size: 600% 600%;
                        animation: GradientAnimation 8s ease infinite;
                        background-clip: text;
                        -webkit-text-fill-color: transparent;
                        button{
                            width: fit-content;
                            padding-left: 1vw;
                            padding-right: 1vw;
                            margin:0;
                            transform: translateY(-0.15vw);

                            buttonText{
                                font-size:2.5vw;
                            }
                        };
                        button:hover{
                            transform: translateY(0vw);
                        };

                    };
                    > button:hover{
                        transform: translateY(5px);
                    };
                    >   button{
                        width: fit-content;
                        padding-left: 2vw;
                        padding-right: 2vw;
                        max-height: 14vw;
                        min-height: 8vw;
                        margin-top: 5vh;
                        buttonText{
                            font-size:4vw;
                        }
                    };
                };
                > img{
                    width: 40vw;
                }
                padding-bottom: 5vh;
            }
            > home_feed {
                margin-top: 1vh;
                display: flex;
                flex-direction: column;
                align-items: center;
                
                max-height: 80vh;
                
                overflow: scroll;
            };
            
        }
    };
}

.pages{
    display: block;
    background-color: cadetblue;
    width: 90vw;
    padding: 20px;
    padding-top: 5px;
    border-radius: 6px;
    margin-bottom: 1vw;
    margin-top: 1vw;
    background: #2a9b92;
    background: var(--menu_background);
    background-size: 200% 200%;
    animation: GradientAnimation 20s ease infinite;
    box-shadow: var(--light_box_shadow);

    border-color: rgba(255, 245, 227, 0.42);
    border-style: solid;
    border-width: 3px;
}

.pages > :first-child{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.pages > :first-child > h1{
    font-size: 3vw;
    font-family: "8bit";
    color: #f0f8ff;
    
    text-align: center;
    align-content: center;
    background: #2a9b92;
    background: var(--menu_background);
    background-size: 200% 200%;
    animation: GradientAnimation 20s ease infinite;
    box-shadow: var(--light_box_shadow);

    width: 90%;
    
    border-color: rgba(255, 245, 227, 0.42);
    border-style: solid;
    border-width: 3px;
    border-radius: 20px;
    margin: 2%;
    span{
        background: var(--white_text);
        background-size: 600% 600%;
        animation: GradientAnimation 8s ease infinite;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

}