:root { --icon-size: 150px; }

@media screen and (max-width: 768px) { :root { --icon-size: 100px; } }

.ios-icon { height: var(--icon-size); width: var(--icon-size); border-radius: 20%; }

.app-icon-border { box-sizing: border-box; border: 2px Solid gainsboro; }

/* App Index */
.app-index { margin-bottom: 20px; display: grid; grid-template-columns: var(--icon-size) 1fr; grid-gap: 20px; align-items: center; }

.app-index-container a { text-decoration: none; }

@media (hover: hover) { .app-index-container a:hover { text-decoration: underline; } }

.app-index p { margin: 0px; }

.app-index a { text-decoration: none; }

.app-index-title { font-size: 150%; font-weight: normal; }

.app-index-desc { font-weight: lighter; }

@media screen and (max-width: 414px) { .app-index { grid-template-columns: 1fr; } .app-index img { margin-left: auto; margin-right: auto; } p { text-align: center; } .app-index-title { font-size: 100%; font-weight: normal; } .app-index-desc { font-size: 90%; font-weight: lighter; } }

:root { --icon-size: 150px; }

.app-grid { display: grid; grid-gap: 20px; margin: auto; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.app-grid a { text-decoration: none; font-weight: lighter; }

.app-grid a:hover { text-decoration: underline; }

.app-grid-app { display: grid; grid-row-gap: 10px; grid-template-rows: auto; text-align: center; justify-items: center; justify-content: center; }

button, input, textarea { font-family: inherit; font-size: 100%; font-weight: lighter; }

label { font-weight: normal; }

.text-field { width: 100%; height: 2.5em; }

.message-box { width: 100%; height: 200px; border-color: lightgrey; }

footer { margin-top: 50px; margin-bottom: 50px; }

.social-media-icon { width: 40px; height: 40px; display: inline-block; margin-left: 8px; margin-right: 8px; }

.social-media-icons-wrapper { text-align: center; }

html { background-color: #fefefe; color: #333333; font-weight: lighter; font-family: sans-serif; font-size: 120%; line-height: 1.5; margin-left: 30px; margin-right: 30px; }

body { margin: auto; max-width: 800px; }

@media screen and (max-width: 768px) { html { margin-left: 20px; margin-right: 20px; font-size: 110%; } }

@media screen and (max-width: 375px) { html { margin-left: 18px; margin-right: 18px; } }

@media screen and (max-width: 320px) { html { margin-left: 10px; margin-right: 10px; } }

nav { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; align-items: center; }

nav a { padding-right: 8px; padding-left: 8px; text-decoration: none; color: rgba(0, 0, 0, 0.7); line-height: 2em; text-align: center; }

.site-title { text-align: center; font-size: 300%; }

@media screen and (max-width: 768px) { .site-title { font-size: 300%; } }

@media screen and (max-width: 414px) { .site-title { font-size: 200%; } }

.current-nav-item { text-decoration: underline; }

.centered-content { margin: 0 auto; }

a { color: #333333; }

h1 { font-size: 170%; text-align: center; }

@media screen and (max-width: 768px) { h1 { font-size: 150%; } }

.store-badge { display: block; margin-left: auto; margin-right: auto; margin-top: 15px; }

.small-print { font-size: 80%; font-style: italic; }

/*# sourceMappingURL=styles.css.map */