@charset "UTF-8";

/*
	Chebucto Main Style Sheet
    Author: Christopher Charles, Forde Nedimović
    Creation Date: 2023/05/23
    Modified Date: 2023/08/14
*/

/* ====================================
   Universal Rules For Donations.html
   ====================================
*/

/* Button Style */
button
{
    border-radius: 4px; /* Rounds the edges of the button  */
    border: 1px solid #ccc; /* Surrounds the button in a solid Gray border 1px wide */
    background-color: rgba(9,74,10,255); /* Sets BG color to a dark green */
}

a{
   text-decoration: none;
   color: white; /* Sets text color to white */
   font-weight: bold; /* Sets the font weight to be bold */
}

/* Subsection Titles */
.subsectionTitle
{
   text-align: center; /* Text will align to the center */
   font-weight: bolder; /* Sets the font weight to bold */
   color: rgba(9,74,10,255); /* Sets text color to a dark green */
}

.heroSection
{
   position: relative;
   width: 100%;
   height: 63%;
   margin: 0;
   padding: 0;
   z-index: -1;
   color:white;
}

/* Support Section */
#support
{
   /* <--! *** Support Background Style *** !--> */

   background-color: white; /* Background color will be white */ 

   /* <--! *** Style End *** !--> */
}

/* Billing Address Form Section */
.billingAddressFormSection
{
   /* <--! *** Billing Address Section Style *** !--> */

   background-color: #f5f5f5; /* Creates a smokey white Background color */

   /* <--! *** Style End *** !--> */
}

/* Style inputs with type="text" */
input[type=text]
{
   /* <--! *** Billing Address User Input Dimensions *** !--> */

   width: 100%; /* Input will take up the Full width of the Billing Address Form */

   /* <--! *** Dimensions End *** !--> */

   /* <--! *** Billing Address User Input Style *** !--> */

   border: 1px solid #ccc; /* Adds a solid gray border 1px wide */
   border-radius: 4px; /* Rounds borders of text area */
   box-sizing: border-box; /* Make sure that padding and width stays in place */
   resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */

   /* <--! *** Style End *** !--> */
}
 
 /* Billing Address Form container */
 .billingAddressFormContainer 
 {
   /* <--! *** Billing Address Container Style *** !--> */

   border-radius: 4px; /* Form will have rounded corners */
   background-color: #f2f2f2; /* Sets the background color of the billing form */
   border: black 1px solid; /* Creates a solid black border 1px wide around billing form */

   /* <--! *** Style End *** !--> */
 }

 /* Label Style */
 label 
 {
   /* <--! *** Billing Address Label Style *** !--> */

   color: black; /* Sets font color to black */
   font-weight: bold; /* Font will be bold */

   /* <--! *** Style End *** !--> */
 }

 /* =============================================
   Large Desktop Screen Styles: 1051px to 1500px 
   =============================================
*/

   /* Button Style */
   button
   {
      /* Dimensions for Billing Address Form Button (Large Desktop) */

      width: 40%; /* Takes up 40% of the width avaliable in billingAddressFormContainer */
      height: 45px; /* Height of button */

      /* <--! *** Dimensions End *** !--> */
   }

   /* Subsection Titles */
   .subsectionTitle
   {
      /* <--! *** Subsection Title Style (Large Desktop) *** !--> */

      margin: 0; /* No margin (space around the H3 element) */
      padding-top: 2.5%; /* Adds Top Padding (pushes the section title down as to not touch the top of the section) */
      font-size: 2.25rem; /* Set text's relative font size to 2.25rem */

      /* <--! *** Style End *** !--> */
   }

   #support
   {
      /* <--! *** Dimensions for Donation's Page Support Section (Large Desktop) *** !--> */
      position:relative;
      height: 400px; /* Section height set to 400px */

      /* <--! *** Dimensions End *** !--> */
   }

   /* Support Section Content (p element) */
   .supportMessage
   {
      /* <--! *** Support Section Content Style (Large Desktop) *** !--> */
      
      margin: 2.75% 10%; /* Sets a margin top-bottom set to 2.75% margin left-right set to 10% */
      font-size: 1.5rem; /* Set font's relative font size to 1.5rem */

      /* <--! *** Style End *** !--> */
   }

   /* Billing Address Form Section */
   .billingAddressFormSection
   {
      /* Dimensions for Billing Address Section (Large Desktop) */

      /* height: 1045px; Let IATS form flow entirely /* Section height set to 1045px */

      /* <--! *** Dimensions End *** !--> */
   }

   /* Style inputs with type="text" */
   input[type=text]
   {
      /* <--! *** Billing Address Input Text Style (Large Desktop) *** !--> */

      padding: 12px; /* Adds a padding of 12px around the input text */ 
      margin-top: 6px; /* Add a top margin */
      margin-bottom: 16px; /* Bottom margin */

      /* <--! *** Style End *** !--> */
   }

   /* Billing Address Form container */
   .billingAddressFormContainer 
   {
      /* <--! *** Billing Address Form Container Style (Large Desktop) *** !--> */

      margin: 2.5% 25%; /* Adds some margins */
      padding: 20px; /* Adds some padding around content within the billing form */

      /* <--! *** Style End *** !--> */
   }
