@charset "UTF-8";

/*
	Chebucto terms of use Style Sheet
    Author: Forde Nedimović
    Creation Date: 2023/07/07 
    Modified Date: 2023/08/14
*/

/*
This Section is only to be able to show some alternate images.
This should be removed once we've decided on which images to use.
Test section start here:
*/
#altButton{
    color: black;
    position: absolute;
    right: 10%;
    top: 50%;
    width: 20%;
    height: 15%;
    background-color: rgba(9,74,10,255);
    color: white;
    font-size: 2vw;
    text-align: center;
    font-weight: bold;
    z-index: 1;
}



/*  Test Section End   */
html{
    background-color: rgba(9,74,10,255);
}
a{
    color: white;
}
header{
    background-color: white;
}
.heroSection
{
    position: relative;
    color: white;
    width: 100%;
    height: 60%;
    margin: 0;
    padding: 0;
    z-index: -1;
}

#boxOne{
    height: 30%;
    position: relative;
    z-index: -1;
}
#mission{
    color: white;
    position: absolute;
    text-align: center;
    left: 43.5%;
    top: 1%;
    font-size: 2.3vw;
    z-index: -1;
}
#missionText{
    color: white;
    position: absolute;
    text-align: center;
    margin-left: 25%;
    margin-right:25%;
    top: 25%;
    font-size: 1.3vw;
    z-index: -1;
}
#boxTwo{
    height: 65%;
    position: relative;
}
#players{
    color: white;
    position: absolute;
    font-size: x-large;
    right: 10%;
    top: 30%;
}
#playerText{
    color: white;
    position: absolute;
    text-align: center;
    font-size: 1.75vw;
    right: 5%;
    top: 70%;
}
#playersButton{
    color: black;
    position: absolute;
    right: 10%;
    top: 50%;
    width: 30%;
    height: 20%;
    background-color: rgba(9,74,10,255);
    color: white;
    font-size: 3.5vw;
    text-align: center;
    font-weight: bold;
}
#playersButton:hover, #AGMButton:hover, #committeesButton:hover, #HistoryButton:hover, #SupportersBtton:hover{
    cursor: pointer;
}
/* For commities and AGM */
#boxThree{
    width: 100%;
    height: 70%;
    position: relative;
    padding-top:4%;
}
#AGM{
    color: white;
    position: absolute;
    font-size: 1.6vw;
    right: 1.5%;
    top: 10%;
    text-align: right;
}
#AGMtext{
        color: white;
        position: absolute;
        text-align: center;
        font-size: 2vw;
        right: 15%;
        top: 35%;
        text-shadow: 1.5px 0 0 #000, 0 -1px 0 #000, 1px 0 #000, -1px 0 0 #000;
}
#AGMButton{
    color: black;
    position: absolute;
    left: 65%;
    top: 65%;
    width: 20%;
    height: 15%;
    background-color: rgba(9,74,10,255);
    color: white;
    font-size: 2vw;
}
#committees{
    color: white;
    position: absolute;
    font-size: 1.6vw;
    left: 1.3%;
    top: 14%;
}
#committeesButton{
    color: black;
    position: absolute;
    left: 18%;
    top: 60%;
    width: 18%;
    height: 8%;
    background-color: rgba(9,74,10,255);
    color: white;
    font-size: 2vw;
}
#committeesText{
    position: absolute;
    font-size: 2vw;
    margin-left: 4%;
    margin-right: 50%;
    top: 40%;
    color: white;
    text-shadow: 1.5px 0 0 #000, 0 -1px 0 #000, 1px 0 #000, -1px 0 0 #000;
}
/* for history and supporters */
#boxFive{
    height: 60%;
    width: 100%;
    position: relative;
}
#History{
    color: white;
    position: absolute;
    font-size: 1.6vw;
    left: 1%;
    top: 1%;
}
#historyText{
    color: white;
    position: absolute;
    text-align: center;
    font-size: 2vw;
    margin-right: 55%;
    top: 35%;
    left:   8%;
    text-shadow: 1.5px 0 0 #000, 0 -1px 0 #000, 1px 0 #000, -1px 0 0 #000;
}
#historyButton{
    color: black;
    position: absolute;
    left: 20%;
    top: 55%;
    width: 13%;
    height: 15%;
    background-color: rgba(9,74,10,255);
    color: white;
    font-size: 2vw;
}
#Supporters{
    color: white;
    position: absolute;
    font-size: 1.6vw;
    right: 1%;
    top: 1%;
}
#suporterText{
    color: white;
    position: absolute;
    text-align: center;
    font-size: 2vw;
    right: 18%;
    top: 30%;
    text-shadow: 1.5px 0 0 #000, 0 -1px 0 #000, 1px 0 #000, -1px 0 0 #000;
}
#supporterButton{
    color: black;
    position: absolute;
    right: 15%;
    top: 60%;
    width: 17%;
    height: 10%;
    background-color: rgba(9,74,10,255);
    color: white;
    font-size: 2vw;
}
/* ===============================
   Mobile Styles: 0px to 600px 
   ===============================
*/

