From dbfbe34e19998946728fd1a1270dbb17a63bebf0 Mon Sep 17 00:00:00 2001
From: Chris Cochrun <chris@cochrun.xyz>
Date: Tue, 8 Nov 2022 17:32:38 -0600
Subject: [PATCH] updating mt-form more

---
 assets/css/compiled/main.css    | 438 ++++++++++++++++----------------
 layouts/shortcodes/mt-form.html | 256 +++++++++++++------
 2 files changed, 399 insertions(+), 295 deletions(-)

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 366568e..197cf4a 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -1554,6 +1554,10 @@ select {
   top: 0px;
 }
 
+.right-0 {
+  right: 0px;
+}
+
 .top-20 {
   top: 5rem;
 }
@@ -1562,10 +1566,6 @@ select {
   z-index: 30;
 }
 
-.z-50 {
-  z-index: 50;
-}
-
 .z-10 {
   z-index: 10;
 }
@@ -1624,6 +1624,26 @@ select {
   margin-right: 0.25rem;
 }
 
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.my-12 {
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+}
+
+.my-8 {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
 .mt-0 {
   margin-top: 0px;
 }
@@ -1664,6 +1684,10 @@ select {
   margin-bottom: 2rem;
 }
 
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
+
 .-mr-2 {
   margin-right: -0.5rem;
 }
@@ -1680,10 +1704,6 @@ select {
   margin-bottom: 0px;
 }
 
-.mb-10 {
-  margin-bottom: 2.5rem;
-}
-
 .-mr-48 {
   margin-right: -12rem;
 }
@@ -1700,6 +1720,10 @@ select {
   margin-bottom: 3rem;
 }
 
+.mb-5 {
+  margin-bottom: 1.25rem;
+}
+
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -1740,18 +1764,38 @@ select {
   margin-top: 0.5rem;
 }
 
-.mb-5 {
-  margin-bottom: 1.25rem;
-}
-
 .\!mb-9 {
   margin-bottom: 2.25rem !important;
 }
 
+.ml-auto {
+  margin-left: auto;
+}
+
+.mr-auto {
+  margin-right: auto;
+}
+
 .mb-\[2px\] {
   margin-bottom: 2px;
 }
 
+.mr-20 {
+  margin-right: 5rem;
+}
+
+.mr-12 {
+  margin-right: 3rem;
+}
+
+.mr-24 {
+  margin-right: 6rem;
+}
+
+.mr-4 {
+  margin-right: 1rem;
+}
+
 .block {
   display: block;
 }
@@ -1812,8 +1856,28 @@ select {
   height: 2rem;
 }
 
-.h-\[300px\] {
-  height: 300px;
+.h-\[120px\] {
+  height: 120px;
+}
+
+.h-\[100px\] {
+  height: 100px;
+}
+
+.h-\[150px\] {
+  height: 150px;
+}
+
+.h-\[800px\] {
+  height: 800px;
+}
+
+.h-\[1000px\] {
+  height: 1000px;
+}
+
+.h-64 {
+  height: 16rem;
 }
 
 .max-h-\[5rem\] {
@@ -1824,6 +1888,10 @@ select {
   min-height: 0px;
 }
 
+.min-h-\[148px\] {
+  min-height: 148px;
+}
+
 .w-12 {
   width: 3rem;
 }
@@ -1856,6 +1924,10 @@ select {
   min-width: 0px;
 }
 
+.min-w-full {
+  min-width: 100%;
+}
+
 .min-w-\[1\.8rem\] {
   min-width: 1.8rem;
 }
@@ -1888,10 +1960,18 @@ select {
   max-width: 36rem;
 }
 
+.max-w-\[1600px\] {
+  max-width: 1600px;
+}
+
 .max-w-3xl {
   max-width: 48rem;
 }
 
+.max-w-\[64rem\] {
+  max-width: 64rem;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1908,22 +1988,22 @@ select {
   flex-grow: 1;
 }
 
-.basis-1\/2 {
-  flex-basis: 50%;
-}
-
-.basis-1 {
-  flex-basis: 0.25rem;
-}
-
 .basis-full {
   flex-basis: 100%;
 }
 
+.basis-1\/2 {
+  flex-basis: 50%;
+}
+
 .basis-1\/4 {
   flex-basis: 25%;
 }
 
+.basis-1\/3 {
+  flex-basis: 33.333333%;
+}
+
 .-translate-y-8 {
   --tw-translate-y: -2rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1963,26 +2043,30 @@ select {
   flex-wrap: wrap;
 }
 
-.place-content-center {
-  place-content: center;
-}
-
-.place-items-center {
-  place-items: center;
-}
-
 .content-center {
   align-content: center;
 }
 
-.items-end {
-  align-items: flex-end;
+.content-start {
+  align-content: flex-start;
+}
+
+.content-around {
+  align-content: space-around;
+}
+
+.items-start {
+  align-items: flex-start;
 }
 
 .items-center {
   align-items: center;
 }
 
+.items-stretch {
+  align-items: stretch;
+}
+
 .justify-center {
   justify-content: center;
 }
@@ -1991,6 +2075,10 @@ select {
   justify-content: space-between;
 }
 
+.justify-items-start {
+  justify-items: start;
+}
+
 .gap-12 {
   gap: 3rem;
 }
@@ -2200,6 +2288,10 @@ select {
   --tw-gradient-to: rgba(var(--color-secondary-700), 1);
 }
 
+.to-neutral {
+  --tw-gradient-to: rgba(var(--color-neutral), 1);
+}
+
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -2220,11 +2312,6 @@ select {
      object-position: left;
 }
 
-.object-center {
-  -o-object-position: center;
-     object-position: center;
-}
-
 .p-4 {
   padding: 1rem;
 }
@@ -2300,6 +2387,11 @@ select {
   padding-right: 0.5rem;
 }
 
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
 .py-\[1px\] {
   padding-top: 1px;
   padding-bottom: 1px;
@@ -2340,6 +2432,22 @@ select {
   padding-left: 1rem;
 }
 
+.pl-8 {
+  padding-left: 2rem;
+}
+
+.pr-8 {
+  padding-right: 2rem;
+}
+
+.pt-4 {
+  padding-top: 1rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -2348,8 +2456,16 @@ select {
   padding-bottom: 1rem;
 }
 
-.pt-4 {
-  padding-top: 1rem;
+.pl-\[24px\] {
+  padding-left: 24px;
+}
+
+.pr-\[24px\] {
+  padding-right: 24px;
+}
+
+.pr-2 {
+  padding-right: 0.5rem;
 }
 
 .text-center {
@@ -2486,9 +2602,9 @@ select {
   color: rgba(var(--color-neutral-400), var(--tw-text-opacity));
 }
 
-.text-\[\#fff\] {
+.text-neutral-50 {
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgba(var(--color-neutral-50), var(--tw-text-opacity));
 }
 
 .text-primary-300 {
@@ -2526,14 +2642,9 @@ select {
   color: rgba(var(--color-neutral), var(--tw-text-opacity)) !important;
 }
 
-.text-neutral-100 {
+.text-primary-800 {
   --tw-text-opacity: 1;
-  color: rgba(var(--color-neutral-100), var(--tw-text-opacity));
-}
-
-.text-neutral-50 {
-  --tw-text-opacity: 1;
-  color: rgba(var(--color-neutral-50), var(--tw-text-opacity));
+  color: rgba(var(--color-primary-800), var(--tw-text-opacity));
 }
 
 .\!no-underline {
@@ -2552,16 +2663,6 @@ select {
   text-decoration-color: rgba(var(--color-neutral-300), 1);
 }
 
-.placeholder-neutral-100::-moz-placeholder {
-  --tw-placeholder-opacity: 1;
-  color: rgba(var(--color-neutral-100), var(--tw-placeholder-opacity));
-}
-
-.placeholder-neutral-100::placeholder {
-  --tw-placeholder-opacity: 1;
-  color: rgba(var(--color-neutral-100), var(--tw-placeholder-opacity));
-}
-
 .placeholder-neutral-300::-moz-placeholder {
   --tw-placeholder-opacity: 1;
   color: rgba(var(--color-neutral-300), var(--tw-placeholder-opacity));
@@ -2576,6 +2677,14 @@ select {
   opacity: 0;
 }
 
+.opacity-30 {
+  opacity: 0.3;
+}
+
+.opacity-70 {
+  opacity: 0.7;
+}
+
 .mix-blend-normal {
   mix-blend-mode: normal;
 }
@@ -2590,30 +2699,18 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-2xl {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.ring-2 {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-.ring-offset-2 {
-  --tw-ring-offset-width: 2px;
-}
-
-.ring-offset-neutral-50 {
-  --tw-ring-offset-color: rgba(var(--color-neutral-50), 1);
-}
-
-.ring-offset-neutral-500 {
-  --tw-ring-offset-color: rgba(var(--color-neutral-500), 1);
-}
-
 .backdrop-blur {
   --tw-backdrop-blur: blur(8px);
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@@ -2626,6 +2723,12 @@ select {
           backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 
+.backdrop-blur-2xl {
+  --tw-backdrop-blur: blur(40px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
 .transition-opacity {
   transition-property: opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -3306,6 +3409,13 @@ body:has(#menu-controller:checked) {
   background-position:center;
 }
 
+.thumbnail_card {
+  height: 250px;
+  background-repeat:no-repeat;
+  background-size:cover;
+  background-position:center;
+}
+
 .single_hero_basic {
   background-repeat:no-repeat;
   background-size:cover;
@@ -3336,6 +3446,14 @@ body:has(#menu-controller:checked) {
   box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3);
 }
 
+.anchor {
+  display: block;
+  position: relative;
+  top: -100px;
+  height: 0px;
+  visibility: hidden;
+}
+
 @media (min-width: 640px) {
   .thumbnail {
     min-width: 100%;
@@ -3363,14 +3481,6 @@ body:has(#menu-controller:checked) {
   margin: 1rem;
 }
 
-.file\:mr-4::file-selector-button {
-  margin-right: 1rem;
-}
-
-.file\:rounded-full::file-selector-button {
-  border-radius: 9999px;
-}
-
 .file\:rounded-lg::file-selector-button {
   border-radius: 0.5rem;
 }
@@ -3379,54 +3489,11 @@ body:has(#menu-controller:checked) {
   border-width: 0px;
 }
 
-.file\:border-2::file-selector-button {
-  border-width: 2px;
-}
-
-.file\:bg-neutral-50::file-selector-button {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--color-neutral-50), var(--tw-bg-opacity));
-}
-
-.file\:bg-primary-50::file-selector-button {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--color-primary-50), var(--tw-bg-opacity));
-}
-
 .file\:bg-neutral-500::file-selector-button {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--color-neutral-500), var(--tw-bg-opacity));
 }
 
-.file\:bg-primary-500::file-selector-button {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity));
-}
-
-.file\:bg-primary-100::file-selector-button {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--color-primary-100), var(--tw-bg-opacity));
-}
-
-.file\:bg-neutral-400::file-selector-button {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--color-neutral-400), var(--tw-bg-opacity));
-}
-
-.file\:bg-neutral-100::file-selector-button {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--color-neutral-100), var(--tw-bg-opacity));
-}
-
-.file\:bg-neutral-200::file-selector-button {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--color-neutral-200), var(--tw-bg-opacity));
-}
-
-.file\:p-4::file-selector-button {
-  padding: 1rem;
-}
-
 .file\:py-2::file-selector-button {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -3437,11 +3504,6 @@ body:has(#menu-controller:checked) {
   padding-right: 1rem;
 }
 
-.file\:py-4::file-selector-button {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
 .file\:text-sm::file-selector-button {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -3451,21 +3513,6 @@ body:has(#menu-controller:checked) {
   font-weight: 600;
 }
 
-.file\:text-neutral-700::file-selector-button {
-  --tw-text-opacity: 1;
-  color: rgba(var(--color-neutral-700), var(--tw-text-opacity));
-}
-
-.file\:text-primary-700::file-selector-button {
-  --tw-text-opacity: 1;
-  color: rgba(var(--color-primary-700), var(--tw-text-opacity));
-}
-
-.file\:text-primary-300::file-selector-button {
-  --tw-text-opacity: 1;
-  color: rgba(var(--color-primary-300), var(--tw-text-opacity));
-}
-
 .file\:text-neutral-100::file-selector-button {
   --tw-text-opacity: 1;
   color: rgba(var(--color-neutral-100), var(--tw-text-opacity));
@@ -3475,16 +3522,6 @@ body:has(#menu-controller:checked) {
   margin-top: 2rem;
 }
 
-.checked\:bg-primary-500:checked {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity));
-}
-
-.checked\:bg-neutral-500:checked {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--color-neutral-500), var(--tw-bg-opacity));
-}
-
 .checked\:text-neutral-500:checked {
   --tw-text-opacity: 1;
   color: rgba(var(--color-neutral-500), var(--tw-text-opacity));
@@ -3494,6 +3531,11 @@ body:has(#menu-controller:checked) {
   border-color: transparent;
 }
 
+.hover\:bg-neutral-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-neutral-500), var(--tw-bg-opacity));
+}
+
 .hover\:bg-primary-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--color-primary-600), var(--tw-bg-opacity));
@@ -3514,11 +3556,6 @@ body:has(#menu-controller:checked) {
   background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity)) !important;
 }
 
-.hover\:bg-neutral-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--color-neutral-500), var(--tw-bg-opacity));
-}
-
 .hover\:text-primary-600:hover {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-600), var(--tw-text-opacity));
