﻿
@font-face {
    font-family: 'Ginger Fox Font-Regular';
    src: url('/Fonts/Ginger Fox Font-Regular.otf') format('opentype');
}

.DisplayShow {
    display: block;
}

.DisplayHide {
    display: none !important;
}
.mainContainer {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;

    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.Header {
    background-color: #CC000F;
    height: 15%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.Logo {
    position: absolute;
    top: 1%;
    width: 11%;
    left: 50%;
    transform: translateX(-50%);
}
.BackImageLink {
    margin-left: 19px;
    font-size: 25px;
}
.BackImage {
    width: 11%;
}
.ColContainer {
    overflow: scroll;
    width: 100%;
    height: 70%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    background-color: #28A3DD;
    color: white;
    font-size: 1.8vw;
    font-family: 'Ginger Fox Font-Regular';
    overflow: scroll;
}

.Col1 {
    width: 30%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
   /* margin-left: 10px;
    margin-right: 10px;*/
}
 

.Col2 {
    width: 30%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
    /*margin-left: 10px;
    margin-right: 10px;*/
}


.Col3 {
    width: 30%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
   /* margin-left: 10px;
    margin-right: 10px;*/

}
.colHeading {
    height: 14%;
    margin-top: 44px;

}
.ImageAimOfGame {
    width: 70%;
}

.ImageSetUp {
    height: 81%;
    max-height: 51px;
}

.ImageHowToWin {
    width: 70%;
}

.Footer {
    background-color: #FFB800;
    height: 15%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.FooterText{
    color:white;
    font-size:4vw;
}

.HowToPlayContainer {
    width: 100%;
    height: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    background-color: #28A3DD;
    color: white;
    font-size: 1.8vw;
    font-family: 'Ginger Fox Font-Regular';
}

.HowToPlayText {
    width: 80%;
    overflow: scroll;
    margin-top: 34px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}
.ImageHowToPlay {
    width: 32%;
}