@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500&display=swap");

html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Raleway", sans-serif;
}

nav img {
    margin-top: -10%;
    height: 60%;
}

nav {
    height: 45vh;
    width: 100%;
    text-align: center;
    margin-top: 10%;
    margin-bottom: -10%;
}

li {
    display: inline-block;
    position: relative;
    font-size: 2rem;
    margin: 3rem;
}
#menu1 li a
{
    color: #000;
    font-weight: 300;
}
li::before {
    content: "";
    position: absolute;
    height: 0.5rem;
    width: 0.5rem;
    border-radius: 50%;
    background-color: #f1b5cf;
    bottom: 30%;
    left: -30%;
}

ul {
    margin-top: -1.5rem;
}

#content {
    width: 100%;
    height: 80vh;
    display: flex;
}

.left-col-content-1,
.right-col-content-1 {
    flex-basis: 50%;
    height: 55vh;
}

.left-col-content-1 {
    margin-top: 2rem;
}

.right-col-content-1 {
    position: relative;
}

.frozen-img {
    position: absolute;
    right: 35%;
    bottom: 15%;
    z-index: 2;
    height: 0%;
}

.pink-bg {
    position: absolute;
    right: 30%;
    bottom: 5%;
    z-index: -2;
    height: 0%;
}

#h {
    font-weight: 300;
    font-size: 4rem;
    margin-left: 20%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.but {
    margin-left: 21%;
    border: 0;
    color: white;
    background-color: #f1b5cf;
    height: 2.5rem;
    width: 8rem;
    cursor: pointer;
    font-weight: 500;
}

.but a {
    text-decoration: none;
    color: #fff;
}

#monia {
    font-weight: 400;
    font-size: 5rem;
    color: #f1b5cf;
}

#per {
    line-height: 2rem;
    width: 29rem;
    margin-left: 21%;
    font-weight: 300;
}

#desc {
    position: relative;
    height: 100vh;
    width: 100%;
    padding-top: 20%;
    margin-bottom: 25%;
}

#desc img {
    position: absolute;
    height: 100%;
    width: 60%;
    left: -8%;
    top: 15%;
    z-index: -1;
}

#nas {
    font-size: 4.5rem;
    margin-left: 20%;
    width: 15rem;
    line-height: 2rem;
    margin-bottom: 10%;
    position: relative;
    z-index: 4;
}

#nas::after {
    content: "";
    position: absolute;
    background: #fff;
    right: 0;
    bottom: -1.5rem;
    width: 7rem;
    height: 2.2rem;
    z-index: -1;
}

#nadr {
    font-size: 2rem;
    margin-left: 20%;
    line-height: 4rem;
    position: relative;
    margin-right: 20%;
    text-align: justify;
    text-align-last: justify;
    width: 50rem;
    font-weight: 400;
}

#nadr::after {
    position: absolute;
    background: #f1b5cf;
    left: -40%;
    bottom: -50%;
    content: "";
    width: 55rem;
    height: 55rem;
    border-radius: 50%;
    z-index: -2;
}

#nadr a {
    color: #000000;
    font-weight: 900;
    text-decoration: underline;
}

#cookies {
    padding-top: 10%;
    height: 100vh;
}

#cookies img {
    width: 100%;
}

.input-toggler,
.menu-toggler,
.sidebar {
    display: none;
}

.container-4 {
    position: relative;
    height: 175vh;
    width: 100%;
    padding-top: 5%;
    overflow: hidden;
}

#cnt4-headline{
    margin: 5% 15%;
    font-style: normal;
    font-weight: 300;
    width: 40rem;
    position: relative;
}

#cnt4-headline::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 44.5%;
    z-index: -1;
    height: 1.8rem;
    width: 7rem;
    background: #f1b5cf;
    border-radius: 2rem;
}

.rectangle {
    height: 1rem;
    width: 1.7rem;
    background-color: #f1b5cf;
    border-radius: 1rem;
}

/*boxy*/
.boxes p {
    font-size: 2em;
}

.box-1 p,
.box-3 p,
.box-5 p {
    font-size: 2.2em;
    color: #f1b5cf;
}

.box-3 h2,
.box-1 h2,
.box-5 h2 {
    font-size: 2.5em;
    text-transform: uppercase;
    font-weight: 200;
}

.box-2-h2,
.box-4-h2 {
    font-size: 2.2em;
    font-weight: 500;
}

/*boxy*/

.box-4-p,
.box-2-p {
    text-transform: uppercase;
    font-weight: 200;
}

/*small-box*/
.box-1,
.box-2,
.box-3,
.box-4,
.box-5 {
    height: 10rem;
    display: flex;
    align-items: center;
    max-width: 100%;
    position: relative;
}

/*small-box*/
.left-col {
    flex-basis: 30%;
    padding-left: 15%;
}

.right-col {
    padding-left: 15%;
    flex-basis: 70%;
}

/*box4*/
.left-col-box-4 {
    flex-basis: 70%;
    padding-left: 15%;
}

.right-col-box-4 {
    flex-basis: 30%;
}

/*box4*/
.right-col-box-5 {
    flex-basis: 50%;
    margin-left: 12%;
}

.left-col-box-2 {
    flex-basis: 70%;
    padding-left: 15%;
}

.right-col-box-2 {
    flex-basis: 30%;
}

/*borders*/
.box-1 {
    border-top: 1px solid #f1b5cf;
    border-bottom: 1px solid #f1b5cf;
    transition: border 0.5s;
}

.box-2,
.box-3,
.box-4,
.box-5 {
    border-bottom: 1px solid #f1b5cf;
    transition: border 0.5s;
}

