body{
    background-image: url(../img/indexBG.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    /* background-color: rgb(56, 55, 55); */
}

img{
    border-radius: 10px;
}

main{
    background-color: hsl(39, 77%, 83%,0.5);
    border-radius: 50px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: auto 2.5rem;
    backdrop-filter: blur(10px);
    padding-bottom: 5rem ;
    animation: begin 1.5s ease-in-out forwards;
}

main>section>a>img{
    float: right;
    /* padding: 2rem 0 0 0; */
    margin-top: 2rem;
    margin: 0 0.2rem;
    max-width: 40vw;
    max-height: 50vh;
    /* min-width: 400px;
    min-height: 150px; */
    transition: 0.5s ease-in-out;
}
main>section>a>img:hover{
    box-shadow: 0 4px 80px rgb(0, 0, 0);
    border-radius: 50px;
    filter: blur(10%);
}

section>p,
div>p,
main>section:first-of-type>p{
    text-align: justify;
}
main>section:first-of-type>p{
    padding-left: 40px;
}
section:last-child>div>div{
    display: flex;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    width:auto;
    padding-inline: 5px;
}
section:last-child>div>div>a{ /* #Page0 */
    text-decoration: none;
    color:black;
    background-color: grey;
    border-radius: 10px;
    padding: 0.5rem 1rem;
    width:100px;
    height: 20px;
    transition: 0.8s ease-in-out;
    margin: 2rem;
    position: relative;
    text-align: center;
    font-size: 20px;
}
/* section:last-child>div>div>a:hover{ */
#Page0:hover{
    background-color: cyan;
    color:blue;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.811);
    /* transform: scale(1.2); */
    margin: 1.8rem 5rem 3.2rem 5rem!important;
}
#moreImg{
    float:right;
    width: 100%;
    height: auto;
    margin-top: 0.5rem;
    transition: 0.5s ease-in-out;
}

@media (max-width: 1100px) {
    main>section>div{
        flex-direction: column !important;
    }
    main>section>div>div>p{
        min-width: 100%;
        margin-bottom: 2rem;
    }
    #moreImg{
        float: none;
        width: 80vw;
    }
}
@media (max-width: 800px) {
    /* section{
        font-size: medium;
    } */
    img{
        float: none !important;;
        width: 80%;
        max-height: 800px;
    }
    #moreImg{
        float: none !important;;
        width: 100%;
        height: auto;
    }
}

@keyframes begin {
    from{
        opacity:0%;
    }
    to{
        opacity: 100%;
    }
}