@@ -3560,51 +3597,11 @@ body:has(#menu-controller:checked) {
   text-underline-offset: 2px;
 }
 
-.hover\:ring-2:hover {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-.hover\:ring-primary-500:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgba(var(--color-primary-500), var(--tw-ring-opacity));
-}
-
-.hover\:file\:bg-neutral-100::file-selector-button:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--color-neutral-100), var(--tw-bg-opacity));
-}
-
 .hover\:file\:bg-primary-300::file-selector-button:hover {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--color-primary-300), var(--tw-bg-opacity));
 }
 
-.hover\:file\:p-9::file-selector-button:hover {
-  padding: 2.25rem;
-}
-
-.hover\:file\:px-5::file-selector-button:hover {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-}
-
-.hover\:file\:px-6::file-selector-button:hover {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-}
-
-.hover\:file\:text-primary-100::file-selector-button:hover {
-  --tw-text-opacity: 1;
-  color: rgba(var(--color-primary-100), var(--tw-text-opacity));
-}
-
-.hover\:file\:text-primary-700::file-selector-button:hover {
-  --tw-text-opacity: 1;
-  color: rgba(var(--color-primary-700), var(--tw-text-opacity));
-}
-
 .hover\:file\:text-primary-500::file-selector-button:hover {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-500), var(--tw-text-opacity));