/* ===============================
   Mobile Styles: 0px to 600px 
   ===============================
*/
@media only screen and (max-width: 600px) and (min-width: 0px)
{

   /* Subsection Titles */
   .subsectionTitle
   {
      /* <--! *** Subsection Title Style (Moblie) *** !--> */

      margin: 0; /* No margin (space around the H3 element) */
      padding-top: 15px; /* Padding Top (pushes the section title down as to not touch the top of the previous section) */
      font-size: 1.25rem; /* Set text's relative font size to 1.25rem */

      /* <--! *** Style End *** !--> */
   }

   /* Donation Hero Section */
   .donationsHeroSection
   {
      /* <--! *** Dimensions for Hero Section (Moblie) *** !--> */

      height: 125px; /* Section height set to 125px  */

      /* <--! *** Dimensions End *** !--> */
   }

   /* Support Section */
   #support
   {
      /* <--! *** Dimensions for Support Section (Moblie) *** !--> */

      height: 300px; /* Section size will be 300px tall */

      /* <--! *** Dimensions End *** !--> */
   }

   /* Support Section Content (p element) */
   .supportMessage
   {
      /* <--! *** Support Section Content Style (Moblie) *** !--> */

      margin: 15px 15px; /* Sets a space of 15px around support section content */
      font-size: .9rem; /* Set text's relative font size to 0.9rem */

      /* <--! *** Style End *** !--> */
   }

   /* Billing Address Form Section */
   .billingAddressFormSection
   {
      /* <--! *** Dimensions for Billing Address Section (Mobile) *** !--> */

      height: 732.5px; /* Section height set to 732.50px */

      /* <--! *** Dimensions End *** !--> */
   }

   /* Billing Address Form container */
   .billingAddressFormContainer 
   {
      /* <--! *** Billing Address Form Container Style (Moblie) *** !--> */

      margin: 15px 7.5%; /* Sets a space of 15px (Top-Bottom) and 7.5% (Right-Left) around Billing Address Form */
      padding: 20px; /* Adds some padding */

   /* <--! *** Style End *** !--> */
   }

   /* Label Style */
   label 
   {
      /* <--! *** Label Style (Moblie) *** !--> */

      font-size: small; /* Sets font size to small */

      /* <--! *** Style End *** !--> */
   }

   /* Style inputs with type="text" */
   input[type=text]
   {
      /* <--! *** Input Text Type Style (Moblie) *** !--> */

      padding: 6px; /* Adds a padding of 6px around the input text */ 
      margin-top: 3px; /* Add a top margin */
      margin-bottom: 8px; /* Bottom margin */

      /* <--! *** Style End *** !--> */
   }

   /* Button Style */
   button
   {
      /* <--! *** Dimensions for Button (Mobile) *** !--> */

      width: 50%; /* Takes up 50% of the width avaliable in billingAddressFormContainer */
      height: 30px; /* Height of button is 30px */

      /* <--! *** Dimensions End *** !--> */
   }

   /* Hyperlink Button Style */
   button a
   {
      /* <--! *** Hyperlink Button Style (Moblie) *** !--> */

      font-size: 11px; /* Sets the font size to 11px */

      /* <--! *** Style End *** !--> */
   }
}


