style.css 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. *, html {
  2. margin: 0;
  3. padding: 0;
  4. }
  5. .container {
  6. position: relative;
  7. max-width: 1140px;
  8. margin: 0 auto;
  9. padding: 50px;
  10. }
  11. .calc__wrapper {
  12. width: 540px;
  13. height: 350px;
  14. padding: 20px;
  15. margin: 0 auto;
  16. border: 2px solid grey;
  17. background-color: ivory;
  18. box-shadow: 12px 12px 2px 1px rgba(93, 93, 95, 0.2);
  19. border-radius: 25px;
  20. text-align: center;
  21. }
  22. h3 {
  23. margin-bottom: 20px;
  24. }
  25. input {
  26. width: 60px;
  27. margin-left: 10px;
  28. padding: 2px;
  29. }
  30. .calc__item {
  31. display: grid;
  32. grid-template-columns: 1fr 90px 1fr;
  33. align-items: baseline;
  34. padding: 10px;
  35. text-align: left;
  36. }
  37. .price__item{
  38. display: none;
  39. margin-top: 20px;
  40. }
  41. .outer {
  42. margin-top: 20px;
  43. margin-bottom: 10px;
  44. font-size: 24px;
  45. font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  46. color: rgb(19, 16, 207);
  47. }
  48. .btn {
  49. display: none;
  50. margin: 0 auto;
  51. padding: 5px;
  52. border-radius: 10px;
  53. background-color:linen;
  54. color: rgb(92, 44, 44);
  55. box-shadow: 3px 3px 2px 1px rgba(95, 93, 94, 0.2);
  56. align-self: end;
  57. }