* {
  box-sizing: border-box;
}

body {
   margin: 0;
   padding: 0;
   font-size: 18px;
   text-align: center;
   font-family: 'DM Sans', sans-serif;
   font-weight: 400;
   background: peachpuff;
   display: flex;
   flex-direction: column;
   min-height: 100vh;
}

@media (min-width: 768px) { 
   body {
         font-size: 20px;
   }
}

div.svg___wrapper{
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: -1;
}

div.content___wrapper {
   z-index: 100;
   padding: 0 15px;
   flex: 1;
   display: flex;
   flex-direction: column;
}

div.vertical{
   padding: 2em 0 0 0;
}

@media (min-width: 768px) {
   div.vertical{
      padding: 2em 0 3em 0;
   }
}

@media (min-width: 768px) and (min-height: 900px) {
   div.vertical{
      display: flex;
      align-items: center;
      padding: 0;
      height: 100vh;
   }
}

main {
   color: #000;
   margin: 0 auto;
   z-index: 10;
   width: 100%;
}

svg.logo {
   display: block;
   width: 240px;
   height: auto;
   float: none;
   margin: 0 auto 1em;
   padding:0;
   fill: #fff;
   -webkit-filter: drop-shadow(0px 5px 3px rgba(0, 0, 0, 0.5));
           filter: drop-shadow(0px 5px 3px rgba(0, 0, 0, 0.5));
}

/*@media (min-width: 768px) { 
   svg.logo {
      width: 3000px;
   }
}*/


h2 {
   font-family: 'DM Sans', sans-serif;
   font-weight: 500;
   margin: 0 0 2em 0;
   font-size: 22px;
   color: #fff;
   text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8);
}

@media (min-width: 768px) { 
   main {
      width: 100%;
      max-width: 992px;
   }
   svg.logo {
      width: 100%;
      max-width: 360px;
   }
   h2 {
      font-size: 24px;
   }
}

div.grid {
   display: grid;
   grid-template-columns: repeat(1, 1fr);
   gap: 1em;
   padding: 0;
   margin: 0 0 1em 0;
}

@media (min-width: 768px) { 
   div.grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 2em;
      margin: 0 0 2em 0;
   }
}

div.grid-col-1 {
   grid-template-columns: repeat(1, 1fr);
   margin: 0;
}

div.card {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 1em;
   padding: 1em 2em;
   border-radius: .5em;
   text-align: left;
   background: rgba(255, 255, 255, .2);
}

@media (min-width: 768px) { 
   div.card { 
      flex-direction: column;
      text-align: center;
      padding: 2em;
   }
}

div.col-1 {
   flex-direction: column;
}

div.icon-wrap {
   flex: 1 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 72px;
   height: 72px;
   background: #544cf2;
   border-radius: 50%;
}

@media (min-width: 768px) { 
   div.icon-wrap {
      width: 96px;
      height: 96px;
   }
}

div.icon-wrap svg {
   width: 32px;
   height: auto;
   fill: #fff;
}

@media (min-width: 768px) { 
   div.icon-wrap svg {
      width: 48px;
      height: auto;
   }
}

div.card p {
   flex: 0 1 100%;
   margin: 0;
}

.header {
   position: fixed;
   top: 10px;
   right: 10px;
   z-index: 1000; /* Ensure it stays on top of other elements */
   display: flex; /* Flexbox for horizontal layout */
   align-items: center; /* Vertically align items */
   gap: 0.5em; /* Space between the SVG and the link */
}

/* Scope button styles to main content only, exclude Ketch elements */
main a,
.header a {
   display: inline-block;
   padding: 0.5em 1.4em;
   color: #fff;
   border-radius: 2em;
   background: #544cf2;
   border: 1px solid #544cf2;
   text-decoration: none;
   transition: all 150ms ease;
}

main a:hover,
.header a:hover {
   text-decoration: none;
   border: 1px solid rgba(0, 128, 255, 1);
   box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
   cursor: pointer;
}

/* SVG-specific styling */
.header svg {
   width: 1.75em; /* Default size */
   height: 1.75em; /* Maintain aspect ratio */
   fill: currentColor; /* Inherit color */
   cursor: pointer;
   transition: transform 200ms ease, fill 200ms ease; /* Smooth transition for hover effects */
}

.header svg:hover {
   transform: scale(1.1); /* Slightly increase size */
 /* Change color on hover */
}

.header svg:active {
   transform: scale(1.2) rotate(1deg); /* Slightly shrink and rotate on click */
 /* A more intense color on click */
}
/* Adjust the size for smaller screens */
@media (max-width: 768px) { 
   #sign-in {
       padding: 0.3em 1em; /* Reduce padding */
       font-size: 0.9rem; /* Reduce font size */
   }
}


svg {
   height: 100%;
   width: 100%;
}


/* Dropdown container */
.dropdown {
   position: relative;
   display: inline-block;
}

/* Dropdown menu styling */
.dropdown-menu {
   position: absolute;
   top: 100%; /* Position it below the trigger */
   right: 0; /* Align it to the right */
   z-index: 50;
   display: none; /* Hidden by default */
   width: 12rem; /* Set dropdown width */
   padding: 0.5rem 0;
   background-color: #fff;
   border: 1px solid #ddd;
   border-radius: 0.25rem;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: left;}

/* Show the dropdown menu when <details> is open */
details[open] .dropdown-menu {
   display: block;
}

/* Dropdown menu links - override global <a> styles */
.dropdown-menu a {
   all: unset; /* Reset all inherited styles */
   display: block; /* Make it a block for padding */
   padding: 0.5rem 1rem; /* Add spacing for clickable area */
   text-decoration: none; /* Remove underline */
   color: #333; /* Text color */
   font-size: 0.875rem; /* Set font size */
   transition: background-color 150ms ease; /* Smooth hover effect */
   cursor: pointer; /* Pointer for clickable feel */
}

/* Hover effect for dropdown links */
.dropdown-menu a:hover {
   background-color: #f3f4f6;
   color: #111;
}

/* Customize the hamburger menu icon */
.dropdown summary {
   list-style: none; /* Remove default arrow */
   cursor: pointer;
   display: flex;
   align-items: center;
}

.dropdown summary svg {
   width: 1.75em;
   height: 1.75em;
   fill: currentColor;
   transition: transform 200ms ease;
}

.dropdown summary:hover svg {
   transform: scale(1.2); /* Scale the icon on hover */
}

.dropdown summary::-webkit-details-marker {
   display: none; /* Hide the default marker in WebKit browsers (Safari, Chrome, etc.) */
}

.dropdown summary::marker {
   display: none; /* Hide the default marker in other browsers */
}

/* Footer styles */
.footer {
   background-color: #f8f9fa;
   padding: 20px 0;
   text-align: center;
   margin-top: 3em;
}

@media (min-width: 768px) and (min-height: 900px) {
   .footer {
      margin-top: 0;
   }
}

.footer a {
   all: unset;
   margin: 0 10px;
   color: #007bff;
   text-decoration: none;
   cursor: pointer;
}

.footer a:hover {
   text-decoration: underline;
}