body{ font-family: 'Inter', sans-serif; background-color: #F4F4F5; } p{ margin: 0; font-size: 19px; } .main{ min-height: 100vh; margin-top: 124px; display: flex; } .main_wrapper{ width: 100%; } .main_block1{ width: 100%; height: 138px; margin-top: 32px; } .Word_Basket{ font-size: 26px; font-weight: 700; margin-bottom: 43px; } .line{ margin-bottom: 15px; border: none; padding: 0; height: 0; border-top: 2px dashed #18BDF1; background: #F4F4F5; } .Word_DeleteAll{ color: #18BDF1; font-size: 20px; text-decoration: none; transition: color 0.2s ease; } .Word_DeleteAll:hover{ color: #91F0FD; } .line_black{ width: 100%; border-top: 1px solid #000; margin-bottom: 32px; } .Block_Two_Three{ display: flex; } .Shell{ margin-right: 57px; width: 700px; } .main_block2{ width: 100%; display: flex; margin-bottom: 32px; } .Img_Films{ width: 101px; height: 147px; margin-right: 56px; } .Options_In_Films{ margin-right: 75px; } .word_Dracula{ font-weight: 700; } .word_Ganres{ margin-top: 3px; color: #808080; margin-bottom: 35px; } .word_Delete{ font-size: 20px; text-decoration: none; color: #18BDF1; transition: color 0.2s ease; } .word_Delete:hover{ color: #91F0FD; } .Button_add_In_Basket{ display: flex; margin-right: 107px; } .Circle_Left{ width: 35px; height: 44px; border: 1px solid #95999B; border-radius: 60% 0 0 60% / 50% 0 0 50%; background: #CCD4DB; display: flex; justify-content: center; align-items: center; font-size: 24px; cursor: pointer; transition: .2s ease; } .Circle_Left:hover{ background: #B9C0C6; } .text_Count{ height: 44px; width: 90px; border: 1px solid #95999B; background-color: #CCD4DB; text-align: center; } .Circle_Right{ width: 35px; height: 44px; border: 1px solid #95999B; border-radius: 0 60% 60% 0 / 0 50% 50% 0; background: #CCD4DB; display: flex; justify-content: center; align-items: center; font-size: 20px; padding-right: 5px; cursor: pointer; transition: .2s ease; } .Circle_Right:hover{ background: #B9C0C6; } .Word_Dollars{ font-size: 24px; font-weight: 700; } .main_block3{ width: 354px; } .wrapper_block3{ width: 100%; height: 478px; border-radius: 3%; justify-content: center; text-align: center; border: 1px solid #94A8B8; } .Word_with_Registr{ text-align: left; margin-left: 10px; margin-top: 22px; margin-bottom: 49px; font-size: 18px; } .word_registr{ text-decoration: none; color: #18BDF1; transition: color 0.2s ease; } .word_registr:hover{ color: #91F0FD; } .Class_Amount{ display: flex; margin-bottom: 33px; margin-left: 10px; } .Word_Amount{ margin-right: 62px; font-size: 18px; } .Word_Pay{ font-size: 20px; } .Class_Number{ display: flex; margin-bottom: 56px; margin-left: 10px; } .Word_Number{ font-size: 18px; margin-right: 112px; } .Word_Count{ font-size: 20px; } .Text_Promo{ display: flex; margin-left: 10px; margin-bottom: 28px; height: 56px; } .Input_Word{ height: 56px; width: 198px; border: 1px solid #D9D9D9; background-color: #D9D9D9; font-size: 18px; } .Button_Apply{ width: 132px; height: 56px; border: 1px solid #BBCCD8; background-color: #BBCCD8; color: #0CA9BE; font-size: 18px; transition: 0.2s ease; } .Button_Apply:hover{ background-color: #CEE0EE; } .All_price{ display: flex; margin-left: 10px; margin-bottom: 20px; font-weight: 700; font-size: 18px; } .Text_Left_All_price{ margin-right: 105px; } .button_Arrange{ width: 190px; height: 43px; background-color: #FC4343; border: 1px solid #FC4343; border-radius: 5px; color: #FFFFFF; transition: 0.2s ease; } .button_Arrange:hover{ background-color: #FF7575; border: 1px solid #FF7575; } @media (max-width: 1469px){ .Shell{ margin-right: 10px; } .Img_Films{ margin: 0px; } .Options_In_Films{ margin-right: 20px; } .Shell{ width: 600px; } } @media (max-width: 1321px){ .Shell{ width: 200px; } .main_block2{ display: flex; flex-direction: column; align-items: center; } .Options_In_Films{ text-align: center; margin-right: 0; } .word_Ganres{ margin-bottom: 10px; } .Button_add_In_Basket{ margin-right: 0px; } .Block_Two_Three{ width: 100%; } } @media (max-width: 527px){ .Block_Two_Three{ flex-direction: column; align-items: center; } } @media (max-width: 358px){ .main_block3{ width: 100%; margin-bottom: 10px; } .Word_with_Registr{ font-size: 16px; width: 90%; text-align: center; margin-bottom: 15px; } .Class_Amount{ flex-direction: column; align-items: center; margin-left: 0; } .Word_Amount{ margin-right: 0px; font-size: 16px; } .Word_Pay{ font-size: 16px; } .Class_Number{ flex-direction: column; align-items: center; margin-left: 0; margin-bottom: 5px; } .Word_Number{ font-size: 16px; margin-right: 0px; } .Word_Count{ font-size: 16px; } .All_price{ flex-direction: column; align-items: center; margin-left: 0; } .Text_Left_All_price{ font-size: 16px; margin-right: 0px; } .Price{ font-size: 16px; } .Text_Promo{ margin-left: 0px; } .Input_Word{ width: 70%; } .Button_Apply{ width: 30%; } }