/*Resizing for About Us has not yet been done */
@media only screen and (max-width: 600px) and (min-width: 0px)
{

        .heroSection
    {
        height: 30%;
    }

    #boxOne{
        height: 32%;
        position: relative;
        z-index: -1;
    }
    #mission{
        color: white;
        position: absolute;
        text-align: center;
        left: 37%;
        top: 1%;
        font-size: 4vw;
        z-index: -1;
    }
    #missionText{
        margin-left: 15%;
        top: 25%;
        font-size: 2.7vw;
        margin-right:15%;
    }
    #boxTwo{
        height: 30%;
        position: relative;
    }
    #players{
        color: white;
        position: absolute;
        font-size: x-large;
        right: 10%;
        top: 30%;
    }
    #playerText{
        color: white;
        position: absolute;
        text-align: center;
        font-size: 1.75vw;
        right: 5%;
        top: 70%;
    }
    #playersButton{
        color: black;
        position: absolute;
        right: 10%;
        top: 50%;
        width: 30%;
        height: 20%;
        background-color: rgba(9,74,10,255);
        color: white;
        font-size: 3.5vw;
        text-align: center;
        font-weight: bold;
    }
    /* For commities and AGM */
    #boxThree{
        width: 100%;
        height: 35%;
        position: relative;
    }
    #AGM{
        color: white;
        position: absolute;
        font-size: 1.8vw;
        right: 1%;
        top: 12%;
        text-align: right;
    }
    #AGMtext{
        color: white;
        position: absolute;
        text-align: center;
        font-size: 2vw;
        right: 15%;
        top: 35%;
        text-shadow: 1.5px 0 0 #000, 0 -1px 0 #000, 1px 0 #000, -1px 0 0 #000;
    }
    #AGMButton{
        color: black;
        position: absolute;
        left: 65%;
        top: 55%;
        width: 20%;
        height: 15%;
        background-color: rgba(9,74,10,255);
        color: white;
        font-size: 2vw;
    }
    #committees{
        color: white;
        position: absolute;
        font-size: 2vw;
        left: 1.3%;
        top: 13%;
    }
    #committeesButton{
        color: black;
        position: absolute;
        left: 18%;
        top: 60%;
        width: 18%;
        height: 8%;
        background-color: rgba(9,74,10,255);
        color: white;
    }
    #committeesText{
        font-size: 2vw;
        margin-left: 4%;
        margin-right: 50%;
        top: 40%;
        color: white;
        text-shadow: 1.5px 0 0 #000, 0 -1px 0 #000, 1px 0 #000, -1px 0 0 #000;
    }
    /* for history and supporters */
    #boxFive{
        height: 35%;
        width: 100%;
        position: relative;
    }
    #History{
        font-size: 2vw;
    }
    #historyText{
        color: white;
        position: absolute;
        text-align: center;
        font-size: 2vw;
        margin-right: 55%;
        top: 35%;
        left:   8%;
        text-shadow: 1.5px 0 0 #000, 0 -1px 0 #000, 1px 0 #000, -1px 0 0 #000;
    }
    #historyButton{
        color: black;
        position: absolute;
        left: 20%;
        top: 50%;
        width: 13%;
        height: 15%;
        background-color: rgba(9,74,10,255);
        color: white;
    }
    #Supporters{
        font-size: 2vw;
    }
    #suporterText{
        color: white;
        position: absolute;
        text-align: center;
        font-size: 2vw;
        right: 18%;
        top: 30%;
        text-shadow: 1.5px 0 0 #000, 0 -1px 0 #000, 1px 0 #000, -1px 0 0 #000;
    }
    #supporterButton{
        color: black;
        position: absolute;
        right: 15%;
        top: 50%;
        width: 17%;
        height: 10%;
        background-color: rgba(9,74,10,255);
        color: white;
    }
}

