* { margin: 0; padding: 0; box-sizing: border-box; } .flex { display: flex; } body { font-family: Arial, Helvetica, sans-serif; background-color: #f5f5f5; position: relative; padding-bottom: 40px; min-height: 100vh; } header > div > div { width: 80px; font-size: 12px; margin-left: 10px; } header > div > div:hover { cursor: pointer; } header > div { margin-bottom: 5px; padding: 5px 0px; border-bottom: 1px gray solid; } footer { text-align: center; background-color: #333; color: white; padding: 10px; position: absolute; bottom: 0; width: 100%; } h2 { padding: 10px; } th, td { border: black 1px solid; } table { margin: auto; margin-top: 10px; } main { margin: auto; display: grid; grid-template-columns: 300px 400px; grid-template-rows: 420px; grid-gap: 15px; justify-content: space-around; margin-top: 20px; width: 80%; padding-bottom: 30px; } main > div { border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; background-color: #ffffff; } form { margin-left: 50px; margin-top: 10px; } #form { padding: 5px 20px; border: 0; border-radius: 6px; } #form:hover { color: white; background-color: #14718a; } .o { margin-left: 10px; } #n { margin-top: 3px; margin-left: 65px; font-size: 8px; text-align: center; padding-bottom: 20px; width: 130px; } #c { height: 20px; margin-top: 15px; margin-left: 3px; } #h:hover { cursor: pointer; } #h { margin-left: 10px; } #otpbox { box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; padding: 10px; width: 250px; margin-left: 50px; } @media screen and (max-width: 375px) { main { display: grid; grid-template-columns: repeat(1, 300px); grid-template-rows: 400px 450px; } #otpbox { margin: auto; margin-top: 10px; } } img { width: 15%; height: 50%; } #cart { display: grid; } #cart > div { border: black 1px solid; border-radius: 10px; display: flex; justify-content: space-around; align-items: center; margin-top: 3px; } .p { margin-left: 30px; width: 100px; } #ptag { margin-left: 5px; } .disT{ width: 125px; border-bottom: black 3px solid; }