/*borders*/
.circle-bg {
    height: 0;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.container-5 {
    height: 200vh;
    width: 100%;
    padding: 0 15%;
}

.container-5 h2 {
    font-size: 3.5rem;
    font-weight: 200;
    width: 15rem;
    position: relative;
    margin-top: 5%;
    margin-bottom: 15%;
}

.container-5 h2::after {
    content: "";
    position: absolute;
    background: #f1b5cf;
    right: 0;
    bottom: 0;
    height: 2rem;
    width: 7.5rem;
    z-index: -1;
}

.container-5-content {
    position: relative;
    height: 155vh;
    width: 100%;
    padding: 0 12%;
}

.img-wrapper-1,
.img-wrapper-2,
.img-wrapper-3,
.img-wrapper-4 {
    position: absolute;
}

.img-wrapper-2 {
    right: 10%;
    top: 20%;
}

.img-wrapper-3 {
    left: 12%;
    bottom: 25%;
}

.img-wrapper-4 {
    right: 11%;
    bottom: 2%;
}

.img-1,
.img-2,
.img-3,
.img-4 {
    position: relative;
    height: 0rem;
    width: 0rem;
    background-image: url("IMG/pink-bg.png");
}

.img-1 img {
    margin-top: 21%;
    margin-left: 15%;
}

.img-2 img {
    margin-left: 50%;
    margin-top: 15%;
    transform: translateX(-50%);
}

.img-3 img {
    margin-left: 50%;
    margin-top: 18%;
    transform: translateX(-50%);
}

.img-4 {
    padding-top: 25%;
}

.img-4 img {
    margin-left: 50%;
    margin-bottom: 5%;
    transform: translateX(-50%);
}

.epoka_lodowcowa {
    height: 12.5rem;
}

.praliny_main {
    height: 13rem;
}

.ciasto_main {
    height: 9.5rem;
}

.imgContent {
    height: 13rem;
}

/*buttons*/
.torty-button {
    height: 3rem;
    width: 8.5rem;
    border: none;
    background-color: #000;
    font-size: 1.2rem;
    transform: translate(-4rem, -1rem);
    margin-top: 8%;
}

.torty-button a {
    color: #fff;
    font-weight: 300;
    text-decoration: none;
}

.container-6 {
    position: relative;
    height: 100vh;
    width: 100%;
    background-color: #000;
    /*padding-top: 8%;*/
}

.container-6-content {
    display: flex;
    width: 100%;
    height: 100%;
    padding-top: 8%;
}

.cnt-6-left-col {
    flex-basis: 55%;
    padding-left: 10%;
}

.cnt-6-right-col {
    flex-basis: 45%;
    height: 100%;
}

.cnt-6-left-col h2 {
    color: #fff;
    font-weight: 200;
    font-size: 3.6rem;
    text-transform: uppercase;
    margin-bottom: 5%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.word {
    transform: translateY(250px);
    transition: transform 1.2s;
}

.tel-box,
.mail-box,
.loc-box,
.ig-box {
    height: 2rem;
    width: 16rem;
    margin: 3rem 0;
    display: flex;
    align-items: center;
}

.ig-box a {
    text-decoration: none;
    color: #fff;
}

.tel-box h3,
.mail-box h3,
.loc-box h3,
.ig-box h3{
    margin-left: 1.5rem;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 200;
}

.tel-box img,
.mail-box img,
.loc-box img,
.ig-box img {
    height: 2.5rem;
}

.cnt-6-right-col {
    background-color: #f1b5cf;
    padding-top: 3.5%;
    padding-left: 8%;
}

form {
    position: absolute;
    height: 29rem;
    max-width: 25rem;
    padding-top: 2%;
}

form::before {
    content: "";
    position: absolute;
    left: -58%;
    top: 53%;
    width: 27.7rem;
    transform: rotate(90deg);
    height: 0.1rem;
    background: rgba(0, 0, 0, 0.21);
}

form::after {
    content: "";
    position: absolute;
    width: 25rem;
    height: 0.1rem;
    background: rgba(0, 0, 0, 0.21);
    bottom: -1%;
    left: -3%;
}

input {
    height: 2.8rem;
    width: 9.5rem;
    padding-left: 4%;
    border: none;
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    background-color: transparent;
    outline: none;
    border-radius: 0.2rem;
    margin-left: 10%;
    font-size: 1.1rem;
}

::placeholder {
    color: #000;
}

textarea {
    font-size: 1.1rem;
    padding-left: 4%;
    padding-top: 3.5%;
    border: none;
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    outline: none;
    margin: 2.5rem 0;
    width: 21.7rem;
    height: 10rem;
    background-color: transparent;
    margin-left: 10%;
    margin-bottom: 6%;
}

button {
    margin-left: 10%;
}

form button {
    width: 21.7rem;
    height: 2.4rem;
    background-color: #000;
    color: #fff;
    margin-top: 8%;
    font-size: 1.3rem;
    cursor: pointer;
}

input[type="file"] {
    display: none;
}

label {
    cursor: pointer;
    margin-left: 10%;
}

.upload {
    border-bottom: 2px solid rgba(255, 255, 255, 0.28);
}

#fileChosen {
    font-size: 0.8rem;
    margin-left: 5%;
}
select
{
    margin-left: 8%;
    background-color: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    border-radius: 0.2rem;
    height: 2rem;
    width: 10rem;
    outline: none;
    padding: 0 0.5rem;
    font-size: 1.1rem;
    margin-left: 2.5rem;
    margin-top: 1.5rem;
}
.container-1 a {
    text-decoration: none;
}

#menu1 ul,
li,
a {
    color: black;
}

/*responsywność*/
/*MS*/
@media only screen and (min-width: 275px) and (max-width: 600px) {

    .input-toggler,
    .menu-toggler,
    .sidebar {
        display: visible;
    }

    nav {
        height: 45vh;
        width: 100%;
        text-align: center;
        margin-top: -10%;
    }

    ul {
        list-style-type: none;
        margin-top: 5%;
    }

    li {
        display: block;
        position: relative;
        font-size: 1rem;
        margin: 0;
        padding: 2%;
    }

    li::before {
        content: "";
        position: absolute;
        height: 0.5rem;
        width: 0.5rem;
        border-radius: 50%;
        background-color: #fff;
        bottom: 30%;
        left: -30%;
    }

    #content {
        flex-direction: column;
        height: 150vh;
    }

    .left-col-content-1,
    .right-col-content-1 {
        height: 40vh;
    }

    .left-col-content-1 {
        margin-top: 20%;
        margin-bottom: -10%;
        margin-left: 10%;
        flex-basis: 40%;
    }

    nav ul {
        list-style-type: none;
        padding-left: 0rem;
        list-style: none;
    }

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

    li::before {
        width: 0;
        height: 0;
    }

    .left-col-content-1 #h {
        font-size: 2rem;
    }

    .right-col-content-1 {
        margin-top: 8%;
        margin-bottom: -4%;
    }

    .container-1 {
        height: 250vh;
        width: 100%;
    }

    #monia {
        font-size: 4.5rem;
    }

    .frozen-img {
        top: 20%;
        left: 10%;
        height: 60%;
    }

    .pink-bg {
        top: 50%;
        right: 5%;
        height: 35%;
    }

    .right-col-content-1 {
        flex-basis: 40%;
    }

    ul,
    li {
        list-style: none;
    }

    a {
        text-decoration: none;
    }

    .input-toggler {
        display: none;
    }

    .menu-toggler {
        position: fixed;
        right: 5%;
        top: 0px;
        width: 80px;
        height: 90px;
        z-index: 101;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        cursor: pointer;
    }

    .menu-toggler-line {
        width: 60%;
        height: 3px;
        background: #f1b5cf;
        margin: 0 0 8px 0px;
        position: relative;
        transition: all 0.4s ease-out;
    }

    .input-toggler:checked~.menu-toggler .menu-toggler-line {
        top: 5px;
        transform: translateY(100px);
        transform: rotate(45deg);
    }

    .input-toggler:checked~.menu-toggler .menu-toggler-line:nth-child(2) {
        display: none;
    }

    .input-toggler:checked~.menu-toggler .menu-toggler-line:nth-child(3) {
        top: -5px;
        transform: translateY(10);
        transform: rotate(135deg);
    }

    .nav {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
    }

    .nav ul {
        width: 100%;
    }

    .nav ul li {
        width: 100%;
        text-align: center;
    }

    .nav ul li a {
        display: inline-block;
        font-size: 36px;
        color: #fff;
        text-transform: uppercase;
    }

    .sidebar {
        position: fixed;
        top: 0;
        height: 100vh;
        width: 100%;
        background: #000;
        opacity: 0.5;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: translateX(-100%);
        transition: all 0.4s ease-out;
        z-index: 100;
    }

    .menu-link {
        color: white;
        font-size: 10vmin;
        line-height: 15vmin;
        -webkit-transition: all 0.25s ease-out;
        transition: all 0.25s ease-out;
    }

    .menu-link:hover,
    .menu-link:focus,
    .menu-link:active {
        color: #f1b5cf;
    }

    .input-toggler:checked~.sidebar {
        transform: translateX(0%);
        opacity: 0.98;
    }

    #menu1 {
        display: none;
    }

    .logo {
        margin-top: 20%;
        height: 80%;
    }

    #per {
        margin-left: 0%;
    }

    #h {
        margin-left: 0%;
    }

    .but {
        margin: 0%;
    }

    #nas {
        width: 100%;
        font-size: 4rem;
        line-height: 2rem;
        margin-bottom: 20%;
        position: relative;
        margin-left: 10%;
    }

    #desc {
        position: relative;
        height: 90vh;
        width: 100%;
        margin-top: -150%;
        overflow: hidden;
    }

    #nadr {
        width: 20rem;
        font-size: 1rem;
        margin-left: 10%;
        line-height: 2.5rem;
    }

    #nadr::after {
        top: -40%;
        left: -40%;
        content: "";
        width: 30rem;
        height: 30rem;
    }

    #nas::after {
        right: 43%;
        height: 1.5rem;
        width: 5rem;
        bottom: -1rem;
    }

    #cookies {
        margin-top: 0%;
    }
}

