:root {
   --rowgap: 60px;
   --hmargin: 50px;
   --scrollmargin: 100px;
   --navbarh: 100px;
}

html,
body {
   margin: 0;
   font-family: "Playfair", serif;
   font-optical-sizing: auto;
   scroll-behavior: smooth;
}

body {
   display: flex;
   flex-direction: column;
   gap: var(--rowgap);
}

.noScroll {
   overflow: hidden;
}

h1,
h2,
h3,
p {
   font-weight: normal;
   margin: 0;
}

a {
   color: unset;
   text-decoration: none;
}

button,
input {
   padding: 0;
}

.img {
   width: 100%;
   height: auto;
}

.dropshadow {
   filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 25%));
}

.blockShadow {
   filter: drop-shadow(0 0 40px rgba(0, 0, 0, 0.1));
}

.orderButton {
   width: 481px;
   height: 90px;
   font-family: inherit;
   color: rgb(255, 255, 255);
   border-radius: 50px;
   border: none;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}

.orderButton-text {
   font-size: 64px;
   transform: translateY(-10%);
}

.orderButton {
   width: 300px;
   height: 70px;
}

.orderButton-text {
   font-size: 42px;
}

.container {
   margin: 0 auto;
   max-width: 1160px;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   margin: 0 var(--hmargin);
   align-self: center;
}

.tosCheck {
   display: flex;
   align-items: center;
   gap: 20px;
}

.tosCheck-checkbox {
   width: 40px;
   height: 40px;
   accent-color: #d8ad5d;
   border-radius: 10px;
}

input[type="checkbox"].tosCheck-checkbox:checked::after {
   border-color: white;
}

.tosCheck-text {
   font-size: 16px;
   color: white;
}

.tosCheck-text-link {
   color: #dfcba6;
   text-decoration: underline;
}

@media screen and (max-width: 1400px) {
}

@media screen and (max-width: 1000px) {
}

@media screen and (max-width: 600px) {
   :root {
      --hmargin: 30px;
   }
}