@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Qwitcher+Grypen:wght@400;700&display=swap');
@layer utilities {
  .font-sans {
    font-family: 'Open Sans', sans-serif;
  }
  .font-qwitcher {
    font-family: 'Qwitcher Grypen', cursive;
  }
}

[x-cloak] {
  display: none !important;
}

:root {
    --darkblue: #024959;
    --blue: #03728b;
    --lightblue: #c9e9f3;
    --green: #7da66a;
    --lightgreen: #99b98a; 
    --darkgreen: #144b3c;
    --gray: #888; 
    --darkgray: #012027;
    --white: #fff;
    --black: #000;
  }

  h1.page-title {
    font-family: 'Qwitcher Grypen', cursive;
    font-size: 5rem; 
    /* other styles */
  }
  
  .textfamily {
    font-family: 'Qwitcher Grypen', cursive;
    font-size: 3rem; 
  }
  
  /* Background colors */
  
  .bg-darkblue {
    background-color: var(--darkblue);
  }
  
  .bg-blue {
    background-color: var(--blue);
  }
  
  .bg-lightblue {
    background-color: var(--lightblue);
  }
  
  .bg-green {
    background-color: var(--green);
  }
  
  .bg-lightgreen {
    background-color: var(--lightgreen);
  }
  
  .bg-darkgreen {
    background-color: var(--darkgreen);  
  }
  
  .bg-gray {
    background-color: var(--gray);
  }
  
  .bg-darkgray {
    background-color: var(--darkgray);
  }
  
  .bg-white {
    background-color: var(--white);
  }
  .bg-black {
    background-color: var(--black);
  }
  

  .bg-gradient {
    background: linear-gradient(to bottom, var(--darkblue), var(--darkgreen)); 
  }
  
  .bg-gradient-v {
    background: linear-gradient(to bottom, var(--darkblue), var(--darkgreen));
  }
  
  .bg-gradient-h {
    background: linear-gradient(to right, var(--darkblue), var(--darkgreen));  
  }
  /* Text colors */
  
  .text-darkblue {
    color: var(--darkblue);
  }
  
  .text-blue {
    color: var(--blue);
  }
  
  .text-lightblue {
    color: var(--lightblue);
  }
  
  .text-green {
    color: var(--green);
  }
  
  .text-lightgreen {
    color: var(--lightgreen);
  }
  
  .text-darkgreen {
    color: var(--darkgreen);
  }
  
  .text-gray {
    color: var(--gray);
  }
  
  .text-darkgray {
    color: var(--darkgray);  
  }
  
  .text-white {
    color: var(--white);
  }
  
  /* Other colors */
  .border-gray {
    border-color: var(--gray);
  }
  
  .hover\:bg-darkblue:hover {
    background-color: var(--darkblue);
  }
  
  .hover\:text-lightgreen:hover {
    color: var(--lightgreen);
  }