@media only screen and (max-width: 1024px) {
    #desc {
        margin-bottom: 0;
    }

    #cookies {
        height: 60vh;
        padding-top: 30%;
    }
}

@media only screen and (min-width: 320px) and (max-width: 321px) {
    .left-col-content-1 #monia {
        font-size: 4rem;
    }

    #per {
        font-size: 0.85rem;
        width: 18rem;
    }

    .right-col-content-1 img {
        width: 80%;
    }

    #nadr {
        font-size: 0.8rem;
        width: 80%;
    }

    .right-col-content-1 {
        margin-top: 0%;
    }

    #desc {
        margin-top: -180%;
    }

    #cookies {
        margin-top: -40%;
        margin-bottom: -50%;
    }

    #nas::after {
        right: 6.5rem;
    }
}

@media only screen and (min-width: 322px) and (max-width: 352px) {
    .left-col-content-1 #monia {
        font-size: 4rem;
    }

    #per {
        font-size: 0.8rem;
        width: 18rem;
    }

    .right-col-content-1 img {
        width: 80%;
    }

    #nadr {
        font-size: 0.8rem;
        width: 80%;
    }

    .right-col-content-1 {
        margin-top: 0%;
    }

    #desc {
        margin-top: -180%;
    }

    #cookies {
        margin-top: -40%;
    }
}

@media only screen and (min-width: 353px) and (max-width: 354px) {
    .left-col-content-1 #monia {
        font-size: 4rem;
    }

    #per {
        font-size: 0.8rem;
        width: 18rem;
    }

    .right-col-content-1 img {
        width: 80%;
    }

    #nadr {
        font-size: 0.8rem;
        width: 80%;
    }

    .right-col-content-1 {
        margin-top: 0%;
    }

    #desc {
        margin-top: -180%;
    }

    #cookies {
        margin-top: -50%;
        margin-bottom: -50%;
    }

    #nas::after {
        right: 8.5rem;
    }
}

@media only screen and (min-width: 355px) and (max-width: 388px) {
    .left-col-content-1 #monia {
        font-size: 4rem;
    }

    #per {
        font-size: 1rem;
        width: 20rem;
    }

    .right-col-content-1 img {
        width: 80%;
    }

    #nadr {
        font-size: 0.8rem;
        width: 80%;
    }

    .right-col-content-1 {
        margin-top: -5%;
    }

    #desc {
        margin-top: -180%;
    }

    #cookies {
        margin-top: -20%;
        margin-bottom: -30%;
    }

    #nas::after {
        right: 9rem;
    }
}