@@ -3639,16 +3636,6 @@ body:has(#menu-controller:checked) {
   background-color: rgba(var(--color-primary-100), var(--tw-bg-opacity));
 }
 
-.focus\:text-primary-500:focus {
-  --tw-text-opacity: 1;
-  color: rgba(var(--color-primary-500), var(--tw-text-opacity));
-}
-
-.focus\:text-primary-200:focus {
-  --tw-text-opacity: 1;
-  color: rgba(var(--color-primary-200), var(--tw-text-opacity));
-}
-
 .focus\:outline-dotted:focus {
   outline-style: dotted;
 }
@@ -3676,10 +3663,6 @@ body:has(#menu-controller:checked) {
   --tw-ring-offset-width: 2px;
 }
 
-.focus\:ring-offset-neutral-500:focus {
-  --tw-ring-offset-color: rgba(var(--color-neutral-500), 1);
-}
-
 .focus\:ring-offset-transparent:focus {
   --tw-ring-offset-color: transparent;
 }
@@ -3899,6 +3882,10 @@ body:has(#menu-controller:checked) {
   --tw-gradient-to: rgba(var(--color-secondary-800), 1);
 }
 
+.dark .dark\:to-neutral-800 {
+  --tw-gradient-to: rgba(var(--color-neutral-800), 1);
+}
+
 .dark .dark\:prose-invert {
   --tw-prose-body: var(--tw-prose-invert-body);
   --tw-prose-headings: var(--tw-prose-invert-headings);
@@ -3971,6 +3958,15 @@ body:has(#menu-controller:checked) {
   color: rgba(var(--color-neutral-100), var(--tw-text-opacity));
 }
 
+.dark .dark\:text-primary-200 {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-primary-200), var(--tw-text-opacity));
+}
+
+.dark .dark\:opacity-60 {
+  opacity: 0.6;
+}
+
 .dark .dark\:mix-blend-multiply {
   mix-blend-mode: multiply;
 }
