home.css

@font-face { font-family: "XiaoWei"; 
    src: url('fonts/XiaoWei.ttf'); } 
@font-face { font-family: "Comfortaa";
    src: url('fonts/Comfortaa.ttf'); }
@font-face {font-family: 'creteround';
    src:url('fonts/Crete_Round/CreteRound-Regular.ttf');}
@font-face {font-family: 'OldStandard';
    src:url('fonts/Old Standard/OldStandardTT-Regular.ttf');}
/*in the above code we imported the fonts locally to be used for making the projects
now the real styling code starts from below*/


/*this code blow sets the universal document margin and padding to be zero be default!*/
*{
    margin:0;
    padding:0;
}


/*we style the body of our html document here by setting an image sa background and resizing it to fit on our document*/
body {
    background-image: url("background-images/uni-theme.jpg");
    background-size: 110vmax;
    background-attachment: fixed;
   }


table {
    letter-spacing:1.1px;
    font-size:20px;
    background-color:rgba(0, 0, 0, 0.3);
    color:white;
    padding:1px 10px;
    font-family: arial;
    border-radius:10px;
    margin:2.5px;
    font-weight:bold;
    border:1px black solid;
    text-shadow:1px 1px 4px black;
 
}
sup{
    font-size:23px;
    vertical-align: top;
}

.logout:link{
    color: currentColor;
    text-decoration:none;
}

.logout:active{
    color:currentColor;
    text-decoration:none;
}

.logout:hover{
    transition:.3s linear color;
    color:rgb(252, 170, 170);
}


#title{
    font-size:30px;
    text-align: center;
    color:rgb(255, 255, 255);
    text-shadow:1px 1px 4px black;
    font-weight:bold;
}


.homePanel{
    COLOR:rgb(160, 160, 160);
    position:fixed;
    margin:auto;
    top:10%;
    left:0;
    right:0;
    bottom:0;
    width:875px;
    height:500px;
    display: flex;
    flex-direction: row;
    justify-content:space-evenly;
    flex-wrap: wrap;
 


}

.panelItems{
    background-color:rgb(0,0,0,0.5);
    border-radius:40px;
    box-shadow:5px 5px 20px black;
    border-right:1px dotted white;
    border-bottom:1px dotted white;
}



#myDetails{
  width:350px;
  height:200px;

}
#myDetails:hover{
    transition:0.2s linear background-color;
    background-color: rgba(0, 0, 0, 0.7);
    box-shadow:0px 0px 15px green;
    cursor:pointer;
}

#update {
    width:350px;
    height:200px;
}
#update:hover{
    transition:0.2s linear background-color;
    background-color: rgba(0, 0, 0, 0.7);
    box-shadow:0px 0px 15px green;
    cursor:pointer;
}

#list {
 
    width:350px;
    height:200px;
   
}

#list:hover{
    transition:0.2s linear background-color;
    background-color: rgba(0, 0, 0, 0.7);
    box-shadow:0px 0px 15px green;
    cursor:pointer;
}


#cart {
      width:350px;
    height:200px;
}

#cart:hover{
    transition:0.2s linear background-color;
    background-color: rgba(0, 0, 0, 0.7);
    box-shadow:0px 0px 15px green;
    cursor:pointer;
}

#myDetails,#fruitsList{
    display: inline-flex;
}
#veggiesList,#cart{
    display:inline-flex;
}

.options{
    padding:30px;
    font-Size: 50px;
    position:relative;
    margin:auto;
    text-align: center;
    FONT-FAMILY:creteround;
    COLOR:rgb(221, 221, 221);   
    text-shadow:1px 1px 2px black;
}

.options:hover{
    color:rgb(186, 252, 186);
}


.optionLinks:link{
    color:white;
    text-decoration:none;
}


.optionLinks:active{
    color:white;
    text-decoration:none;
}


.optionLinks:visited{
    color:white;
    text-decoration:none;
}






/*This is the footer...which contains information about the author and copywright info*/
#footText {
    color:white;
    position:fixed;
    bottom:0;
    right:0;
    left:0;
    background-image: linear-gradient(to right,rgb(0,0,0,.5),rgb(0,0,0,.2),rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.6),rgb( 0, 0,0,0.6),rgb(0,0,0,.2),rgb(0,0,0,.5));
    font-family: xiaowei;
    text-align: center;
    text-shadow:0px 0px 1px white;
    font-size: 15px;
    letter-spacing: 7px;
    padding: 2px;
    margin: 0 4px;
    margin-bottom: 2px;
    margin-top: 1vw;
    border-radius: 10px;
}
#copyright{
    font-size: 18px;
    vertical-align: -.75px;
 }