@media only screen and (min-width: 389px) and (max-width: 392px) {
    .left-col-content-1 #monia {
        font-size: 4rem;
    }

    #per {
        font-size: 0.8rem;
        width: 18rem;
    }

    .right-col-content-1 img {
        width: 80%;
    }

    #nadr {
        font-size: 0.8rem;
        width: 80%;
    }

    .right-col-content-1 {
        margin-top: -5%;
    }

    #desc {
        margin-top: -170%;
        height: 70vh;
    }

    #cookies {
        margin-top: -20%;
        margin-bottom: -50%;
    }

    #nas::after {
        right: 11rem;
    }
}

@media only screen and (min-width: 393px) and (max-width: 394px) {
    .left-col-content-1 #monia {
        font-size: 4rem;
    }

    #per {
        font-size: 0.8rem;
        width: 18rem;
    }

    .right-col-content-1 img {
        width: 80%;
    }

    #nadr {
        font-size: 0.8rem;
        width: 80%;
    }

    .right-col-content-1 {
        margin-top: -5%;
    }

    #desc {
        margin-top: -170%;
    }

    #cookies {
        margin-top: -50%;
        margin-bottom: -50%;
    }

    #nas {
        bottom: -1rem;
    }

    #nas::after {
        right: 11rem;
    }
}

@media only screen and (min-width: 395px) and (max-width: 413px) {
    #nas {
        width: 100%;
        font-size: 4rem;
        line-height: 2rem;
        margin-bottom: 19%;
        position: relative;
        margin-left: 10%;
    }

    #per {
        font-size: 1.1rem;
        width: 21.5rem;
    }

    #nas::after {
        right: 46%;
        height: 1.5rem;
        width: 5rem;
        bottom: -1rem;
    }

    .pink-bg {
        margin-right: 4%;
    }

    #desc {
        height: 70vh;
        margin-top: -30%;
    }

    #cookies {
        height: 60vh;
        margin-bottom: -50%;
        margin-top: -20%;
    }

    .container-1 {
        height: 150vh;
    }

    .frozen-img {
        width: 19rem;
        height: 17rem;
    }

    .right-col-content-1 {
        margin-top: -35%;
        margin-bottom: 0%;
    }

    .pink-bg {
        height: 9rem;
    }
}

@media only screen and (min-width: 414px) and (max-width: 480px) {
    #nas {
        width: 100%;
        font-size: 4rem;
        line-height: 2rem;
        margin-bottom: 19%;
        position: relative;
        margin-left: 10%;
    }

    #nas::after {
        right: 46%;
        height: 1.5rem;
        width: 5rem;
        bottom: -1rem;
    }

    .pink-bg {
        margin-right: 4%;
    }

    #desc {
        height: 80vh;
        margin-top: 5%;
    }

    #cookies {
        height: 30vh;
        margin-top: -30%;
        margin-bottom: 10%;
    }

    .container-1 {
        height: 150vh;
    }

    .frozen-img {
        width: 19rem;
        height: 17rem;
    }

    .right-col-content-1 {
        margin-top: -10%;
        margin-bottom: 0%;
    }

    .pink-bg {
        height: 9rem;
    }

    #nas::after {
        right: 12.5rem;
    }
}

@media only screen and (min-width: 280px) and (max-width: 290px) {
    #per {
        width: 16rem;
        font-size: 0.8rem;
    }

    .frozen-img {
        height: 11rem;
    }

    .pink-bg {
        top: 35%;
    }

    #desc {
        margin-top: -210%;
    }

    #nadr {
        font-size: 0.8rem;
        width: 15rem;
        margin-left: 7%;
    }

    #nas {
        font-size: 3rem;
        margin-left: 15%;
    }

    #nadr::after {
        left: -50%;
    }

    #cookies {
        margin-top: -30%;
        height: 40vh;
    }
}

@media only screen and (min-width: 700px) and (max-width: 730px) {

    .input-toggler,
    .menu-toggler,
    .sidebar {
        display: visible;
    }

    .input-toggler {
        display: none;
    }

    .menu-toggler {
        position: fixed;
        right: 5%;
        top: 0px;
        width: 80px;
        height: 90px;
        z-index: 100;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        cursor: pointer;
    }

    .menu-toggler-line {
        width: 60%;
        height: 3px;
        background: #f1b5cf;
        margin: 0 0 8px 0px;
        position: relative;
        transition: all 0.4s ease-out;
    }

    .input-toggler:checked~.menu-toggler .menu-toggler-line {
        top: 5px;
        transform: translateY(100px);
        transform: rotate(45deg);
    }

    .input-toggler:checked~.menu-toggler .menu-toggler-line:nth-child(2) {
        display: none;
    }

    .input-toggler:checked~.menu-toggler .menu-toggler-line:nth-child(3) {
        top: -5px;
        transform: translateY(10);
        transform: rotate(135deg);
    }

    .sidebar {
        position: fixed;
        top: 0;
        height: 100%;
        width: 100%;
        background: #000;
        opacity: 0.5;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: translateX(-100%);
        transition: all 0.4s ease-out;
        z-index: 5;
    }

    .menu-link {
        color: white;
        font-size: 10vmin;
        line-height: 15vmin;
        -webkit-transition: all 0.25s ease-out;
        transition: all 0.25s ease-out;
    }

    .menu-link:hover,
    .menu-link:focus,
    .menu-link:active {
        color: #f1b5cf;
    }

    .input-toggler:checked~.sidebar {
        transform: translateX(0%);
        opacity: 0.98;
    }

    .container-4 {
        overflow: hidden;
    }

    #menu1 {
        display: none;
    }

    #content {
        margin-top: -20%;
        margin-left: -5%;
    }

    #h {
        width: 30rem;
        font-size: 2rem;
    }

    #monia {
        font-size: 4rem;
    }

    .frozen-img {
        bottom: 20%;
        height: 70%;
        left: -10%;
    }

    .pink-bg {
        bottom: 12%;
        height: 50%;
        left: 10%;
    }

    #desc {
        margin-top: 10%;
        margin-left: -10%;
    }

    #nas {
        font-size: 4rem;
    }

    #nadr {
        font-size: 1rem;
        width: 30rem;
        margin-top: 10%;
    }

    #nadr::after {
        height: 45rem;
        width: 46rem;
    }

    #cookies {
        height: 105vh;
        margin-top: 15%;
        width: 100%;
    }

    .epoka_lodowcowa {
        height: 8.5rem;
    }

    .praliny_main {
        height: 9.5rem;
    }

    .ciasto_main {
        height: 7.5rem;
    }

    .imgContent {
        height: 9.5rem;
    }

    .img-wrapper-1 {
        top: 5%;
        left: 0;
    }

    .img-wrapper-2 {
        right: -5%;
        top: 30%;
    }

    .img-wrapper-3 {
        left: 0;
        top: 55%;
    }

    .img-wrapper-4 {
        right: 2%;
        bottom: -5%;
    }

    .container-6 {
        height: 225vh;
    }

    .container-6-content {
        flex-direction: column;
    }

    .cnt-6-left-col h2 {
        width: 35rem;
        font-size: 2.6rem;
    }

    .cnt-6-right-col {
        padding-left: 20%;
        height: 100%;
    }

    form::before,
    form::after {
        display: none;
    }

    .container-5 {
        overflow: hidden;
    }

    .container-5 h2 {
        margin-top: 12%;
    }

    .img-wrapper-1 {
        top: 2%;
    }

    .img-wrapper-2 {
        top: 22%;
    }

    .img-wrapper-3 {
        top: 50%;
    }

    .img-wrapper-4 {
        bottom: 5%;
        right: -5%;
    }
}

