/* font-family: 'DM Serif Display', serif;
font-family: 'Poppins', sans-serif; */

body{
    background:#f0e9c4 ;
    overflow: hidden;
    filter: blur(40%);
    background-image: url("img/background.jpeg");
    overflow: hidden;
    margin: 0;
}

.fullBody {
    position: absolute;
    width: 110%;
    height: 110%;
    background-color: #f0e9c4;
    opacity: 75%;
    margin-left: -10px;
}

.verticalLines {
    display: flex; 
    flex-direction: row;
    gap: 20rem;
    justify-content: space-between;
    position: relative;
}

        .rectangleVertical1{
            width: 70px;
            height: 110vh; 
            background-color: black;
            margin-top: -25px;
            filter: blur(7px);
            opacity: 75%;
            /* position: absolute; */
        }

        .rectangleVertical2{
            width: 70px;
            height: 110vh; 
            margin-top: -25px;
            background-color: black;
            filter: blur(7px);
            opacity: 75%;
            /* position: absolute; */
        }

        .rectangleVertical3{
            width: 70px;
            height: 110vh; 
            margin-top: -25px;
            background-color: black;
            filter: blur(7px);
            opacity: 75%;
            /* position: absolute; */
        }

        .rectangleVertical4{
            width: 70px;
            height: 110vh; 
            margin-top: -25px;
            background-color: black;
            filter: blur(7px);
            opacity: 75%;
        }



.horizontalLines {
    display: flex; 
    flex-grow: 0;
    flex-shrink: 0;
    flex-direction: column;
    gap: 15rem;
    position: absolute;
}

        .rectangleHorizontal1{
            height: 70px;
            width: 110vw; 
            background-color: black;
            margin-left: -25px;
            margin: -10px;
            filter: blur(7px);
            opacity: 75%;
        }

        .rectangleHorizontal2{
            height: 70px;
            width: 110vw; 
            background-color: black;
            margin-left: -25px;
            margin: -10px;
            filter: blur(7px);
            opacity: 75%;
        }

        .rectangleHorizontal3{
            height: 70px;
            width: 110vw; 
            background-color: black;
            margin-left: -25px;
            margin: -10px;
            filter: blur(7px);
            opacity: 75%;
        }

        .rectangleHorizontal4{
            height: 70px;
            width: 110vw; 
            background-color: black;
            margin-left: -25px;
            margin: -10px;
            filter: blur(7px);
            opacity: 75%;
        }



h2 {    
    font-family: 'Poppins', sans-serif;
    font-size: 35px;
    filter: blur(1.5px);
    position: absolute;
    margin-top: -700px;
    margin-left: 83px;
    line-height: 39px;
    letter-spacing: 0.2em;
    opacity: 80%;
}

h4 {
    position: absolute;
    font-family: 'Poppins', sans-serif; 
    font-size: 22px;
    font-weight: 300;
    line-height: 39px;
    text-align: right;
    letter-spacing: 0.39em;
    color: rgba(0, 0, 0, 0.97);
    filter: blur(1px);
    margin-top: -150px;
    margin-left: 87vw;
}




