@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@200;300;400;500;600;700&display=swap"); header { font-size: 32px; border-bottom: #533908 solid 2px; font-family: "Montserrat Alternates", sans-serif; color: #533908; padding: 0.5em; display: flex; align-items: center; } header nav { justify-content: flex-end important; display: flex important; flex-grow: 1; text-align: right; } header .nav-link { padding-left: 1%; } .container-fluid { position: relative; line-height: 1; } .container-fluid img { width: 100%; } .container-fluid h1 { position: absolute; align-items: center; top: 7%; left: 40%; text-align: center; font-family: "Montserrat Alternates"; font-weight: 500; color: white; } .container-fluid p1 { position: absolute; top: 20%; font-family: "Montserrat Alternates"; font-weight: 200; left: 25%; right: 5%; color: white; text-align: left; } .container-fluid p2 { position: absolute; top: 30%; font-family: "Montserrat Alternates"; font-weight: 100; left: 25%; right: 5%; color: white; text-align: left; } @media screen and (min-width: 1427px) { .container-fluid p1 { font-size: 60px; } .container-fluid p2 { font-size: 50px; } .container-fluid h1 { font-size: 90px; } .text-assortment { font-size: 36px; } p5 { font-size: 20px; } p6 { font-size: 20px; padding-left: 35%; } cart u, orders u { font-size: 26px; } cart .btn, orders .btn { font-size: 20px; } } @media screen and (min-width: 1120px) and (max-width: 1426px) { .container-fluid p1 { font-size: 45px; } .container-fluid p2 { font-size: 40px; } .container-fluid h1 { font-size: 75px; } .text-assortment { font-size: 36px; } p5 { font-size: 18px; } p6 { padding-left: 15%; font-size: 15px; } cart u, orders u { font-size: 23px; } cart .btn, orders .btn { font-size: 18px; } } @media screen and (min-width: 720px) and (max-width: 1119px) { .container-fluid p1 { font-size: 30px; } .container-fluid p2 { font-size: 25px; } .container-fluid h1 { font-size: 50px; } .text-assortment { font-size: 36px; } p5 { font-size: 15px; } p6 { padding-left: 60%; font-size: 15px; } cart u, orders u { font-size: 20px; } cart .btn, orders .btn { font-size: 15px; } } @media screen and (min-width: 415px) and (max-width: 719px) { .container-fluid p1 { font-size: 15px; } .container-fluid p2 { font-size: 12px; } .container-fluid h1 { font-size: 30px; } .text-assortment { font-size: 20px; } p5 { font-size: 12px; } p6 { padding-left: 40%; font-size: 12px; } cart u, orders u { font-size: 18px; } cart .btn, orders .btn { font-size: 10px; } } @media screen and (min-width: 100px) and (max-width: 414px) { .container-fluid p1 { font-size: 8px; } .container-fluid p2 { font-size: 5px; } .container-fluid h1 { font-size: 20px; } .text-assortment { font-size: 10px; } } .text-assortment { font-family: "Montserrat Alternates"; font-weight: 400; color: #533908; text-align: center; right: 50%; padding-top: 4%; } p3 { font-family: "Montserrat Alternates"; } .text-catalog { font-family: "Montserrat Alternates"; font-weight: 400; font-size: 36px; color: #533908; text-align: center; } .text-center { margin-bottom: 3%; } catalog img { padding-bottom: 25px; } .title { font-family: "Montserrat Alternates"; font-weight: 400; font-size: 40px; color: #533908; text-align: center; margin-top: 3%; margin-bottom: 3%; width: fit-content; margin-left: auto; margin-right: auto; border: 3px solid; border-radius: 30%; } cart .container-products, orders .container-products { background-color: rgba(210, 202, 188, 0.64); position: relative; font-family: "Montserrat Alternates"; margin-bottom: 3%; } .container-products .title-product, .container-products .price, .container-products .articuL, .container-products a { margin-left: 10%; position: absolute; padding: 3%; } .container-products .title-product { top: 0; left: 0; } .container-products .price { top: 0; right: 0; } .container-products .title-product, .container-products .price { font-weight: 700; } .container-products .articul { bottom: 0; left: 0; padding-left: 35%; padding-bottom: 3%; } .container-products a { width: 20%; bottom: 0; right: 0; margin-bottom: 3%; } .container-products img { width: 50px; padding: 2%; } cart .card, orders .card { background-color: rgba(191, 180, 161, 1); margin-bottom: 30px; } cart u, orders u { padding-left: 4%; text-align: left; margin-left: 3%; font-family: "Montserrat Alternates"; font-weight: 500; padding-bottom: 10%; } p5 { text-align: left; margin-left: 3%; font-family: "Montserrat Alternates"; } p6 { text-align: right; font-family: "Montserrat Alternates"; margin-right: 3%; } cart .btn, orders .btn { position: relative; top: 60%; text-align: center; font-family: "Montserrat Alternates"; font-weight: 100; text-align: center; margin-top: 3%; margin-bottom: 3%; width: fit-content; margin-left: auto; margin-right: auto; color: white; background-color: #533908; } product .btn { text-align: center; font-family: "Montserrat Alternates"; font-weight: 100; text-align: center; margin-top: 150px; margin-bottom: 3%; width: fit-content; margin-left: auto; margin-right: auto; color: white; background-color: #533908; } .title-pageproduct { font-size: 28px; font-weight: 600; color: #533908; font-family: "Montserrat Alternates"; margin-top: 5%; margin-left: 10%; margin-bottom: 10px; } product img { width: 70%; } product .card { background-color: rgba(191, 180, 161, 1); margin-right: 5%; margin-left: 5%; } product .title-card { font-size: 24px; margin: 20px; font-weight: 600; color: #533908; font-family: "Montserrat Alternates"; } product .color, product .size, product .price, product .color-info, product .size-info, product .price-info { margin-top: 60px; padding: 5%; position: absolute; } product .color, product .size, product .price { left: 0; } product .color-info, product .size-info, product .price-info { right: 0; } product .color, product .color-info { padding-top: 10px; } product .size, product .size-info { padding-top: 40px; } product .price, product .price-info { padding-top: 70px; } account .container { padding: 20%; padding-top: 5%; } account .title { font-family: "Montserrat Alternates", sans-serif; } .form-text { text-align: center; font-family: "Montserrat Alternates", sans-serif; } .form-group { display: flex; flex-direction: column; margin: 3%; } button[type="submit"], account .btn { background-color: #d4c8ba; border: 7px solid #d4c8ba; color: #533908; margin-top: 15px; margin-bottom: 40px; border-radius: 25px; } add { align-items: center; text-align: center; } add .container { width: 80%; }