/*-------------*/
@media screen and (min-width: 300px) and (max-width: 370px) {
    .container-4 {
        height: 115vh;
        overflow: hidden;
    }

    #cnt4-headline {
        font-size: 1.5rem;
        width: 19.5rem;
        line-height: 2rem;
        margin-left: 10%;
    }

    .circle-bg {
        top: 25%;
    }

    #cnt4-headline::after {
        height: 1.5rem;
        width: 6.5rem;
        bottom: 0;
        left: 0;
    }

    .boxes {
        margin-top: 15%;
    }

    .box-1,
    .box-2,
    .box-3,
    .box-4,
    .box-5 {
        height: 7rem;
    }

    .box-3 h2,
    .box-1 h2,
    .box-5 h2 {
        font-size: 1.1rem;
        line-height: 1.7rem;
    }

    .box-1 .right-col,
    .box-3 .right-col {
        padding-left: 5%;
    }

    .boxes p {
        font-size: 1.1rem;
    }

    .box-1 .left-col p,
    .box-3 .left-col p,
    .box-5 .left-col p {
        font-size: 1.7rem;
    }

    .box-2-h2,
    .box-4-h2 {
        font-size: 1.7rem;
    }

    /*CONTAINER-5*/
    .container-5 {
        height: 235vh;
        overflow: hidden;
    }

    .container-5 h2 {
        font-size: 2.8rem;
    }

    .container-5 h2::after {
        right: 20%;
        bottom: 0;
        height: 1.5rem;
        width: 5rem;
    }

    .container-5-content {
        height: 190vh;
    }

    .img-1 img {
        margin-top: 15%;
        margin-left: 15%;
        height: 10rem;
    }

    .img-3 {
        padding-top: 0%;
    }

    .imgContent,
    .praliny_main {
        height: 10rem;
    }

    .ciasto_main {
        height: 7rem;
    }

    .img-1,
    .img-2,
    .img-3,
    .img-4 {
        height: 0rem;
        width: 0rem;
    }

    .torty-button {
        height: 2.5rem;
        width: 8rem;
        transform: translate(-4rem, -0.3rem);
    }

    .torty-button a {
        font-size: 1.1rem;
    }

    .img-wrapper-1 {
        top: 7%;
    }

    .img-wrapper-2 {
        right: 2%;
        top: 33%;
    }

    .img-wrapper-3 {
        right: 2%;
        top: 60%;
    }

    .img-wrapper-4 {
        right: 2%;
        bottom: -5%;
    }

    /*CONTAINER-6*/
    .container-6-content {
        height: 100%;
        flex-direction: column;
    }

    .cnt-6-left-col {
        flex-basis: 45%;
        padding-top: 12%;
    }

    .cnt-6-right-col {
        flex-basis: 55%;
    }

    .cnt-6-left-col h2 {
        font-size: 1.9rem;
    }

    .cnt-6-left-col h3{
        font-size: 1rem;
    }

    .cnt-6-right-col {
        padding-left: 0%;
    }

    .cnt-6-right-col {
        padding-top: 14%;
    }

    form {
        margin-top: 8%;
    }

    form::before,
    form::after {
        display: none;
    }

    input {
        font-size: 0.9rem;
        height: 2rem;
        width: 7.5rem;
    }

    textarea {
        font-size: 0.9rem;
        width: 17rem;
    }

    #submitBtn {
        width: 17rem;
        border: none;
    }

    .container-6 {
        height: 165vh;
    }
}

