/*Body*/
#body{
    /*Background Image*/
    background-image: url(Imgs/bg.jpg);
    background-size: cover;
    background-position: top;
    background-repeat: repeat;
    background-attachment: fixed;

    /*Text Styling*/
    font-family: "Bpmf Huninn", sans-serif;
}

/*Navigation Bar*/
.navBar{
    /*Display*/
    display: flex;
    background-color: rgba(0, 0, 0, 0.25);
    height: 30px;
    padding: 5px;
    position: sticky;

    /*Border*/
    border: solid black 2px;
    border-radius: 10px;

    /*Alignement*/
    top: 8px;
    align-items: center;
    text-align: center;
}

/*Navigation Bar Buttons*/
.navBtn{
    /*Display*/
    display: flex;
    background-color: rgba(138, 43, 226, 1);
    height: 25px;
    width: 100px;

    /*Border*/
    border: solid black 2px;
    border-radius: 10px;
    
    /*Text Styling*/
    font-family: inherit;
    color: white;
    font-size: 15px;

    /*Alignment*/
    margin-right: 2px;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/*The Feedback Button On The Navigation Bar*/
#feedbackBtn{
    width: 165px;
}

/*The About Us Button On The Navigation Bar*/
#aboutUsBtn{
    width: 110px
}

/*When The Navigation Bar Is Hovered Over*/
.navBtn:hover{
    /*Display*/
    scale: 110%;
    border-color: white;
    background-color: rgba(138, 43, 226, 0.6);

    /*Alignment*/
    margin-right: 7.5px;
    margin-left: 5px;

    /*Other*/
    cursor: pointer;
}

/*Icon Inside The Navigation Bar*/
.ico{
    /*Display*/
    display: inline-block;
    width: 33px;
    height: 35px;

    /*Border*/
    border: black 2px solid;
    border-radius: 100%;

    /*Alignment*/
    margin-right: 5px;
}

/*For All Text*/
.txt{
    /*Text Styling*/
    color: blueviolet;
    font-size: 20px;

    /*Text Alignment*/
    margin-top: 5px;
    text-align: center;
}

/*For Page Titles*/
.header{
    font-size: 50px;
    font-weight: bolder;
    text-shadow: 
        0 0 5px rgba(0, 0, 0, 0.75),
        0 0 10px rgba(138, 43, 226, 0.6),
        0 0 15px rgba(138, 43, 226, 1),
        0 0 15px rgba(138, 43, 226, 1),
        0 0 15px rgba(138, 43, 226, 1);
}

/*For Subheadings*/
.miniHeader{
    font-size: 35px;
    font-weight: bold;
}

/*A Section On Why You Should By From CodeCanDo*/
#whyCCD{
    /*Display*/
    display: inline-flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.75);

    /*Border*/
    border: black solid 2px;
    border-radius: 15px;
    width: 700px;

    /*Alignment*/
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 5px
}

/*A Section On Who CCD Is*/
#whoCCD{
    /*Display*/
    display: inline-flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.75);

    /*Border*/
    border: black solid 2px;
    border-radius: 15px;
    width: 700px;

    /*Alignment*/
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 5px
}

/*The Inquiry Section*/
.inquiry{
    /*Display*/
    display: inline-flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.75);

    /*Border*/
    border: black solid 2px;
    border-radius: 15px;
    width: 700px;

    /*Alignment*/
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 5px
}

/*The Inquire Button*/
.inquireBtn{
    /*Display*/
    background-color: rgba(138, 43, 226, 1);
    scale: 1.5;

    /*Text Styling*/
    color: white;

    /*Border*/
    border: solid black 2px;
    border-radius: 5px;

    /*Text Styling*/
    font-family: inherit;

    /*Alignment*/
    margin-bottom: 5px;
}

/*When The Inquire Button Is Hovered Over*/
.inquireBtn:hover{
    /*Display*/
    background-color: rgba(138, 43, 226, 1);
    scale: 1.6;

    /*Border*/
    border: solid white 2px;
    border-radius: 5px;

    /*Other*/
    cursor: pointer;
    box-shadow: 
        0 0 5px white,
        0 0 10px rgb(155, 90, 215),
        0 0 15px rgba(138, 43, 226, 1),
        0 0 15px rgba(138, 43, 226, 1),
        0 0 15px rgba(138, 43, 226, 1);
}