@@ -4133,6 +4129,10 @@ body:has(#menu-controller:checked) {
     height: 18rem;
   }
 
+  .md\:h-\[200px\] {
+    height: 200px;
+  }
+
   .md\:h-56 {
     height: 14rem;
   }
@@ -4316,4 +4316,10 @@ body:has(#menu-controller:checked) {
   .xl\:w-1\/4 {
     width: 25%;
   }
+}
+
+@media (min-width: 1536px) {
+  .\32xl\:w-1\/5 {
+    width: 20%;
+  }
 }
\ No newline at end of file
diff --git a/layouts/shortcodes/mt-form.html b/layouts/shortcodes/mt-form.html
index 0c6b1f9..73677ac 100644
--- a/layouts/shortcodes/mt-form.html
+++ b/layouts/shortcodes/mt-form.html
@@ -32,79 +32,81 @@
   </div>
 </div>
 
-<div id="mt-form" class="form text-lg">
-    <form action="" autocomplete="on" method="post" target="_parent" class="items-center flex flex-wrap">
+<div id="mt-form" class="form text-lg w-full">
+    <form action="" autocomplete="on" method="post" target="_parent" class="w-full items-center flex flex-wrap">
         <h3 class="basis-full">Mission Trip Application</h3>
-        <div class="basis-1/2">
-            <label for="firstname" class="">What is your first name?</label>
+        <div class="basis-full flex flex-wrap my-4">
+            <label for="firstname" class="basis-full">What is your first and last name?</label>
             <br/>
             <input type="text" id="firstname" name="firstname"