@media screen and (min-width: 375px) and (max-width: 391px) {
    .container-4 {
        height: 115vh;
        overflow: hidden;
    }

    #cnt4-headline {
        font-size: 1.7rem;
        width: 19.5rem;
        line-height: 2rem;
        margin-left: 10%;
    }

    .circle-bg {
        top: 25%;
    }

    #cnt4-headline::after {
        height: 1.6rem;
        width: 6rem;
        bottom: 0;
        left: 0;
    }

    .boxes {
        margin-top: 15%;
    }

    .box-1,
    .box-2,
    .box-3,
    .box-4,
    .box-5 {
        height: 7rem;
    }

    .box-3 h2,
    .box-1 h2,
    .box-5 h2 {
        font-size: 1rem;
        line-height: 1.7rem;
    }

    .box-1 .right-col,
    .box-3 .right-col {
        padding-left: 5%;
    }

    .boxes p {
        font-size: 1.3rem;
    }

    .box-1 .left-col p,
    .box-3 .left-col p,
    .box-5 .left-col p {
        font-size: 1.7rem;
    }

    .box-2-h2,
    .box-4-h2 {
        font-size: 1.7rem;
    }

    /*CONTAINER-5*/
    .container-5 {
        height: 235vh;
        overflow: hidden;
    }

    .container-5 h2 {
        font-size: 2.8rem;
    }

    .container-5 h2::after {
        right: 20%;
        bottom: 0;
        height: 1.5rem;
        width: 5rem;
    }

    .container-5-content {
        height: 190vh;
    }

    .img-1 img {
        margin-top: 15%;
        margin-left: 15%;
        height: 10rem;
    }

    .imgContent,
    .praliny_main {
        height: 10rem;
    }

    .ciasto_main {
        height: 7rem;
    }

    .img-1,
    .img-2,
    .img-3,
    .img-4 {
        height: 0rem;
        width: 0rem;
    }

    .torty-button {
        height: 2.5rem;
        width: 8rem;
        transform: translate(-4rem, -0.3rem);
    }

    .torty-button a {
        font-size: 1.1rem;
    }

    .img-wrapper-1 {
        top: 7%;
    }

    .img-wrapper-2 {
        right: 2%;
        top: 33%;
    }

    .img-wrapper-3 {
        right: 2%;
        top: 60%;
    }

    .img-wrapper-4 {
        right: 2%;
        bottom: -5%;
    }

    /*CONTAINER-6*/
    .container-6-content {
        height: 100%;
        flex-direction: column;
    }

    .cnt-6-left-col {
        flex-basis: 45%;
        padding-top: 12%;
    }

    .cnt-6-right-col {
        flex-basis: 55%;
    }

    .cnt-6-left-col h2 {
        font-size: 2.2rem;
    }

    .cnt-6-left-col h3 {
        font-size: 1.2rem;
    }

    .cnt-6-right-col {
        padding-left: 0%;
    }

    .cnt-6-right-col {
        padding-top: 14%;
    }

    form {
        margin-top: 25%;
    }

    form::before,
    form::after {
        display: none;
    }

    input {
        font-size: 0.9rem;
        height: 2rem;
        width: 8.5rem;
    }

    textarea {
        font-size: 0.9rem;
        width: 19.5rem;
    }

    #submitBtn {
        width: 19.5rem;
        border: none;
    }

    .container-6 {
        height: 180vh;
    }
}

@media screen and (min-width: 392px) and (max-width: 420px) {
    .container-4 {
        height: 115vh;
        overflow: hidden;
    }

    #cnt4-headline {
        font-size: 1.7rem;
        width: 19.5rem;
        line-height: 2rem;
        margin-left: 10%;
    }

    .circle-bg {
        top: 25%;
    }

    #cnt4-headline::after {
        height: 1.6rem;
        width: 6rem;
        bottom: 0;
        left: 0;
    }

    .boxes {
        margin-top: 15%;
    }

    .box-1,
    .box-2,
    .box-3,
    .box-4,
    .box-5 {
        height: 7rem;
    }

    .box-3 h2,
    .box-1 h2,
    .box-5 h2 {
        font-size: 1rem;
        line-height: 1.7rem;
    }

    .box-1 .right-col,
    .box-3 .right-col {
        padding-left: 5%;
    }

    .boxes p {
        font-size: 1.3rem;
    }

    .box-1 .left-col p,
    .box-3 .left-col p,
    .box-5 .left-col p {
        font-size: 1.7rem;
    }

    .box-2-h2,
    .box-4-h2 {
        font-size: 1.7rem;
    }

    /*CONTAINER-5*/
    .container-5 {
        height: 235vh;
        overflow: hidden;
    }

    .container-5 h2 {
        font-size: 2.8rem;
    }

    .container-5 h2::after {
        right: 20%;
        bottom: 0;
        height: 1.5rem;
        width: 5rem;
    }

    .container-5-content {
        height: 190vh;
    }

    .img-1 img {
        margin-top: 15%;
        margin-left: 15%;
        height: 10rem;
    }

    .img-3 {
        padding-top: 0%;
    }

    .imgContent,
    .praliny_main {
        height: 10rem;
    }

    .ciasto_main {
        height: 7rem;
    }

    .img-1,
    .img-2,
    .img-3,
    .img-4 {
        height: 0rem;
        width: 0rem;
    }

    .torty-button {
        height: 2.5rem;
        width: 8rem;
        transform: translate(-4rem, -0.3rem);
    }

    .torty-button a {
        font-size: 1.1rem;
    }

    .img-wrapper-1 {
        top: 7%;
    }

    .img-wrapper-2 {
        right: 2%;
        top: 33%;
    }

    .img-wrapper-3 {
        right: 2%;
        top: 60%;
    }

    .img-wrapper-4 {
        right: 2%;
        bottom: -5%;
    }

    /*CONTAINER-6*/
    .container-6-content {
        height: 100%;
        flex-direction: column;
    }

    .cnt-6-left-col {
        flex-basis: 45%;
        padding-top: 12%;
    }

    .cnt-6-right-col {
        flex-basis: 55%;
    }

    .cnt-6-left-col h2 {
        font-size: 2.2rem;
    }

    .cnt-6-left-col h3 {
        font-size: 1.2rem;
    }

    .cnt-6-right-col {
        padding-left: 0%;
    }

    .cnt-6-right-col {
        padding-top: 14%;
    }

    form {
        margin-top: 25%;
    }

    form::before,
    form::after {
        display: none;
    }

    input {
        font-size: 0.9rem;
        height: 2rem;
        width: 8.5rem;
    }

    textarea {
        font-size: 0.9rem;
        width: 19.5rem;
    }

    #submitBtn {
        width: 19.5rem;
        border: none;
    }

    .container-6 {
        height: 165vh;
    }
}

