@charset "UTF-8";

/*
	Chebucto Main Style Sheet
    Author: Christopher Charles, Forde Nedimović, Thomas Lacroix
    Creation Date: 2023/07/25 
    Modified Date: 2023/08/16
*/

/* UNIVERSAL ELEMENT STYLE RULES */


button
{
    border-radius: 1%;
    border: white solid 2px;
    background-color: rgba(9,74,10,255);
    color: white;
    font-weight: bold;

}
button a, .footer-Container a, footer 
{
    text-decoration: none;
    color: white;
}


/*specific element rules */
#heroSectionTitle{
    color: white;
    text-shadow: 3px 0 0 #000, 0 -1px 0 #000, 0 3px 0 #000, -1px 0 0 #000;
    font-size: 3.5vw;
    font-weight: bold;
    top: 11%;
    left: 7.5%;
    position:absolute;
}


.heroSection
{
    position:relative;
    width: 100%;
    height: 70%;
    z-index: -1;
}

.updates
{
    position:relative;
    background-image: url("../Images/Pattern\ 2.png");
    height: 50%;
    z-index: -1;
}
.live-overflow{
    width:80%;
    height:80%;
    margin:10%;
    overflow: auto;
    
}
#updateTitle
{
    position:absolute;
    color: rgba(9,74,10,255);
    font-weight: bolder;
    font-size: 2vw;
    top: 10%;
    left: 30%
}
.twitter
{
    position:relative;
    background-image: url("../Images/Pattern\ 2.png");
    height: 55%;
    z-index: -1;
}
.twitterContainer
{
    position: absolute;
    width: 70%;
    margin-left: 15%;
    height: 100%;  
    overflow: hidden;
}
.twitterContainer:hover
{
    overflow: auto;
}
.twitter-timeline{
    border:solid rgba(9,74,10,255) 0.75vw;
}
.twitterBorder{
    width: 70%;
    margin-left: 15%;
    height: 100%;  
    z-index:9;
}
.cnnUpdates-container
{
    position: absolute;
    width: 70%;
    margin-left: 15%;
    height: 100%;  
}
#updateMessage{
    position:absolute;
    margin-left:2%;
    margin-right:5%;
    top:30%;
    text-align: center;
    font-size: 1.3vw;
}
#updateDate
{
    position:absolute;
    font-size: 1vw;
    right: 30%;
    top: 60%
}
#CCN-Title_Container h2
{
    margin: 0;
    text-shadow: 1.5px 0 0 #000, 0 -1px 0 #000, 1px 0 #000, -1px 0 0 #000;
}
.donations
{
    position: relative;
    height: 50%;
    width: 100%;
    background-image: url("../Images/Pattern\ 2.png");
    z-index: -1;
}
.donationsText-container
{
    position: absolute;
    width: 70%;
    margin-left: 15%;
    height: 100%;  
}
#donationsTitle{
    color: white;
    text-shadow: 1.5px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
    position: absolute;
    text-align: center;
    font-size: 2.5vw;
    top: 20%;
    left: 25%;
}
#donationButton{
    position: absolute;
    left: 18%;
    top: 56%;
    width: 24%;
    height: 15%;
    font-size: 2vw;
    text-align: center;
    text-shadow: 1.5px 0 0 #000, 0 -1px 0 #000, 1px 0 #000, -1px 0 0 #000;
    
}
#renewalButton{
    position: absolute;
    left: 45%;
    top: 56%;
    width: 25%;
    height: 15%;
    font-size: 1.6vw;
    text-align: center;
    text-shadow: 1.5px 0 0 #000, 0 -1px 0 #000, 1px 0 #000, -1px 0 0 #000;
    
}
.neighbourhood
{
    position: relative;
    height: 50%;
    width: 100%;
    background-image: url("../Images/Pattern\ 2.png");
    z-index: -1;
}
.neighbourhoodText-container
{
    position: absolute;
    width: 70%;
    margin-left: 15%;
    height: 100%;  
}
#neighbourhoodTitle{
    color: white;
    text-shadow: 1.5px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
    position: absolute;
    text-align: center;
    font-size: 2.2vw;
    top: 33%;
    left: 28%;
}
#neighbourhoodButton{
    position: absolute;
    left: 40%;
    top: 65%;
    width: 30%;
    height: 15%;
    font-size: 2vw;
    text-align: center;
    text-shadow: 1.5px 0 0 #000, 0 -1px 0 #000, 1px 0 #000, -1px 0 0 #000;
    
}
#donationButton:hover, #neighbourhoodButton:hover{
    cursor: pointer;
}