-                   placeholder="First Name" class="form-input {{ $formClasses }}">
-        </div>
-        <div class="basis-1/2">
-            <label for="lastname" class="">What is your last name</label>
-            <br/>
+                   placeholder="First Name" class="flex-1 form-input {{ $formClasses }}">
             <input type="text" id="lastname" name="lastname"
-                   placeholder="Last Name" class="form-input {{ $formClasses }}">
+                   placeholder="Last Name" class="flex-1 form-input {{ $formClasses }}">
         </div>
-        <div class="basis-1/2">
-            <label for="parentfirstname" class="">What is your parent's first name?</label>
+        <div class="basis-full flex flex-wrap my-4">
+            <label for="parentfirstname" class="basis-full">What is your parent's first and last name?</label>
             <input type="text" id="parentfirstname" name="parentfirstname"
-                   class="form-input {{ $formClasses }}">
-        </div>
-        <div class="basis-1/2">
-            <label for="parentlastname" class="">What is your parent's last name?</label>
+                   class="flex-1 form-input {{ $formClasses }}"
+                   placeholder="First Name">
             <input type="text" id="parentlastname" name="parentlastname"
-                   class="form-input {{ $formClasses }}">
+                   class="flex-1 form-input {{ $formClasses }}"
+                   placeholder="Last Name">
         </div>