@media screen and (max-width:429px){


        body{
            /* width: 428px; */
            background: #f0e9c4;
            overflow: scroll;
            filter: blur(40%);
            /* background-image: url("img/background.jpeg"); */
            overflow: scroll;
        }

        .fullBody {
            position: absolute;
            width: 110vw;
            height: 110vh;
            background-color: #f0e9c4;
            opacity: 75%;
            margin-left: 40vw;
        }

        .verticalLines {
            max-width: 428px;
            display: flex; 
            flex-direction: row;
            gap: 4rem;
            justify-content: space-between;
            position: relative;
        }

                .rectangleVertical1{
                    max-width: 60px;
                    height: 110vh; 
                    background-color: black;
                    margin-top: -25px;
                    filter: blur(7px);
                    opacity: 75%;
                    /* position: absolute; */
                }

                .rectangleVertical2{
                    width: 60px;
                    height: 110vh; 
                    background-color: black;
                    margin-top: -25px;
                    filter: blur(7px);
                    opacity: 75%;
                    /* position: absolute; */
                }

                .rectangleVertical3{
                display: none;
                }

                .rectangleVertical4{
                    display: none;
                }



        .horizontalLines {
            display: flex; 
            flex-grow: 0;
            flex-shrink: 0;
            flex-direction: column;
            gap: 10rem;
            position: absolute;
        }

                .rectangleHorizontal1{
                    height: 40px;
                    width: 110vw; 
                    background-color: black;
                    margin-left: -25px;
                    margin: -10px;
                    filter: blur(7px);
                    opacity: 75%;
                }

                .rectangleHorizontal2{
                    height: 40px;
                    width: 110vw; 
                    background-color: black;
                    margin-left: -25px;
                    margin: -10px;
                    filter: blur(7px);
                    opacity: 75%;
                }

                .rectangleHorizontal3{
                    height: 40px;
                    width: 110vw; 
                    background-color: black;
                    margin-left: -25px;
                    margin: -10px;
                    filter: blur(7px);
                    opacity: 75%;
                }

                .rectangleHorizontal4{
                    height: 40px;
                    width: 110vw; 
                    background-color: black;
                    margin-left: -25px;
                    margin: -10px;
                    filter: blur(7px);
                    opacity: 75%;
                }



        h2 {
            font-family: 'DM Serif Display', serif;
            font-size: 35px;
            filter: blur(3px);
            /* position: absolute; */
            /* margin-top: -650px;
            margin-left: 83px; */
            line-height: 39px;
            letter-spacing: 0.2em;
            opacity: 80%;
            text-align: right;
            display: block;
            position: absolute;
            margin-top: 0px;
            margin-left: 0px;
            /* margin-right: auto; */
        }

        h4 {
            position: absolute;
            display: block;
            margin-left: -100px;
            font-weight: 300;
        }

        
    
}


@media screen and (min-width: 428px) { 

    body{
        background-color: #f0e9c4;
        filter: blur(40%);
        background-image: url("img/background.jpeg");
        overflow: hidden;
    }

    .fullBody {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #f0e9c4;
        opacity: 75%;
        margin-left: -10px;
    }
    .rectangleVertical1{
                min-width: 70px;
                height: 110vh; 
                background-color: black;
                margin-top: -25px;
                filter: blur(7px);
                opacity: 75%;
                /* position: absolute; */
            }

            .rectangleVertical2{
                min-width: 70px;
                height: 110vh; 
                margin-top: -25px;
                background-color: black;
                filter: blur(7px);
                opacity: 75%;
                /* position: absolute; */
            }

            .rectangleVertical3{
                min-width: 70px;
                height: 110vh; 
                margin-top: -25px;
                background-color: black;
                filter: blur(7px);
                opacity: 75%;
                /* position: absolute; */
            }

            .rectangleVertical4{
                min-width: 70px;
                height: 110vh; 
                margin-top: -25px;
                background-color: black;
                filter: blur(7px);
                opacity: 75%;
            }



    .horizontalLines {
        display: flex; 
        flex-grow: 0;
        flex-shrink: 0;
        flex-direction: column;
        gap: 15rem;
        position: absolute;
    }

            .rectangleHorizontal1{
                height: 70px;
                min-width: 110vw; 
                background-color: black;
                margin-left: -25px;
                margin: -10px;
                filter: blur(7px);
                opacity: 75%;
            }

            .rectangleHorizontal2{
                height: 70px;
                min-width: 110vw; 
                background-color: black;
                margin-left: -25px;
                margin: -10px;
                filter: blur(7px);
                opacity: 75%;
            }

            .rectangleHorizontal3{
                height: 70px;
                min-width: 110vw; 
                background-color: black;
                margin-left: -25px;
                margin: -10px;
                filter: blur(7px);
                opacity: 75%;
            }

            .rectangleHorizontal4{
                height: 70px;
                min-width: 110vw; 
                background-color: black;
                margin-left: -25px;
                margin: -10px;
                filter: blur(7px);
                opacity: 75%;
            }



    h2 {
        font-family: 'Poppins', sans-serif;
        font-size: 35px;
        filter: blur(1.5px);
        position: absolute;
        margin-top: -700px;
        margin-left: 83px;
        line-height: 39px;
        letter-spacing: 0.2em;
        opacity: 80%;
    }

    h4 {
        position: absolute;
        font-family: 'Poppins', sans-serif; 
        font-size: 22px;
        line-height: 39px;
        text-align: right;
        letter-spacing: 0.39em;
        color: rgba(0, 0, 0, 0.97);
        filter: blur(1px);
        margin-top: -130px;
        margin-left: 80vw;
        font-weight: 300;
    }

    .verticalLines {
        display: flex; 
        flex-direction: row;
        gap: 20rem;
        justify-content: space-between;
        position: relative;
    }
  
}

