@import url(./fonts.css);

/* VW
https://yanhaijing.com/css/2017/09/29/principle-of-rem-layout/ 
https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

*/

:root{
    --primary-color: #4458dc;
    --primary-color2: #854fee;
    --title-color: #141313;
    --text-color: #777777;  
    --border-color: #201f1f17;  
    --gradient-color: linear-gradient(90deg, #4458dc 0%, #854fee 100%);
    --shadow-color:  0px 10px 30px rgba(118, 85, 225, 0.3);
    --box-shadow: 0px 10px 30px rgba(57, 56, 61, 0.205);

    /* font family variables. */ 
    --roboto: 'Roboto', cursive;
} 

/* 
Padding
https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding
https://www.w3schools.com/css/css_padding.asp
*/
.ccHeader .navbar .navbar-brand{
    /* Top Right Bottom Left */
    padding: 0 1vw 0 5vw;
    font-size: 36px;
}


.ccHeader .navbar{
    padding: 0vw 0vw ;
}

.ccHeader .nav-item .nav-link{
    /* font-family: "Roboto",cursive; */
    font-family: 'Tangerine', serif;
    font-size: 36px;
    /* font-weight: 500; */
    padding: 1vw;
    color: var(--title-color);
}

.ccHeader .navbar-nav a:hover{
    background: var(--gradient-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /*background-clip: text;*/
}