body{ background: #FAF8F1; height: 100%; } p{ text-align: center; font-size: 25px; padding-top: 3%; } img{ height: 450px; width: 350px; margin-top: 70px; border-radius: 25px; } .img_options{ height: 350px; width: 350px; margin-top: 60px; border-radius: 25px; } .navbar{ background-color: #4B5146; backdrop-filter: blur(10px); color: #FAF8F1; } h1{ text-align: center; margin-top: 30px; /* padding: 0.5em; */ } h2{ text-align: left; font-size: 25px; } @media(max-width: 750px){ .img_options{ margin-left: 0; } .card{ margin: 0 auto; margin-top: 70px; } .container-fluid { display: flex; flex-direction: column; align-items: center; } .container-fluid img{ margin-top: 30px; margin-left: 0; } price table, th, td { width: auto; padding: 1em; margin-top: 30px; margin: auto; border: 3px solid; border-color: #4B5146; text-align: center; } table, th, td { width: auto; padding: 1em; margin-top: 30px; margin: 20px; border: 3px solid; border-color: #4B5146; text-align: center; } } @media (max-width: 550){ table{ font-size: 0.9rem; } } @media (max-width: 450px){ img{ height: 400px; width: 300px; } .img_options{ height: 250px; width: 250px; margin-left: 0; } table{ font-size: 0.rem; } } @media (max-width: 330px){ img{ height: 250px; width: 200px; } table{ font-size: 0.5rem; } } tr:hover {background-color: #EEDFCC;} .form-group { display: flex; flex-direction: column; margin-bottom: 10px; } label { margin-bottom: 5px; } input[type="text"], input[type="email"], input[type="password"], textarea { border-radius: 25px; padding: 10px; border: 1px solid #f4ecd9; width: 95%; margin: 0 auto; } @media (min-width: 750px) { input[type="text"], input[type="email"], input[type="password"], textarea { width: 80%; margin: 0 auto; font-size: 1.6rem; } table, th, td { padding: 2em; margin: auto; margin-top: 30px; border: 3px solid; border-color: #4B5146; text-align: center; font-size: 1.2rem; } } .form-text { margin-top: 10px; text-align: center; } form { margin-top: 70px; text-align: center; } form div { margin-bottom: 75px; } button[type="submit"] { background-color: #EEDFCC; border: 2px solid #4B5146; margin-top: 45px; border-radius: 25px; } .btn{ background-color: #EEDFCC; border: 2px solid #4B5146; margin-top: 45px; border-radius: 25px; } add { align-items: center; text-align: center; } add .container { width: 80%; } .container-fluid h1 { font-size: 50px; text-align: left; padding-left: 5%; padding-top: 7%; } .container-fluid h3{ font-size: 100px; text-align: left; padding-left: 5%; font-size: 20px; padding-top: 3%; } .container-fluid h2{ text-align: left; padding-left: 5%; padding-top: 3%; } .card{ padding: 0.5em; background-color: #EEDFCC; border-radius: 25px; align-items: center; margin-top: 70px; font-size: 25px; line-height: 40px; }