@media only screen and (min-width: 1700px) {
    #h {
        font-size: 5rem;
    }

    #monia {
        font-size: 7rem;
    }

    #per {
        font-size: 1.5rem;
        width: 35rem;
    }

    .but {
        height: 3.5rem;
        width: 10rem;
        font-size: 1.1rem;
    }

    #nadr::after {
        height: 70rem;
        width: 70rem;
    }

    #nas {
        font-size: 8rem;
        width: 25rem;
    }

    #nas::after {
        width: 8.5rem;
        height: 2.5rem;
        bottom: -3rem;
    }

    #nadr {
        font-size: 2.5rem;
        line-height: 5.5rem;
        width: 69rem;
        margin-top: 15%;
    }

    form::before,
    form::after {
        display: none;
    }

    .img-1,
    .img-2,
    .img-3,
    .img-4 {
        background-size: cover;
        background-repeat: no-repeat;
    }

    .img-1 img {
        margin-top: 14%;
        margin-left: 15%;
    }

    .img-2 img {
        margin-left: 50%;
        margin-top: 15%;
        transform: translateX(-50%);
    }

    .img-3 img {
        margin-left: 50%;
        margin-top: 14%;
        transform: translateX(-50%);
    }

    .img-4 img {
        margin-left: 50%;
        margin-top: 3%;
        transform: translateX(-50%);
    }

    .epoka_lodowcowa {
        height: 21.5rem;
    }

    .praliny_main {
        height: 21.5rem;
    }

    .ciasto_main {
        height: 15.5rem;
    }

    .imgContent {
        height: 21.5rem;
    }

    .torty-button {
        margin-top: 10%;
    }

    form {
        height: 42rem;
        max-width: 35rem;
    }

    /*form::before
    {
        top: 55%;
        width: 42.5rem;
        left: -66%;
    }
    form::after
    {
        left: -5.5%;
        bottom: -6%;
        width: 33rem;
    }*/
    input {
        height: 3.5rem;
        width: 11.7rem;
    }

    textarea {
        width: 27rem;
        height: 20rem;
    }

    button {
        border: none;
    }

    /*form::before, form::after
    {
        display: none;
    }*/

    form button {
        height: 3rem;
        width: 27rem;
    }

    .cnt-6-left-col {
        padding: 8% 10%;
    }

    .cnt-6-left-col h2 {
        font-size: 4rem;
    }

    .tel-box,
    .mail-box,
    .loc-box,
    .ig-box {
        margin: 10% 0;
    }
.container-5
{
overflow: hidden;
}
}

