@charset "UTF-8";

/*
	Chebucto Services Page
    Author: Thomas Lacroix
    Creation Date: 2023/08/10 
    Modified Date: 2023/08/10
*/

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

a
{
   color: rgba(9,74,10,255);
   font-weight: bold;
}

p
{
  overflow: auto;
}

.heroSection
{
  z-index: -1;
  position: relative;
}

.background{
  background-image: url("../Images/Pattern\ 2.png");
  background-size: contain;
  background-attachment: fixed;
  padding: 2.5% 0;
 }

.Wireless, .Plus, .Mail, .Webhosting
{
   margin: 2.5% 10%;
   border: solid rgba(9,74,10,255) 5px;
   text-align: center;
   overflow: hidden;
   background-color: white;
}
.Wireless:hover, .Plus:hover, .Mail:hover, .Webhosting:hover, .introSection:hover
{
  overflow: auto;
}

/* Intro Section */
.introSection{
  height: auto;
  background-color:rgba(9,74,10,255); /*dark green*/
  z-index: -1;
  overflow: hidden;
}
#introTitle{
  color:white;
  text-align:center;
}
#introText{
  color:white;
  text-align:center;
}


/* =============================================
   Computers: 951px and larger
   =============================================
*/
@media only screen and (min-width: 951px)
{

    /* Page Sections */
  .heroSection
  {
      width: 100%;
      height: 60%;
  }

  #introText{
      text-shadow: 3px 0 0 #000, 0 -1px 0 #000, 0 3px 0 #000, -1px 0 0 #000;
      font-size: 2vw;
      margin: 5% 10% 7.5% 10%;
  }
  #introTitle{
      text-shadow: 3px 0 0 #000, 0 -1px 0 #000, 0 3px 0 #000, -1px 0 0 #000;
      font-size: 2.5vw;
      margin: 5%;
  }

  /* Subsection Title Rules */
  .subsectionTitle
  {
      font-size: 2vw;
      margin: 2.5% 0;
  }

  

  .Wireless p, .Plus p, .Mail p, .Webhosting p
  {
      font-size: 1.4vw;
      text-align: center;
      margin: 2.5% 10%;
  }


  #Wireless, #Plus, #Mail, #Webhosting
  {
      text-align: center;
      margin: 0 10%;
  }

}


/* ===============================
   Mobile Styles: 0px to 600px 
   ===============================
*/
/* only the changes included*/
@media only screen and (max-width: 600px) and (min-width: 0px)
{
    /*Used for all section titles */
    .background{
      height:auto;
      padding: auto;
    }
    .subsectionTitle
    {
       font-size: 3vw;
       margin: 2.5% 0;
    }

     .Plus, .Mail
    {
      margin: 5% 7.5%;
    }
    .Wireless, .Webhosting
    {
      margin: 2.5% 7.5%;
    }
    .Wireless p, .Plus p, .Mail p, .Webhosting p, .Misc p
    {
        font-size: 2.75vw;
        text-align: center; 
        margin: 5% 5%;
    }
    #ChebuctoCommunity{
        margin-left: 30%;
        height: 30%;
        width: 40%;
        font-size:3vw;
    }
    .heroSection
    {
    height: 25%;
    }
    .introSection{
        width:100%;
        background-color:rgba(9,74,10,255); /*dark green*/
    }
    #introText{
        text-shadow: 1px 0 0 #000, -1px 0 0 #000, 1px 0 0 #000, -1px 0 0 #000;
        font-size: 3vw;
        margin: 5% 10%;
        padding: 0;
    }
    #introTitle{
      text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
      font-size: 3.5vw;
      margin: 5% 0;
    }
  
}


/* ===============================
   Tablet Styles: 601px to 950px 
   ===============================
*/
@media only screen and (max-width: 950px) and (min-width: 601px)
{
    .subsectionTitle
    {
       font-size: 3vw;
       margin: 0;
    }
    .background{
      height:150%;
    }
    .Wireless p, .Plus p, .Mail p, .Webhosting p, .Misc p
    {
        font-size: 2.4vw;
        text-align: center;
        margin: 0 10%;
    }
 
    #ChebuctoCommunity{
        margin-left: 30%;
        height: 30%;
        width: 40%;
        font-size:3vw;
        margin-top: 3%
    }
 
    .heroSection
    {
    height: 25%;
    }
    .introSection{
        position:relative;
        width:100%;
        height:20%;
        background-color:rgba(9,74,10,255); /*dark green*/
    }
    #introText{
        text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
        font-size: 2.8vw;
        top:35%;
        margin-left: 10%;
        margin-right: 10%;

    }
}