:root {
    font-size: min(max(1.2rem, calc(1.2rem + ((1vw - 0.175rem) * 1.7561))), 3rem);
    min-height: 0vw;
  }
body {
    background-color: peru;
max-width: 100vw;
    overflow-x: hidden;
}

.img-div {
	display: flex;
	flex-direction: column;
}

.prod-img {
	width: 80%;
	height: auto;
	margin: 0 auto;
	border: 2px solid black;
	border-radius: 10%;
	margin-bottom: 2vh;
}

li {
    font-size: 1.1rem;
}

.kk-head {
    display: flex;
    flex-direction: column;
    align-content: center;
    padding: 0 5vh 0 5vh;
}

.kk-header {
    /* font-size: 2.6rem; */
    margin-bottom: 2vh;
    margin-top: 3vh;
    text-align: center;
}

.top-logo {
margin:0 auto;
display: flex;
}


li {
   list-style: none; 
   /* font-size: 1.5rem; */
}

.bookmark-text {
    margin-bottom: 2vh; 
    margin-top: 0;
    /* font-size: xx-large; */
}


@media only screen and (min-width: 280px)
{
    .top-logo {
        transform: scale(0.6);
        }
    .kk-head {
        padding: 0 3vh 0 3vh;
    }

    .kk-header {
        margin-top: 1.5vh;
        /* font-size: 2rem; */
    }

    p, li {
        /* font-size: 1.3rem; */
    }

    .bookmark-text {
        /* font-size: 1.2rem; */
    }
}


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

    .kk-head {
        padding: 0 3vh 0 3vh;
    }

    .kk-header {
        /* font-size: 2rem; */
    }

    p, li {
        /* font-size: 1.3rem; */
    }
}




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

    .top-logo {
        transform: scale(.7);
    }
    .kk-head {
        padding: 0 3vh 0 3vh;
    }

    p, li {
        /* font-size: 1.3rem; */
    }
}



@media only screen and (min-width: 375px)
{
    .kk-head {
        padding: 0 3vh 0 3vh;
    }

    .kk-header {
        /* font-size: 2.3rem; */
    }

    p, li {
        /* font-size: 1.6rem; */
    }

    .bookmark-text {
        /* font-size: 1.5rem; */
    }
}

@media only screen and (min-width: 411px)
{
    p, li {
        /* font-size: 1.5rem; */
    }
    .bookmark-text {
        /* font-size: 1.5rem; */
    }
}


@media only screen and (min-width: 768px)
{
    .kk-head {
        padding: 0 5vh 0 5vh;
    }

    .kk-header {
        /* font-size: 3rem; */
    }

    p, li {
        font-size: 1.6rem;
    }

    .top-logo {
        transform: scale(1.5);
        margin-top: 5vh;
        margin-bottom: 4vh;
    }

    p, li {
        /* font-size: 2.1rem; */
    }
}





@media only screen and (min-width: 1024px)
{
    .top-logo {
        transform: scale(1.5);
        margin-top: 6vh;
        margin-bottom: 4vh;
    }

    .kk-header {
        /* font-size: 4rem; */
    }

    p, li {
        /* font-size: 2.7rem; */
    }

    .bookmark-text {
        /* font-size: 3rem; */
    }


}