-        <div class="basis-1/2">
-            <label for="birthday" class="">When were you born?</label>
-            <input type="date" id="birthday" name="birthday"
-                   class="form-date {{ $formClasses }}">
-        </div>
-        <div class="basis-1/2">
-            <label for="age" class="">Age</label>
-            <input type="number" id="age" name="age" class="form-input {{ $formClasses }}">
-        </div>
-        <div class="basis-1/2">
-            <label for="gender" class="">Gender</label>
-            <select id="gender" name="gender" class="form-select {{ $formClasses }}">
-                <option value="male">Male</option>
-                <option value="female">Female</option>
-            </select>
-        </div>
-        <div class="basis-1/2"></div>
-        <div class="basis-1/2 mt-10">
-            <label for="street" class="">Street Address</label>
-            <input type="text" id="street" name="street" class="form-input {{ $formClasses }}">
-        </div>
-        <div class="basis-1/2">
-                <label for="city" class="basis-1/4">City</label>
-                <input type="text" id="city" name="city" class="basis-1/4 form-input {{ $formClasses }}">
-        </div>
-        <div class="basis-1/2">
-                <label for="state" class="basis-1/4">State</label>
-                <input type="text" id="state" name="state" class="basis-1/4 form-input {{ $formClasses }}">
-        </div>
-        <div class="basis-1/2 mb-10">
-                <label for="zip" class="basis-1/4">Zip Code</label>
-                <input type="text" id="zip" name="zip" class="basis-1/4 form-input {{ $formClasses }}">
-        </div>
-        <label for="image" class="">Please give us a picture you'd like to use on prayer cards.</label>
-        <input type="file" id="image" name="image" class="file:m-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-neutral-500 file:text-neutral-100 hover:file:bg-primary-300 hover:file:ring-offset-2 hover:file:ring-2 hover:file:ring-offset-transparent hover:file:text-primary-500 hover:file:ring-primary-500 ">
-        <br/>
-        <label for="cellphone" class="">Cell phone</label>
-        <input type="tel" id="cellphone" name="cellphone"
-               pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" class="form-input {{ $formClasses }}">
-        <label for="homephone" class="">Home phone</label>
-        <input type="tel" id="homephone" name="homephone"
-               pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" class="form-input {{ $formClasses }}">
-        <label for="email" class="">Email</label>
-        <input type="email" id="email" name="email"
+        <label for="parentemail" class="basis-full">What is your parent's email address?</label>
+        <input type="email" id="parentemail" name="parentemail"
                pattern="^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$"
-               class="form-input {{ $formClasses }}">
-        <label for="school" class="">School</label>
-        <input type="text" id="school" name="school" class="form-input {{ $formClasses }}">
+               class="basis-full form-input {{ $formClasses }}">
+        <div class="basis-full my-8">
+            <div class="">
+                <label for="birthday" class="">When were you born?</label>
+                <input type="date" id="birthday" name="birthday"
+                       class="form-date {{ $formClasses }}">
+            </div>
+            <div class="">
+                <label for="gender" class="">Gender</label>
+                <select id="gender" name="gender" class="form-select {{ $formClasses }}">
+                    <option value="male">Male</option>
+                    <option value="female">Female</option>
+                </select>
+            </div>
+        </div>
+        <div class="basis-full flex flex-wrap">
+            <label for="street" class="basis-full">What is your address?</label>
+            <input type="text" id="street" name="street"
+                   class="basis-full form-input {{ $formClasses }}"
+                   placeholder="Street Address">
+            <input type="text" id="city" name="city"
+                   class="flex-auto form-input {{ $formClasses }}"
+                   placeholder="City">
+            <input type="text" id="state" name="state"
+                   class="flex-auto form-input {{ $formClasses }}"
+                   placeholder="State">
+            <input type="text" id="zip" name="zip"
+                   class="flex-auto form-input {{ $formClasses }}"
+                   placeholder="Zip Code">
+        </div>
+        <div class="basis-full flex flex-wrap items-center my-8">
+            <div class="flex-auto flex flex-wrap items-center">
+                <label for="cellphone" class="mr-4">Cell phone</label>
+                <input type="tel" id="cellphone" name="cellphone"
+                       pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
+                       class="flex-auto form-input {{ $formClasses }}">
+            </div>
+            <div class="flex-auto flex flex-wrap items-center">
+                <label for="homephone" class="mr-4">Home phone</label>
+                <input type="tel" id="homephone" name="homephone"
+                       pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
+                       class="flex-auto form-input {{ $formClasses }}">
+            </div>
+            <div class="flex-auto flex flex-wrap items-center">
+                <label for="email" class="mr-4">Email</label>
+                <input type="email" id="email" name="email"
+                       pattern="^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$"
+                       class="flex-auto form-input {{ $formClasses }}">
+            </div>
+        </div>
+        <label for="school" class="basis-full">What school do you go to?</label>
+        <input type="text" id="school" name="school" class="basis-full form-input {{ $formClasses }}">
 
         <div class="basis-full">
             <label for="grade" class="">Grade</label>