@media screen and (max-width: 768px) {
    body{
        background: #f0e9c4;
        overflow: hidden;
        filter: blur(40%);
        background-image: url("img/background.jpeg");
        overflow: hidden;
    }
    
    .fullBody {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color:#f0e9c4;
        opacity: 75%;
        margin-left: -10px;
    }
    
    .verticalLines {
        display: flex; 
        flex-direction: row;
        gap: 20rem;
        justify-content: space-between;
        position: relative;
    }
    
            .rectangleVertical1{
                width: 70px;
                height: 110vh; 
                background-color: black;
                margin-top: -25px;
                filter: blur(7px);
                opacity: 75%;
                /* position: absolute; */
            }
    
            .rectangleVertical2{
                width: 70px;
                height: 110vh; 
                margin-top: -25px;
                background-color: black;
                filter: blur(7px);
                opacity: 75%;
                /* position: absolute; */
            }
    
            .rectangleVertical3{
                width: 70px;
                height: 110vh; 
                margin-top: -25px;
                background-color: black;
                filter: blur(7px);
                opacity: 75%;
                /* position: absolute; */
            }
    
            .rectangleVertical4{
            display: none;
            }
    
    
    
    .horizontalLines {
        display: flex; 
        flex-grow: 0;
        flex-shrink: 0;
        flex-direction: column;
        gap: 15rem;
        position: absolute;
    }
    
            .rectangleHorizontal1{
                height: 70px;
                width: 110vw; 
                background-color: black;
                margin-left: -25px;
                margin: -10px;
                filter: blur(7px);
                opacity: 75%;
            }
    
            .rectangleHorizontal2{
                height: 70px;
                width: 110vw; 
                background-color: black;
                margin-left: -25px;
                margin: -10px;
                filter: blur(7px);
                opacity: 75%;
            }
    
            .rectangleHorizontal3{
                height: 70px;
                width: 110vw; 
                background-color: black;
                margin-left: -25px;
                margin: -10px;
                filter: blur(7px);
                opacity: 75%;
            }
    
            .rectangleHorizontal4{
                height: 70px;
                width: 110vw; 
                background-color: black;
                margin-left: -25px;
                margin: -10px;
                filter: blur(7px);
                opacity: 75%;
            }
    
    
    
    h2 {
        font-family: 'Poppins', sans-serif;
        font-size: 35px;
        filter: blur(1.5px);
        position: absolute;
        margin-top: -710px;
        margin-left: 83px;
        line-height: 39px;
        letter-spacing: 0.2em;
        opacity: 80%;
    }
    
    h4 {
        position: absolute;
        font-family: 'Poppins', sans-serif; 
        font-size: 22px;
        line-height: 39px;
        text-align: right;
        letter-spacing: 0.39em;
        color: rgba(0, 0, 0, 0.97);
        filter: blur(1px);
        margin-top: -150px;
        margin-left: 87vw;
        font-weight: 300;
    }
    
    
}

@media screen and (max-width: 1000px) {
    .rectangleVertical4{
        display: none;
    }

    h4 {
        position: absolute;
       margin-left: 40vw;
       font-weight: 300;
    }
    

}