@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    box-sizing: border-box;
}

body {
    width: 90%vw;
    font-family: montserrat, sans-serif;
    background-color: #FCE4EC;
    color:#FFF3E0;
    margin: 0;
}

.wrapper {
    width: 100%;
    height:100vh;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-content: stretch;
}

header {
    max-width: 800px;
    height:100vh;
    background: url(../links/Smthpic.png) no-repeat;
    background-position: center bottom;
    background-size:contain;
    background-color: #880E4F;
}

hgroup {
    width:100%;
    padding:1rem;
    font-family: Montserrat;
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
}

hgroup h1, hgroup h2 {
    margin:0;
    order: 2;
}

hgroup h1 {
    color: #FFF3E0;
    font-size: 8.5rem;
    line-height: 1.1em;
}

h2 {
    font-size:4rem;
    color: #FFF3E0;
    position: relative;
    top: 50px;
    }
hgroup p {
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 1.5rem;
    text-decoration: underline;
    color: #FCE4EC; 
       order: 1;
    }

    @supports (aspect-ratio: 2 / 1) {
        header {
            aspect-ratio: 2 / 1;
        }
    }

    header img {
        position: absolute;
        top:0;
        left:0;
    }

.container {
    display: flex;
    width: calc(100% - 600px);
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-end;
    justify-content: space-between;
    background: #FCE4EC;
    padding: 2rem 0 2rem 2rem;
}

.step {
    width: 100%;
}

.container form.one, .container form.two, .container form.three, .container form.four, .container form.five {
    border-radius: 61px 0 0px 61px; 
    min-height: 200px;
    padding: 1rem;
    width: 80%;
    box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    position:relative;
}

.container form.one:before, .container form.two:before, .container form.three:before,.container form.four:before,.container form.five:before {
    content: "";
    width:100px;
    height:100px;
    background-color: #3E2723;
    position:absolute;
    top:50%;
    left:-100px;
    transform: translateY(-50%);
    box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.25);
}

.container form p {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 600;
    font-size: 2.3rem;
    color: #FCE4EC;
}

img {
    position: absolute;
    width: 733px;
    height: 523px;
    left: -3px;
    top: 427px;
}

.one {
    background: rgba(136, 14, 79, 0.85);
    mix-blend-mode: normal;
}
.one:hover {
    transform:translateX(-30px);
}

.two {
    background: rgba(211, 47, 47, 0.85);
}
.two:hover {
    transform:translateX(-30px);
}

.three {
    background: rgba(251, 192, 45, 0.85);
}
.three:hover {
    transform:translateX(-30px);
}

.four {
    background: rgba(244, 67, 54, 0.85);
}
.four:hover {
    transform:translateX(-30px);
}

.five {
    background: rgba(255, 111, 0, 0.85); 
}
.five:hover {
    transform:translateX(-30px);
}

.submit {
    width:70%;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
}
.submit:hover {
    transform:scaleY(1.2);
}

.ingredients{
    display:flex;
    flex-wrap: wrap;
    align-items: baseline;
    align-content: space-around;
    justify-content: center;
    gap: 10px;
    font-size: 1.5rem;
    font-weight: 500;
    list-style-position: outside;
   }

footer {
    font-size: 1.5rem;
    width: 100%;
    color: #FCE4EC;
    background: rgba(62, 39, 35,.75);
    padding: 15px;
}