@@ -112,31 +114,28 @@
             <input type="radio" id="grade" name="grade" value="8" class="form-input {{ $formClasses }}">
             <label for="grade" class="">8th</label>
             <br/>
-            <input type="radio" id="grade" name="grade" value="freshman" class="form-input {{ $formClasses }}">
+            <input type="radio" id="grade" name="grade" value="freshman"
+                   class="form-input {{ $formClasses }}">
             <label for="grade" class="">Freshman</label>
             <br/>
-            <input type="radio" id="grade" name="grade" value="sophomore" class="form-input {{ $formClasses }}">
+            <input type="radio" id="grade" name="grade" value="sophomore"
+                   class="form-input {{ $formClasses }}">
             <label for="grade" class="">Sophomore</label>
             <br/>
-            <input type="radio" id="grade" name="grade" value="junior" class="form-input {{ $formClasses }}">
+            <input type="radio" id="grade" name="grade" value="junior"
+                   class="form-input {{ $formClasses }}">
             <label for="grade" class="">Junior</label>
             <br/>
-            <input type="radio" id="grade" name="grade" value="senior" class="form-input {{ $formClasses }}">
+            <input type="radio" id="grade" name="grade" value="senior"
+                   class="form-input {{ $formClasses }}">
             <label for="grade" class="">Senior</label>
         </div>
-        <label for="parentemail" class="">ParentEmail</label>
-        <input type="email" id="parentemail" name="parentemail"
-               pattern="^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$"
-               class="form-input {{ $formClasses }}">
-        <div class="basis-1/2">
-            <label for="pastorfirstname" class="">What is your pastor's first name?</label>
+        <div class="basis-full flex flex-wrap">
+            <label for="pastorfirstname" class="basis-full">What is your pastor's first and last name?</label>
             <input type="text" id="pastorfirstname" name="pastorfirstname"
-                   class="form-input {{ $formClasses }}">
-        </div>
-        <div class="basis-1/2">
-            <label for="pastorlastname" class="">What is your pastor's last name?</label>
+                   class="flex-auto form-input {{ $formClasses }}">
             <input type="text" id="pastorlastname" name="pastorlastname"
-                   class="form-input {{ $formClasses }}">
+                   class="flex-auto form-input {{ $formClasses }}">
         </div>
         <div class="basis-full">
             <label for="churchattendance" class="">Do you attend church regularly?</label>
@@ -166,6 +165,105 @@
                 <option value="colby">Colby</option>
             </select>
         </div>