@media only screen and (min-width: 280px) and (max-width: 290px) {
    #per {
        width: 16rem;
        font-size: 0.8rem;
    }

    .frozen-img {
        height: 11rem;
    }

    .pink-bg {
        top: 35%;
    }

    #desc {
        margin-top: -210%;
    }

    #nadr {
        font-size: 0.8rem;
        width: 15rem;
        margin-left: 7%;
    }

    #nas {
        font-size: 3rem;
        margin-left: 15%;
    }

    #nadr::after {
        left: -50%;
    }

    #cookies {
        margin-top: -30%;
        height: 40vh;
    }

    .container-4 {
        height: 115vh;
        overflow: hidden;
    }

    #cnt4-headline {
        font-size: 1.3rem;
        width: 19.5rem;
        line-height: 2rem;
        margin-left: 10%;
    }

    .circle-bg {
        top: 25%;
    }

    #cnt4-headline::after {
        height: 1.5rem;
        width: 6rem;
        bottom: 1%;
        left: -1%;
    }

    .boxes {
        margin-top: 15%;
    }

    .box-1,
    .box-2,
    .box-3,
    .box-4,
    .box-5 {
        height: 7rem;
    }

    .box-3 h2,
    .box-1 h2,
    .box-5 h2 {
        font-size: 1rem;
        line-height: 1.7rem;
    }

    .box-1 .right-col,
    .box-3 .right-col {
        padding-left: 5%;
    }

    .boxes p {
        font-size: 1.1rem;
    }

    .box-1 .left-col p,
    .box-3 .left-col p,
    .box-5 .left-col p {
        font-size: 1.3rem;
    }

    .box-2-h2,
    .box-4-h2 {
        font-size: 1.3rem;
    }

    /*CONTAINER-5*/
    .container-5 {
        height: 235vh;
        overflow: hidden;
    }

    .container-5 h2 {
        font-size: 2.8rem;
    }

    .container-5 h2::after {
        right: 20%;
        bottom: 0;
        height: 1.5rem;
        width: 5rem;
    }

    .container-5-content {
        height: 190vh;
    }

    .img-1 img {
        margin-top: 15%;
        margin-left: 15%;
        height: 7.5rem;
    }

    .img-3 {
        padding-top: 0%;
    }

    .imgContent,
    .praliny_main {
        height: 6.5rem;
    }

    .ciasto_main {
        height: 5rem;
    }

    .img-1,
    .img-2,
    .img-3,
    .img-4 {
        height: 0rem;
        width: 0rem;
    }

    .torty-button {
        height: 1.9rem;
        width: 6.5rem;
        transform: translate(-4rem, -0.3rem);
    }

    .torty-button a {
        font-size: 0.8rem;
    }

    .img-wrapper-1 {
        top: 7%;
    }

    .img-wrapper-2 {
        right: 2%;
        top: 33%;
    }

    .img-wrapper-3 {
        right: 2%;
        top: 60%;
    }

    .img-wrapper-4 {
        right: 2%;
        bottom: -5%;
    }

    /*CONTAINER-6*/
    .container-6-content {
        height: 100%;
        flex-direction: column;
    }

    .cnt-6-left-col {
        flex-basis: 45%;
        padding-top: 12%;
    }

    .cnt-6-right-col {
        flex-basis: 55%;
    }

    .cnt-6-left-col h2 {
        font-size: 1.6rem;
    }

    .cnt-6-left-col h3 {
        font-size: 0.85rem;
    }

    .cnt-6-right-col {
        padding-left: 0%;
    }

    .cnt-6-right-col {
        padding-top: 14%;
    }

    form {
        margin-top: 8%;
    }

    form::before,
    form::after {
        display: none;
    }

    input {
        font-size: 0.9rem;
        height: 2rem;
        width: 6rem;
    }

    textarea {
        font-size: 0.9rem;
        width: 14rem;
    }

    #submitBtn {
        width: 14rem;
        border: none;
    }

    .container-6 {
        height: 165vh;
    }
}
@media screen 
and (min-width: 1200px) 
and (min-height: 1299px) 
and (max-height: 1301px)
{
    .container-1
    {
        height: 65vh;
    }
    nav
    {
        height: 25vh;
    }
    #content
    {
        height: 75vh;
    }
    .frozen-img
    {
        right: 15%;
        top: 5%;
    }
    .pink-bg
    {
        top: 12%;
        right: 10%;
    }
    #desc
    {
        height: 50vh;
    }
    #cookies
    {
        height: 50vh;
    }
    #menu1
    {
        margin-top: 4rem;
    }
    .container-4
    {
        height: 65vh;
    }
    #cnt4-headline 
    {
        font-size: 3rem;
    }
    #cnt4-headline::after
    {
        top: 10%;
        left: 60%;
        height: 2.5rem;
        width: 11rem;
    }
    .container-5
    {
        height: 140vh;
    }
    .img-1 img
    {
        margin-top: 25%;
        margin-left: 18%;
    }
    .img-2 img
    {
        margin-top: 25%;
    }
    .img-3 img
    {
        margin-top: 25%;
    }
    .img-4 img
    {
        margin-top: 10%;
    }
    .img-wrapper-3
    {
        bottom: 45%;
    }
    .img-wrapper-4
    {
        bottom: 25%;
    }
    .torty-button
    {
        height: 4rem;
        width: 12rem;
        font-size: 1.6rem;
    }
    .cnt-6-left-col h2
    {
        font-size: 5rem;
    }
    .container-6-content
    {
        flex-direction: column;
    }
    .tel-box, .mail-box, .loc-box, .ig-box
    {
        margin: 8rem 0;
        width: 30rem;
    }
    .tel-box h3, .mail-box h3, .loc-box h3, .ig-box h3
    {
        font-size: 3rem;
    }
    form
    {
        height: 40rem;
        max-width: 45rem;
    }
    input
    {
        height: 4rem;
        width: 15rem;
    }
    textarea
    {
        width: 34.5rem;
    }
    form::after, form::before
    {
        display: none;
    }
    form button 
    {
        height: 4.5rem;
        width: 34.5rem;
        font-size: 2rem;
    }
    .cnt-6-right-col
    {
        padding-top: 10%;
        padding-left: 25%;
    }
}
@media only screen 
and (min-width: 1200px) 
and (max-height: 800px)
{
    
}
@media only screen and (min-width: 710px) and (max-width: 1000px)
{
    #per {
        line-height: 2rem;
        width: 20rem;
        margin-left: 21%;
        font-weight: 400;
        font-size: 1rem;
    }
    #h
    {
        font-size: 3rem;
    }
    #monia
    {
        font-size: 4rem;
    }
    #nadr
    {
        font-size: 2rem;
        width: 40rem;
        margin-left: 12%;
    }
    .container-4, .container-5
    {
        overflow: hidden;
    }
    .container-6-content
    {
        flex-direction: column;
    }
    .frozen-img
    {
        right: 10%;
        top: 10%;
    }
    .pink-bg
    {
        right: 5%;
        bottom: 45%;
    }
    li
    {
        margin: 2rem;
    }
    .container-1
    {
        height: 80vh;
    }
    .container-4
    {
        height: 100vh;
    }
    form::before, form::after
    {
        display: none;
    }
    .container-6
    {
        height: 120vh;
    }
    .cnt-6-right-col
    {
        padding: 5% 25%;
    }
}
@media only screen and (min-width: 2560px)
{
    li
    {
        margin: 5rem;
        font-size: 3.5rem;
    }
    li::before
    {
        width: 1rem;
        height: 1rem;
    }
    #h
    {
        font-size: 7rem;
    }
    #monia
    {
        font-size: 10rem;
    }
    #per
    {
        font-size: 2.5rem;
        width: 50rem;
        line-height: 4rem;
    }
    .but
    {
        margin-top: 3rem;
        height: 5rem;
        width: 15rem;
    }
    .but a
    {
        font-size: 1.8rem;
    }
    #nadr::after
    {
        top: -60%;
        height: 120rem;
        width: 120rem;
    }
    #nadr
    {
        font-size: 4rem;
        width: 90rem;
        line-height: 9rem;
    }
    #nas
    {
        width: 40rem;
        font-size: 12rem;
        margin-top: 20%;
    }
    #nas::after
    {
        bottom: -6rem;
        height: 4.5rem;
        width: 14rem;
    }
    #desc
    {
        padding-top: 0;
    }
    #cnt4-headline
    {
        font-size: 6rem;
        width: 80rem;
    }
    #cnt4-headline::after 
    {
        left: 60%;
        top: 5%;
        height: 5rem;
        width: 22rem;
    }
    .box-1, .box-2, .box-3, .box-4, .box-5 {
        height: 20rem;
    }
    .box-3 h2, .box-1 h2, .box-5 h2 {
        font-size: 4.5em;
        text-transform: uppercase;
        font-weight: 200;
    }
    .box-1 p, .box-3 p, .box-5 p {
        font-size: 5em;
        color: #f1b5cf;
    }
    .box-2-h2, .box-4-h2 {
        font-size: 4.5em;
        font-weight: 500;
    }
    .boxes p {
        font-size: 4.5em;
    }
    .container-5 h2
    {
        width: 32rem;
        font-size: 8rem;
    }
    .container-5 h2::after
    {
        height: 4rem;
        width: 15rem;
        right: 0;
    }
    .torty-button
    {
        height: 4.5rem;
        width: 15rem;
        transform: translate(-6rem, -1rem);
    }
    .torty-button a
    {
        font-size: 2rem;
    }
    .cnt-6-left-col h2
    {
        font-size: 6rem;
    }
    .tel-box
    {
        width: 25rem;
    }
    .tel-box, .mail-box, .loc-box, .ig-box {
        margin: 14% 0;
    }
    .tel-box h3, .mail-box h3, .loc-box h3, .ig-box h3
    {
        font-size: 3rem;
    }
    
    form {
        height: 50rem;
        max-width: 45rem;
    }

    /*form::before
    {
        top: 55%;
        width: 42.5rem;
        left: -66%;
    }
    form::after
    {
        left: -5.5%;
        bottom: -6%;
        width: 33rem;
    }*/
    input {
        height: 5.5rem;
        width: 17rem;
        font-size: 2.2rem;
    }

    textarea {
        font-size: 2.2rem;
        width: 40rem;
        height: 30rem;
    }
    label
    {
        font-size: 2rem;
    }
    #fileChosen 
    {
        font-size: 1.4rem;
    }
    form button {
        height: 4.5rem;
        width: 40rem;
        border: none;
        font-size: 2rem;
    }
    .cnt-6-left-col
    {
        padding-top: 3%;
    }
    .cnt-6-right-col
    {
        padding: 6% 10%;
    }
}