@charset "UTF-8";

/*
	Chebucto Key Players Style Sheet
    Author: Thomas Lacroix
    Creation Date: 2023/08/03
    Modified Date: 2023/08/03
*/
html{
    background-color: rgba(9,74,10,255);
    height: 100%;
    width: 100%;
}
a{
    color: white;
}
header{
    background-color: white;
}
.heroSection
{
    position: relative;
    color: white;
    width: 100%;
    height: 55%;
    margin: 0;
    padding: 0;
    z-index: -1;
}

#introbox
{
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 15%;
    z-index: -1;
}
#introTitle{
    color: white;
    position: absolute;
    text-align: center;
    left: 44.5%;
    top: 0%;
    font-size:1.5vw;
    z-index: -1;
}
#introText{
    color: white;
    position: absolute;
    text-align: center;
    left: 26%;
    top: 25%;
    font-size:1.2vw;
    z-index: -1;
}
#execbox{
    height: 115%;
    position: relative;
    z-index: -2;
}
#execheader{
    color: white;
    position: absolute;
    font-size: 2vw;
    right: 44%;
    top: 0%;
}
#execBoard{
    color: white;
    position: absolute;
    text-align: center;
    font-size: 2vw;
    right: 39%;
    top: 50%;
}
#shahab{
    color: black;
    position: absolute;
    font-size: 1vw;
    right: 82.5%;
    top: 33%;
}
#shahabtext{
    color: black;
    position: absolute;
    font-size: 0.8vw;
    right: 83%;
    top: 35%;
}
#shahabButton{
    color: black;
    position: absolute;
    left: 10.5%;
    top: 39%;
    width: 5%;
    height: 2.5%;
    background-color: rgba(9,74,10,255);
    color: white;
    font-size: 0.9vw;
}
#EdDyer{
    color: black;
    position: absolute;
    right: 59.5%;
    top: 33%;
    font-size: 1vw;
}
#EdDyertext{
    color: black;
    position: absolute;
    font-size: 0.8vw;
    right: 59.5%;
    top: 35%;
}
#EdDyerButton{
    color: black;
    position: absolute;
    left: 36%;
    top: 38%;
    width: 5%;
    height: 2.5%;
    background-color: rgba(9,74,10,255);
    color: white;
    font-size: 0.9vw;
}
#Deborah{
    color: black;
    position: absolute;
    right: 34%;
    top: 33%;
    font-size: 1vw;
}
#Deborahtext{
    color: black;
    position: absolute;
    font-size: 0.8vw;
    right: 36%;
    top: 35%;
}
#DeborahButton{
    color: black;
    position: absolute;
    left: 59.5%;
    top: 38%;
    width: 5%;
    height: 2.5%;
    background-color: rgba(9,74,10,255);
    color: white;
    font-size: 0.9vw;
}
#Nancy{
    color: black;
    position: absolute;
    right: 10.5%;
    top: 33%;
    font-size: 1vw;
}
#Nancytext{
    color: black;
    position: absolute;
    font-size: 0.8vw;
    right: 12.5%;
    top: 35%;
}
#NancyButton{
    color: black;
    position: absolute;
    left: 83.25%;
    top: 38%;
    width: 5%;
    height: 2.5%;
    background-color: rgba(9,74,10,255);
    color: white;
    font-size: 0.9vw;
}
#Douglas{
    color: black;
    position: absolute;
    right: 83%;
    top: 83%;
    font-size: 1vw;
}
#DouglasButton{
    color: black;
    position: absolute;
    left: 10.5%;
    top: 88%;
    width: 5%;
    height: 2.5%;
    background-color: rgba(9,74,10,255);
    color: white;
    font-size: 0.9vw;
}
#Nina{
    color: black;
    position: absolute;
    right: 59%;
    top: 83%;
    font-size: 1vw;
}
#NinaButton{
    color: black;
    position: absolute;
    left: 36%;
    top: 88%;
    width: 5%;
    height: 2.5%;
    background-color: rgba(9,74,10,255);
    color: white;
    font-size: 0.9vw;
}
#Chris{
    color: black;
    position: absolute;
    right: 34.5%;
    top: 83%;
    font-size: 1vw;
}
#Christext{
    color: black;
    position: absolute;
    font-size: 0.8vw;
    right: 33.5%;
    top: 85%;
    text-align: center;
}
#ChrisButton{
    color: black;
    position: absolute;
    left: 59.5%;
    top: 90%;
    width: 5%;
    height: 2.5%;
    background-color: rgba(9,74,10,255);
    color: white;
    font-size: 0.9vw;
}
#David{
    color: black;
    position: absolute;
    right: 10.5%;
    top: 83%;
    font-size: 1vw;
}
#DavidButton{
    color: black;
    position: absolute;
    left: 83.25%;
    top: 88%;
    width: 5%;
    height: 2.5%;
    background-color: rgba(9,74,10,255);
    color: white;
    font-size: 0.9vw;
}
/* ===============================
   Mobile Styles: 0px to 600px 
   ===============================
*/
@media only screen and (max-width: 600px) and (min-width: 0px)
{
    /* Test for Responsive Design */
    .menu
    {
        background-color: blue;  
    }
    /* code to rescale image to fit phones */

    header{
        background-color: white;
    }
    .heroSection
    {
        position: relative;
        color: white;
        width: 100%;
        height: 38%;
        margin: 0;
        padding: 0;
    }
    .heroImage-container{
        height: 100%;
    }
    #introbox
    {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 15%;
    }
    #introTitle{
        color: white;
        position: absolute;
        text-align: center;
        left: 38%;
        top: 0%;
        font-size:3vw;
    }
    #introText{
        color: white;
        position: absolute;
        text-align: center;
        left: 5%;
        top: 25%;
        font-size:2.3vw;
    }
    #execbox{
        height: 60%;
        position: relative;
    }
    #execheader{
        color: white;
        position: absolute;
        font-size: 3vw;
        right: 40%;
        top: 0%;
    }
    #execBoard{
        color: white;
        position: absolute;
        text-align: center;
        font-size: 3vw;
        right: 33%;
        top: 50%;
    }
    #shahab{
        color: black;
        position: absolute;
        font-size: 2vw;
        right: 78%;
        top: 33%;
    }
    #shahabtext{
        color: black;
        position: absolute;
        font-size: 1.5vw;
        right: 79%;
        top: 36%;
    }
    #shahabButton{
        color: black;
        position: absolute;
        left: 9%;
        top: 41%;
        width: 9%;
        height: 3.5%;
        background-color: rgba(9,74,10,255);
        color: white;
        font-size: 1.5vw;
        text-align: center;
    }
    #EdDyer{
        color: black;
        position: absolute;
        right: 57.5%;
        top: 33%;
        font-size: 2vw;
    }
    #EdDyertext{
        color: black;
        position: absolute;
        font-size: 1.5vw;
        right: 58%;
        top: 36%;
    }
    #EdDyerButton{
        color: black;
        position: absolute;
        left: 34%;
        top: 41%;
        width: 9%;
        height: 3.5%;
        background-color: rgba(9,74,10,255);
        color: white;
        font-size: 1.5vw;
        text-align: center;
    }
    #Deborah{
        color: black;
        position: absolute;
        right: 30%;
        top: 33%;
        font-size: 2vw;
    }
    #Deborahtext{
        color: black;
        position: absolute;
        font-size: 1.5vw;
        right: 34.5%;
        top: 36%;
    }
    #DeborahButton{
        color: black;
        position: absolute;
        left: 58%;
        top: 41%;
        width: 9%;
        height: 3.5%;
        background-color: rgba(9,74,10,255);
        color: white;
        font-size: 1.5vw;
        text-align: center;
    }
    #Nancy{
        color: black;
        position: absolute;
        right: 6%;
        top: 33%;
        font-size: 2vw;
    }
    #Nancytext{
        color: black;
        position: absolute;
        font-size: 1.5vw;
        right: 11.5%;
        top: 36%;
    }
    #NancyButton{
        color: black;
        position: absolute;
        left: 81%;
        top: 41%;
        width: 9%;
        height: 3.5%;
        background-color: rgba(9,74,10,255);
        color: white;
        font-size: 1.5vw;
        text-align: center;
    }
    #Douglas{
        color: black;
        position: absolute;
        right: 79%;
        top: 83%;
        font-size: 2vw;
    }
    #DouglasButton{
        color: black;
        position: absolute;
        left: 9%;
        top: 89%;
        width: 9%;
        height: 3.5%;
        background-color: rgba(9,74,10,255);
        color: white;
        font-size: 1.5vw;
        text-align: center;
    }
    #Nina{
        color: black;
        position: absolute;
        right: 57%;
        top: 83%;
        font-size: 2vw;
    }
    #NinaButton{
        color: black;
        position: absolute;
        left: 34%;
        top: 89%;
        width: 9%;
        height: 3.5%;
        background-color: rgba(9,74,10,255);
        color: white;
        font-size: 1.5vw;
        text-align: center;
    }
    #Chris{
        color: black;
        position: absolute;
        right: 31%;
        top: 83%;
        font-size: 2vw;
    }
    #Christext{
        color: black;
        position: absolute;
        font-size: 1.5vw;
        right: 29%;
        top: 86%;
        text-align: center;
    }
    #ChrisButton{
        color: black;
        position: absolute;
        left: 58%;
        top: 92.5%;
        width: 9%;
        height: 3.5%;
        background-color: rgba(9,74,10,255);
        color: white;
        font-size: 1.5vw;
        text-align: center;
    }
    #David{
        color: black;
        position: absolute;
        right: 8%;
        top: 83%;
        font-size: 2vw;
    }
    #DavidButton{
        color: black;
        position: absolute;
        left: 81%;
        top: 89%;
        width: 9%;
        height: 3.5%;
        background-color: rgba(9,74,10,255);
        color: white;
        font-size: 1.5vw;
        text-align: center;
    }
}
/* ===============================
   Tablet Styles: 601px to 950px 
   ===============================
*/
@media only screen and (max-width: 950px) and (min-width: 601px)
{
    .heroSection
    {
        position: relative;
        color: white;
        width: 100%;
        height: 40%;
        margin: 0;
        padding: 0;
    }
    .heroImage-container{
        height: 100%;
    }
    #introbox
    {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 15%;
    }
    #introTitle{
        color: white;
        position: absolute;
        text-align: center;
        left: 42.5%;
        top: 0%;
        font-size:2vw;
    }
    #introText{
        color: white;
        position: absolute;
        text-align: center;
        left: 15%;
        top: 25%;
        font-size:1.7vw;
    }
    #execbox{
        height: 100%;
        position: relative;
    }
    #execheader{
        color: white;
        position: absolute;
        font-size: 2vw;
        right: 44%;
        top: 0%;
    }
    #execBoard{
        color: white;
        position: absolute;
        text-align: center;
        font-size: 2vw;
        right: 39%;
        top: 50%;
    }
    #shahab{
        color: black;
        position: absolute;
        font-size: 1.3vw;
        right: 81%;
        top: 33%;
    }
    #shahabtext{
        color: black;
        position: absolute;
        font-size: 1vw;
        right: 81.8%;
        top: 35%;
    }
    #shahabButton{
        color: black;
        position: absolute;
        left: 10.3%;
        top: 39%;
        width: 6%;
        height: 2.8%;
        background-color: rgba(9,74,10,255);
        color: white;
        font-size: 1vw;
    }
    #EdDyer{
        color: black;
        position: absolute;
        right: 59%;
        top: 33%;
        font-size: 1.3vw;
    }
    #EdDyertext{
        color: black;
        position: absolute;
        font-size: 01vw;
        right: 59.2%;
        top: 35%;
    }
    #EdDyerButton{
        color: black;
        position: absolute;
        left: 35.5%;
        top: 39%;
        width: 6%;
        height: 2.8%;
        background-color: rgba(9,74,10,255);
        color: white;
        font-size: 1vw;
    }
    #Deborah{
        color: black;
        position: absolute;
        right: 33%;
        top: 33%;
        font-size: 1.3vw;
    }
    #Deborahtext{
        color: black;
        position: absolute;
        font-size: 1vw;
        right: 35.5%;
        top: 35%;
    }
    #DeborahButton{
        color: black;
        position: absolute;
        left: 59.5%;
        top: 39%;
        width: 6%;
        height: 2.8%;
        background-color: rgba(9,74,10,255);
        color: white;
        font-size: 1vw;
    }
    #Nancy{
        color: black;
        position: absolute;
        right: 9%;
        top: 33%;
        font-size: 1.3vw;
    }
    #Nancytext{
        color: black;
        position: absolute;
        font-size: 1vw;
        right: 12.5%;
        top: 35%;
    }
    #NancyButton{
        color: black;
        position: absolute;
        left: 82.3%;
        top: 39%;
        width: 6%;
        height: 2.8%;
        background-color: rgba(9,74,10,255);
        color: white;
        font-size: 1vw;
    }
    #Douglas{
        color: black;
        position: absolute;
        right: 82%;
        top: 83%;
        font-size: 1.3vw;
    }
    #DouglasButton{
        color: black;
        position: absolute;
        left: 10.3%;
        top: 88%;
        width: 6%;
        height: 2.8%;
        background-color: rgba(9,74,10,255);
        color: white;
        font-size: 1vw;
    }
    #Nina{
        color: black;
        position: absolute;
        right: 58.3%;
        top: 83%;
        font-size: 1.3vw;
    }
    #NinaButton{
        color: black;
        position: absolute;
        left: 35.5%;
        top: 88%;
        width: 6%;
        height: 2.8%;
        background-color: rgba(9,74,10,255);
        color: white;
        font-size: 1vw;
    }
    #Chris{
        color: black;
        position: absolute;
        right: 33.6%;
        top: 83%;
        font-size: 1.3vw;
    }
    #Christext{
        color: black;
        position: absolute;
        font-size: 1vw;
        right: 32.3%;
        top: 85%;
        text-align: center;
    }
    #ChrisButton{
        color: black;
        position: absolute;
        left: 59.2%;
        top: 90%;
        width: 6%;
        height: 2.8%;
        background-color: rgba(9,74,10,255);
        color: white;
        font-size: 1vw;
    }
    #David{
        color: black;
        position: absolute;
        right: 10%;
        top: 83%;
        font-size: 1.3vw;
    }
    #DavidButton{
        color: black;
        position: absolute;
        left: 82.7%;
        top: 88%;
        width: 6%;
        height: 2.8%;
        background-color: rgba(9,74,10,255);
        color: white;
        font-size: 1vw;
    }
}