+        <div class="basis-1/2">
+            <label for="shirt" class="">T-Shirt Size</label>
+            <select id="shirt" name="shirt" class="form-select {{ $formClasses }}">
+                <option value="small">Small</option>
+                <option value="medium">Medium</option>
+                <option value="large">Large</option>
+                <option value="xl">XL</option>
+                <option value="xxl">2XL</option>
+                <option value="xxxl">3XL</option>
+            </select>
+        </div>
+        <div class="basis-full my-12">
+            <label for="image" class="">
+                Please give us a picture you'd like to use on prayer cards.
+            </label>
+            <input type="file" id="image" name="image"
+                   class="file:m-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-neutral-500 file:text-neutral-100 hover:file:bg-primary-300 hover:file:ring-offset-2 hover:file:ring-2 hover:file:ring-offset-transparent hover:file:text-primary-500 hover:file:ring-primary-500">
+        </div>
+        <div class="basis-full mt-10">
+            <label for="tripnotes" class="p-4">
+                Do you have any other notes for us regarding this trip?
+            </label>
+            <br/>
+            <textarea id="tripnotes" name="tripnotes"
+                      class="form-input w-full h-64 {{ $formClasses }}"
+                      placeholder="notes..."></textarea>
+        </div>
+        <div class="basis-full mt-10">
+            <label for="relationship-with-jesus" class="p-4">
+                Describe your relationship with the Lord this past year.
+            </label>
+            <br/>
+            <textarea id="relationship-with-jesus" name="relationship-with-jesus"
+                      class="form-input w-full h-64 {{ $formClasses }}"
+                      placeholder=""></textarea>
+        </div>
+        <div class="basis-full mt-10">
+            <label for="testimony" class="p-4">
+                Tell us how your relationship with Jesus began.  (How you became a Christian)
+            </label>
+            <br/>
+            <textarea id="testimony" name="testimony"
+                      class="form-input w-full h-64 {{ $formClasses }}"
+                      placeholder=""></textarea>
+        </div>
+        <div class="basis-full mt-10">
+            <label for="involvement-with-group" class="p-4">
+                In the last year, how have you been involved in the ministry of TFC (or your church/youth group)? How do you benefit your group?
+            </label>
+            <br/>
+            <textarea id="involvement-with-group" name="involvement-with-group"
+                      class="form-input w-full h-64 {{ $formClasses }}"
+                      placeholder=""></textarea>
+        </div>
+        <div class="basis-full mt-10">
+            <label for="reasons-for-trip-choice" class="p-4">
+                Why did you choose the team you applied for as your first choice? (Please indicate if you are unable to a different a trip due to previous commitments.)
+            </label>
+            <br/>
+            <textarea id="reasons-for-trip-choice" name="reasons-for-trip-choice"
+                      class="form-input w-full h-64 {{ $formClasses }}"
+                      placeholder=""></textarea>
+        </div>
+        <div class="basis-full mt-10">
+            <label for="strengths" class="p-4">
+                The strengths and talents you would bring to this year's team are:
+            </label>
+            <br/>
+            <textarea id="strengths" name="strengths"
+                      class="form-input w-full h-64 {{ $formClasses }}"
+                      placeholder=""></textarea>
+        </div>
+        <div class="basis-full mt-10">
+            <label for="weaknesses" class="p-4">
+                Some negative traits that might effect my attitude are:
+            </label>
+            <br/>
+            <textarea id="weaknesses" name="weaknesses"
+                      class="form-input w-full h-64 {{ $formClasses }}"
+                      placeholder=""></textarea>
+        </div>
+        <div class="basis-full mt-10">
+            <label for="previous-trip-info" class="p-4">
+                If you were a part of a previous TFC Mission Trip team-tell us how the trip changed your life?
+            </label>
+            <br/>
+            <textarea id="previous-trip-info" name="previous-trip-info"
+                      class="form-input w-full h-64 {{ $formClasses }}"
+                      placeholder=""></textarea>
+        </div>
+        <div class="basis-full mt-10">
+            <label for="attitude-toward-work" class="p-4">
+                If we were to ask your parents/employer/or teachers about your attitudes towards work, what would they say?
+            </label>
+            <br/>
+            <textarea id="attitude-toward-work" name="attitude-toward-work"
+                      class="form-input w-full h-64 {{ $formClasses }}"
+                      placeholder=""></textarea>
+        </div>
     </form>
 </div>