main {
     display: grid;
     grid-template-columns: 2fr 2fr;
     gap: 2rem;
 }

 #webform {
     background-color: var(--form-background-color);
 }

 #form-section,
 #summary {
     background-color: var(--info-background-color);
     padding: 1rem;
     border: 1px solid black;
     border-radius: 6px;
 }

 #form-section h2,
 #form-section p {
     margin-top: 2rem;
     margin-left: 1.7rem;
 }

 #form-section h2 {
     font-size: 3em;
     font-family: "Cinzel"
 }

 #form-section p {
     margin-top: 0.5rem;
 }

 #summary h2 {
     line-height: 3rem;
     text-align: center;
     font-size: 2em;
     margin-top: 1rem
 }

 #summary h3 {
     font-size: 0.8rem;
     line-height: 0.8rem;
     font-weight: 600;
     margin: 0;
     padding: 0;
 }

 #summary>*:not(:first-child) {
     margin: 0 clamp(1rem, 10%, 7rem);
 }

 #summary p {
     font-size: 0.8rem;
     line-height: 1.3;
     margin: 0 0 1.2rem 0;
     background-color: var(--forms-text-background);
     border-radius: 4px;
     padding: 0.8em;
     border: 1px solid #ccc;
 }


 .langtext {
     font-size: 0.8rem;
     line-height: 1.3;
     margin: 0 0 1.2rem 0;
     background-color: var(--forms-text-background);
     border-radius: 4px;
     padding: 0.8em;
     border: 1px solid #ccc;
     word-break: break-word;
     white-space: normal;
     overflow-wrap: break-word;
 }

 #visdata {
     font-size: 1.2rem;
     line-height: 1.3;
     margin: 0 0 1.2rem 0;
     background-color: var(--forms-text-background);
     border-radius: 4px;
     padding: 0.8em;
     border: 1px solid #ccc;
 }

 section {
     display: grid;
     gap: 1rlh;
     align-content: start;
 }

 .output div {
     padding: 1rlh;
     border-radius: 6px;
     display: grid;
     gap: .5rlh;
     font-size: 0.9rem;
 }



 input {
     border: 1px solid #ccc;
     padding: .25rlh;
     border-radius: 6px;
     box-shadow: 0px 1px 2px #0001;
     background-color: var(--forms-text-background);
 }

 input:hover {
     background-color: #7f7b75d4;
 }

 button {
     border: 1px solid #000;
     background-color: #000;
     color: #fff;
     border-radius: 6px;
     padding: .25rlh .5rlh;
     cursor: pointer;
 }

 .error-message {
     color: darkred;
 }


 /* Form layout */
 form {
     display: grid;
     gap: 1rlh;
     padding: 1rlh;

     .form-group {
         display: grid;
         gap: 0.1rlh;
     }

     label:has(input) {
         display: flex;
         align-items: center;
         gap: 0.25rlh;
         justify-self: start;
     }
 }

 /* Pseudo-classes */
 :focus-visible {
     /* virker til både knapper og input-felter, select, textarea, links mm. */
     outline: 2px solid slateblue;
     outline-offset: 1px;
 }

 /* Hover-styles */
 button:hover {
     background: #222;
 }

 /* Active-styles (imens man klikker) */
 button:active {
     scale: .98;
 }

 /* Valideringsregler */
 /* Skjul fejlmeddelelsen som standard */
 .error-message {
     display: none;
 }

 .form-group:has(:required) {
     label::after {
         content: " *";
         color: red;
     }
 }

 /* Tilføj rød kant omkring input-feltet, hvis det er ugyldigt */
 .form-group:has(:user-invalid) {
     input {
         outline: 3px solid #f005;
         border-color: darkred;
     }

     /* Vis fejlmeddelelsen, hvis feltet er ugyldigt */
     .error-message {
         display: block;
     }
 }

 /* Demo layout */
 /*body {
   padding: 2rlh;
   display: grid;
   gap: 2rlh;

   @media (min-width: 600px) {
     grid-template-columns: 1fr 1fr;
   }
 }*/