/* reset annoying shit */ * { padding: 0; margin: 0; color: black; } a { color: inherit; text-decoration: underline; } ul { list-style: none; } html { height: 100%; width: 100%; } body { height: auto; min-height: 100%; width: auto; display: block; box-sizing: border-box; } /* #region reusable */ .hidden { visibility: hidden; } .textLeft { text-align: left; } .textCenter { text-align: center; } .textRight { text-align: right; } .colorWhite { color: #ffffff; } .colorBlack { color: #000000; } .colorLightGreen { color: #8cad87; } .backgroundWhite { background-color: #ffffff; } .backgroundBlack { background-color: #000000; } .backgroundLightGreen { background-color: #8cad87; } .fontXL { font-size: 10vmin; } .fontL { font-size: 7.5vmin; } .fontM { font-size: 5vmin; } .fontS { font-size: 2.5vmin; } .fontXS { font-size: 1vmin; } /* #endregion */ .title { padding-left: 100px; padding-right: 100px; padding-top: 50px; padding-bottom: 50px; } /* #region contents */ .contents { height: auto; padding: 50px; } @media (max-width: 539px) { .contents { padding-left: 5px; padding-right: 5px; } } @media (min-width: 540px) and (max-width: 999px) { .contents { padding-left: 100px; padding-right: 100px; } } @media (min-width: 1000px) { .contents { padding-left: 25%; padding-right: 25%; } } .map { width: 100%; } @media (max-width: 539px) { .map { height: 200px; } } @media (min-width: 540px) and (max-width: 999px) { .map { height: 400px; } } @media (min-width: 1000px) { .map { height: 600px; } } /* #endregion /* #region rsvp */ .rsvpButton { position: fixed; height: 100px; width: 18px; top: 25px; right: 0px; padding: 16px; border-radius: 16px 0px 0px 16px; mix-blend-mode: color-dodge; cursor: pointer; } /* #endregion */