/* ===============================
   Tablet Styles: 600px to 950px 
   ===============================
*/
@media only screen and (max-width: 950px) and (min-width: 601px)
{
        .heroSection
    {
        width: 100%;
        height: 55%;
    }

    #boxOne{
        height: 25%;
    }
    #mission{
        color: white;
        position: absolute;
        text-align: center;
        left: 43.5%;
        top: 1%;
        font-size: 2.3vw;
        z-index: -1;
    }
    #missionText{
        color: white;
        position: absolute;
        text-align: center;
        margin-left: 25%;
        margin-right:25%;
        top: 25%;
        font-size: 1.5vw;
        z-index: -1;
    }
    #boxTwo{
        height: 55%;
        position: relative;
    }

    /* For commities and AGM */
    #boxThree{
        height: 65%;
    }
    #AGMtext{
        color: white;
        position: absolute;
        text-align: center;
        font-size: 2vw;
        right: 15%;
        top: 35%;
        text-shadow: 1.5px 0 0 #000, 0 -1px 0 #000, 1px 0 #000, -1px 0 0 #000;
    }
    #AGMButton{
        color: black;
        position: absolute;
        left: 65%;
        top: 58%;
        width: 20%;
        height: 15%;
        background-color: rgba(9,74,10,255);
        color: white;
        font-size: 2vw;
    }
    #committees{
        color: white;
        position: absolute;
        font-size: 1.6vw;
        left: 1.3%;
        top: 14%;
    }
    #committees{
        color: white;
        position: absolute;
        font-size: 2vw;
        left: 1.3%;
        top: 13%;
    }
    #committeesButton{
        color: black;
        position: absolute;
        left: 18%;
        top: 60%;
        width: 18%;
        height: 8%;
        background-color: rgba(9,74,10,255);
        color: white;
    }
    /* for history and supporters */
    #boxFive{
        height: 60%;
        width: 100%;
        position: relative;
    }
    #historyText{
        color: white;
        position: absolute;
        text-align: center;
        font-size: 2vw;
        margin-right: 55%;
        top: 35%;
        left:   8%;
        text-shadow: 1.5px 0 0 #000, 0 -1px 0 #000, 1px 0 #000, -1px 0 0 #000;
    }
    #historyButton{
        color: black;
        position: absolute;
        left: 20%;
        top: 50%;
        width: 13%;
        height: 15%;
        background-color: rgba(9,74,10,255);
        color: white;
    }
    #suporterText{
        color: white;
        position: absolute;
        text-align: center;
        font-size: 2vw;
        right: 18%;
        top: 30%;
        text-shadow: 1.5px 0 0 #000, 0 -1px 0 #000, 1px 0 #000, -1px 0 0 #000;
    }
    #supporterButton{
        color: black;
        position: absolute;
        right: 15%;
        top: 50%;
        width: 17%;
        height: 10%;
        background-color: rgba(9,74,10,255);
        color: white;
    }
}