/* ===============================
   Mobile Styles: 0px to 600px 
   ===============================
*/
@media only screen and (max-width: 600px) and (min-width: 0px)
{
    #heroSectionTitle{
        color: white;
        text-shadow: 3px 0 0 #000, 0 -1px 0 #000, 0 3px 0 #000, -1px 0 0 #000;
        font-size: vw;
        font-weight: bold;
        top: 11%;
        left: 7.5%;
        position:absolute;
    }
    
    
    .heroSection
    {
        position:relative;
        width: 100%;
        height: 40%;
    }
    
    .updates
    {
        position:relative;
        background-image: url("../Images/Pattern\ 2.png");
        height: 50%;
    }
    #updateTitle
    {
        position:absolute;
        color: rgba(9,74,10,255);
        font-weight: bolder;
        font-size: 3vw;
        top: 20%;
        left: 30%
    }
    .cnnUpdates-container
    {
        position: absolute;
        width: 100%;
        margin-left: 0%;
        height: 100%;  
    }
    #updateMessage{
        position:absolute;
        top:35%;
        left:0%;
        margin-left:6%;
        margin-right:5%;
        text-align: center;
        font-size: 2.3vw;
    }
    #updateDate
    {
        position:absolute;
        font-size: 2.5vw;
        right: 30%;
        top: 60%
    }
    .twitter
{
    height: 40%;
}
.twitterContainer
{
    width: 100%;
    margin-left: 0%;
}
    #CCN-Title_Container h2
    {
        margin: 0;
        text-shadow: 1.5px 0 0 #000, 0 -1px 0 #000, 1px 0 #000, -1px 0 0 #000;
    }
    .donations
    {
        position: relative;
        height: 50%;
        width: 100%;
        background-image: url("../Images/Pattern\ 2.png");
    }
    .donationsText-container
    {
        position: absolute;
        width: 100%;
        margin-left: 0%;
        height: 100%;  
    }
    #donationsTitle{
        color: white;
        text-shadow: 1.5px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
        position: absolute;
        text-align: center;
        font-size: 4.3vw;
        top: 23%;
        left: 25%;
    }
    #donationButton{
        position: absolute;
        left: 25%;
        top: 55%;
        width: 40%;
        height: 15%;
        font-size: 3.5vw;
        text-align: center;
        text-shadow: 1.5px 0 0 #000, 0 -1px 0 #000, 1px 0 #000, -1px 0 0 #000;
        
    }
    .neighbourhood
    {
        position: relative;
        height: 50%;
        width: 100%;
        background-image: url("../Images/Pattern\ 2.png");
    }
    .neighbourhoodText-container
    {
        position: absolute;
        width: 100%;
        margin-left: 0%;
        height: 100%;  
    }
    #neighbourhoodTitle{
        color: white;
        text-shadow: 1.5px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
        position: absolute;
        text-align: center;
        font-size: 4vw;
        top: 30%;
        left: 10%;
    }
    #neighbourhoodButton{
        position: absolute;
        left: 30%;
        top: 60%;
        width: 45%;
        height: 15%;
        font-size: 2vw;
        text-align: center;
        text-shadow: 1.5px 0 0 #000, 0 -1px 0 #000, 1px 0 #000, -1px 0 0 #000;
    }
}

/* ===============================
   Tablet Styles: 601px to 950px 
   ===============================
*/
@media only screen and (max-width: 950px) and (min-width: 601px)
{
    #heroSectionTitle{
        font-size:4vw;
        top: 10%;
    }
    .heroSection
    {
        position:relative;
        width: 100%;
        height: 30%;
    }
    .updates
    {
        position:relative;
        background-image: url("../Images/Pattern\ 2.png");
        height: 35%;
        width: 100%;
    }
    #updateTitle
    {
        position:absolute;
        color: rgba(9,74,10,255);
        font-weight: bolder;
        font-size: 3vw;
        top: 20%;
        left: 30%
    }
    .cnnUpdates-container
    {
        position: absolute;
        width: 90%;
        margin-left: 5%;
        height: 100%;  
    }
    #updateMessage{
        position:absolute;
        top:35%;
        left:0%;
        margin-left:6%;
        margin-right:5%;
        text-align: center;
        font-size: 2.3vw;
    }
    #updateDate
    {
        position:absolute;
        font-size: 2.5vw;
        right: 25%;
        top: 70%
    }
    .twitter
{
    height: 30%;
}
.twitterContainer
{
    width: 90%;
    margin-left: 5%;
}
    #CCN-Title_Container h2
    {
        margin: 0;
        text-shadow: 1.5px 0 0 #000, 0 -1px 0 #000, 1px 0 #000, -1px 0 0 #000;
    }
    .donations
    {
        width: 100%;
        height: 35%
    }
    .donationsText-container
    {
        position: absolute;
        width: 90%;
        margin-left: 5%;
        height: 100%;  
    }
    #donationsTitle{
        color: white;
        text-shadow: 1.5px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
        position: absolute;
        text-align: center;
        font-size: 4.3vw;
        top: 23%;
        left: 25%;
    }
    #donationButton{
        position: absolute;
        left: 25%;
        top: 70%;
        width: 40%;
        height: 15%;
        font-size: 3.5vw;
        text-align: center;
        text-shadow: 1.5px 0 0 #000, 0 -1px 0 #000, 1px 0 #000, -1px 0 0 #000;
        
    }
    .neighbourhood
    {
        position: relative;
        height: 35%;
        width: 100%;
        background-image: url("../Images/Pattern\ 2.png");
    }
    .neighbourhoodText-container
    {
        position: absolute;
        width: 90%;
        margin-left: 5%;
        height: 100%;  
    }
    #neighbourhoodTitle{
        color: white;
        text-shadow: 1.5px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
        position: absolute;
        text-align: center;
        font-size: 4vw;
        top: 30%;
        left: 10%;
    }
    #neighbourhoodButton{
        position: absolute;
        left: 30%;
        top: 70%;
        width: 45%;
        height: 15%;
        font-size: 2.5vw;
        text-align: center;
        text-shadow: 1.5px 0 0 #000, 0 -1px 0 #000, 1px 0 #000, -1px 0 0 #000;
    }
}

/* =============================================
   Small Desktop Screen Styles: 951px to 1050px 
   =============================================
*/
@media only screen and (max-width: 1050px) and (min-width: 951px) 
{
    /*
    .heroSection
    {
        height: 334px;
    }

    .updates
    {
        height: 334px;
        overflow: auto;
    }
    */
}

/* =============================================
   Large Desktop Screen Styles: 1051px to 1500px 
   =============================================
*/
@media only screen and (max-width: 1500px) and (min-width: 1051px) 
{
    /*
    .heroSection
    {
        height: 340px;
    }
    */
}