/* ///////////////// */
/* INDEX PAGE STYLE  */
/* ///////////////// */


@font-face {
    font-family: Bungee Spice;
    src: url(../../copyRight/Bungee_Spice/BunggeSpice-regular.ttf);
}
:root{
    --primary-bg-header-color:#f9f9f5;
    --primary-header-color:#999999;
}
body{
    margin:0;
    padding:0;
}
#container{
    margin:0;
    padding:0;
}
#login{
text-align:right;
padding-right:15px;
background-color:var(--primary-header-color);
color:#fff;
}
/*HEADER id ccs CODE */
#Header{
    font-family: BunggeFont;
    background-color:var(--primary-bg-header-color);
    padding:12px;
    width:100%;
    display:block;
    margin:0;
    height:200px;
}
#headerInfo{
    font-size: 12px;
    width:calc( 100% - 220px);
    display:inline-block;
    vertical-align:top;
    line-height:22px;
}
#developerInfo{
    font-size: 11px;
    margin:0;
    padding:0;
    width:150px;
    display:inline-block;
}
#developerInfoFooter{
    display:none;
}
h1{
    font-size: 30px;
    color:var(--primary-header-color);
    border-bottom:2px solid grey;
}
/*BODY id ccs CODE */
#Body{
    padding:30px 0 0 0;
    height:calc( 100vh - 280px);
    width:100%;
    overflow:scroll;
    display:block;
    text-align:center;
}
.categoriesLinkLINES{
    min-width:160px;
    display:inline-block;
    width:30%;
}
.categoriesLink{
    width:150px;
    height:150px;
    background-color:var(--primary-header-color);
    border-radius:10px;
    margin:5px auto;
    display:block;
    cursor:pointer;
}
#link1{
background-color:#5F9EA0;
position:relative;
}
#link1:hover{
background-color:#008B8B;
}
#link2{
background-color:#FF7F50;
position:relative;
}
#link2:hover{
background-color:#FF6347;
}
#link3{
background-color:#98FB98;
position:relative;
}
#link3:hover{
background-color:#9ACD32;
}
#link4{
background-color:#FF6347;
position:relative;
}
#link4:hover{
background-color:#A0522D;
}
#link5{
background-color:#FFE4C4;
position:relative;
}
#link5:hover{
background-color:#DEB887;
}
.title{
   position:absolute;
   top:5px;
   left:5%;
   height:60px;
   width:90%;
    color:#fff;
    background-color:#000;
     border-radius:5px;
}
/*FOOTER id ccs CODE */
#Footer{
    font-family: BunggeFont;
    background-color:#000;
    padding:12px;
    width:100%;
    display:block;
    margin:0;
    height:30px;
    text-align:center;
    color:#fff;
    line-height:12px;
    font-size: 11px;
}

/*contraction ccs CODE */
/*////////////////////*/
/*bullet in header id div*/
.bullet{
    width:12px;
    height:12px;
    background-color:var(--primary-header-color);
    border-radius:50%;
    display:inline-block;
    margin-right:5px;
}