/*To Give Feedback To CCD*/
#feedback{
    /*Display*/
    display: inline-flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.75);

    /*Border*/
    border: black solid 2px;
    border-radius: 15px;
    width: 700px;

    /*Alignment*/
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 5px
}

/*Main Review Holder*/
.reviews{
    /*Display*/
    display: flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.75);

    /*Border*/
    border: black solid 2px;
    border-radius: 15px;
    width: 700px;

    /*Alignment*/
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    justify-self: center;
    padding: 5px
}

/*All The Review Styling*/
.r{
    /*Display*/
    background-color: rgba(138, 43, 226, 0.6);
    width: 300px;

    /*Border*/
    border-radius: 5px;
    border: black 2px solid;

    /*Alignment*/
    padding: 5px;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin: 2px;

    /*Text Styling*/
    color: white;


    /*All The Review Box Styling*/


    /*Makes Reviews Side By Side*/
    .rSided{
        display: flex;
    }

    /*Makes Sure Pfp, Name, And Stars Stay On Top of Text*/
    .rTop{
        /*Display*/
        display: flex;

        /*Alignment*/
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    /*Pfp*/
    .rImg{
        /*Display*/
        width: 50px;
        height: 50px;

        /*Border*/
        border-radius: 100px;
        border: black solid 2px;
    }

    /*Name*/
    .rName{
        /*Alignment*/
        margin-left: 5px;
    }

    /*Star Rating*/
    .rStars{
        /*Display*/
        width: 95px;
        height: 55px;

        /*Alignment*/
        margin-left: 5px;
    }
}

/*Scrollbar Display*/
::-webkit-scrollbar{
    display: none;
}

/*Social Contact Div Inside Navbar*/
.socials{
    display: flex;
    position: fixed;
    right: 1lh;
}

/*The Social Contact Buttons*/
.sImg{
    margin-left: 3px;
}

/*When The Social Contact Button Are Hovered Over*/
.sImg:hover{
    cursor: pointer;
    transform: scale(105%);
}

/*Mobile View*/
@media(max-width: 767px){

    /*The Feedback Button On The Navigation Bar On Mobile*/
    #feedbackBtn{
        width: 165px;
        font-size: 8px;
    }

    /*The About Us Button On The Navigation Bar On Mobile*/
    #aboutUsBtn{
        width: 110px;
        font-size: 9px;
    }

    /*A Section On Why You Should By From CodeCanDo On Mobile*/
    #whyCCD{
        /*Display*/
        display: inline-flex;
        flex-direction: column;
        background-color: rgba(0, 0, 0, 0.75);

        /*Border*/
        border: black solid 2px;
        border-radius: 15px;
        width: 350px;

        /*Alignment*/
        text-align: center;
        justify-content: center;
        align-items: center;
        padding: 5px
    }

    /*A Section On Who CCD Is On Mobile*/
    #whoCCD{
        /*Display*/
        display: inline-flex;
        flex-direction: column;
        background-color: rgba(0, 0, 0, 0.75);

        /*Border*/
        border: black solid 2px;
        border-radius: 15px;
        width: 350px;

        /*Alignment*/
        text-align: center;
        justify-content: center;
        align-items: center;
        padding: 5px
    }

    /*The Inquiy Section*/
    .inquiry{
        /*Display*/
        display: inline-flex;
        flex-direction: column;
        background-color: rgba(0, 0, 0, 0.75);

        /*Border*/
        border: black solid 2px;
        border-radius: 15px;
        width: 350px;

        /*Alignment*/
        text-align: center;
        justify-content: center;
        align-items: center;
        padding: 5px
    }

    /*To Give Feedback To CCD*/
    #feedback{
        /*Display*/
        display: inline-flex;
        flex-direction: column;
        background-color: rgba(0, 0, 0, 0.75);

        /*Border*/
        border: black solid 2px;
        border-radius: 15px;
        width: 350px;

        /*Alignment*/
        text-align: center;
        justify-content: center;
        align-items: center;
        padding: 5px
    }

    .reviews{
        /*Display*/
        display: flex;
        flex-direction: column;
        background-color: rgba(0, 0, 0, 0.75);

        /*Border*/
        border: black solid 2px;
        border-radius: 15px;
        width: 350px;

        /*Alignment*/
        text-align: center;
        justify-content: center;
        align-items: center;
        margin-top: 15px;
        justify-self: center;
        padding: 5px
    }

    /*Social Contact Div Inside Navbar On Mobile*/
    .socials{
        display: none;
    }
}