/* ===============================
   Tablet Styles: 601px to 950px 
   ===============================
*/
@media only screen and (max-width: 950px) and (min-width: 601px)
{

   /* Subsection Titles */
   .subsectionTitle
   {
      /* <--! *** Subsection Title Style (Tablet) *** !--> */

      margin: 0; /* No margin (space around the H3 element) */
      padding-top: 2.5%; /* Padding Top (pushes the section title down as to not touch the top of the section) */
      font-size: 2rem; /* Set text's relative font size to 2rem */

      /* <--! *** Style End *** !--> */
   }

   /* Donation Hero Section */
   .heroSection
   {
      /* <--! *** Dimensions for Hero Section (Tablet) *** !--> */

      height: 255px; /* Section height set to 255px  */

      /* <--! *** Dimensions End *** !--> */

   }

   /* Support Section */
   #support
   {
      /* <--! *** Dimensions for Support Section (Tablet) *** !--> */

      height: 320px; /* Section size will be 320px tall */

      /* <--! *** Dimensions End *** !--> */
   }

   /* Support Section Content (p element) */
   .supportMessage
   {
      /* <--! *** Support Section Content Style (Tablet) *** !--> */

      margin: 2.5% 2.5%; /* Sets a margin top-bottom set to 2.5% margin left-right set to 2.5% */
      font-size: 1.25rem; /* Set text's relative font size to 1.25 */

      /* <--! *** Style End *** !--> */
   }

   /* Billing Address Form Section */
   .billingAddressFormSection
   {
      /* Dimensions for Billing Address Section (Tablet) */

      height: 1040px; /* Section height set to 1040px */

      /* <--! *** Dimensions End *** !--> */
   }

   /* Style inputs with type="text" */
   input[type=text]
   {
      /* <--! *** Billing Address Input Text Style (Tablet) *** !--> */

      padding: 12px; /* Adds a padding of 12px around the input text */ 
      margin-top: 6px; /* Add a top margin */
      margin-bottom: 16px; /* Bottom margin */

      /* <--! *** Style End *** !--> */
   }

   /* Billing Address Form container */
   .billingAddressFormContainer 
   {
      /* <--! *** Billing Address Form Container Style (Tablet) *** !--> */

      margin: 2.5% 10%; /* Adds some margins */
      padding: 20px; /* Adds some padding around content within the billing form */

      /* <--! *** Style End *** !--> */
   }

   /* Button Style */
   button
   {
      /* Dimensions for Billing Address Form Button (Tablet) */

      width: 40%; /* Takes up 40% of the width avaliable in billingAddressFormContainer */
      height: 40px; /* Height of button */

      /* <--! *** Dimensions End *** !--> */

      /* <--! *** Billing Address Form Button Style (Tablet) *** !--> */

      font-size: 15.5px; /* Sets font's size to 15.5px */

      /* <--! *** Style End *** !--> */
   }

   /* Billing Address Form Label */
   label
   {
      /* <--! *** Billing Address Form Label Style (Tablet) *** !--> */

      font-size: 1.25rem; /* Sets font's size to 1.25rem */

      /* <--! *** Style End *** !--> */
   }

}


/* =============================================
   Small Desktop Screen Styles: 951px to 1050px 
   =============================================
*/
@media only screen and (max-width: 1050px) and (min-width: 951px) 
{
   /* Button Dimensions */
   button
   {
      /* Dimensions for Billing Address Form Button (Small Desktop) */

      width: 40%; /* Takes up 40% of the width avaliable in billingAddressFormContainer */
      height: 45px; /* Height of button */

      /* <--! *** Dimensions End *** !--> */
   }

   /* Subsection Titles */
   .subsectionTitle
   {
      /* <--! *** Subsection Title Style (Small Desktop) *** !--> */

      margin: 0; /* No margin (space around the H3 element) */
      padding-top: 2.5%; /* Padding Top (pushes the section title down as to not touch the top of the section) */
      font-size: 2.25rem; /* Set text's relative font size to 2.25rem */

      /* <--! *** Style End *** !--> */
   }

   /* Donation Hero Section */
   .heroSection
   {
      /* <--! *** Dimensions for Hero Section (Small Desktop) *** !--> */

      height: 340px; /* Section height set to 340px  */

      /* <--! *** Dimensions End *** !--> */
   }

   /* Support Section */
   #support
   {
      /* <--! *** Dimensions for Support Section (Small Desktop) *** !--> */

      height: 425px; /* Section height set to 425px */

      /* <--! *** Dimensions End *** !--> */
   }

   /* Support Section Content (p element) */
   .supportMessage
   {
      /* <--! *** Support Section Content Style (Small Desktop) *** !--> */
     
      margin: 2.75% 10%; /* Sets a margin top-bottom set to 2.75% margin left-right set to 10% */
      font-size: 1.5rem; /* Set text's relative font size to 1.5rem */

      /* <--! *** Style End *** !--> */
   }

   /* Billing Address Form Section */
   .billingAddressFormSection
   {
      /* <--! *** Dimensions for Billing Address Section (Small Desktop) *** !--> */

      height: 1035px; /* Section height set to 1035px */

      /* <--! *** Dimensions End *** !--> */
   }

   /* Style inputs with type="text" */
   input[type=text]
   {
      /* <--! *** Billing Address Input Text Style (Small Desktop) *** !--> */

      padding: 12px; /* Adds a padding of 12px around the input text */ 
      margin-top: 6px; /* Add a top margin */
      margin-bottom: 16px; /* Bottom margin */

      /* <--! *** Style End *** !--> */
   }

   /* Billing Address Form container */
   .billingAddressFormContainer 
   {
      /* <--! *** Billing Address Form Container Style (Small Desktop) *** !--> */

      margin: 2.5% 25%; /* Adds some margins */
      padding: 20px; /* Adds some padding around content within the billing form */

      /* <--! *** Style End *** !--> */
   }
}