/*-------Colour Variables------*/
:root{
    --background:        white;
    --hover:             #ffddd0;
    --border:            #c6c6c6;
    --p:                 black;
    --h1:                #355249;
    --h2:                black;
    --h3:                black;
    --h4:                black;
    --h5:                black;
    --h6:                white;
    --icon:              white;
}



/*---------PC Only ----------*/
@media screen and (min-width: 800px) {
}



/*--------Mobile Only -------*/
@media screen and (max-width: 800px) {
    a:link, a:visited {text-decoration: none;}
    a { 
        -webkit-tap-highlight-color: transparent; 
        -webkit-tap-highlight-color: rgba(0,0,0,0); /* For older webkit browsers */ 
    }
}



/*-------PC & Mobile---------*/
html {
    background-color: var(--background);
}

:is(.header, .footer) {
    background-color: var(--border);
}

p { color: var(--p); }
h1 { color: var(--h1); }
h2 { color: var(--h2); }
h3 { color: var(--h3); }
h4 { color: var(--h4); }
h5 { color: var(--h5); }
h6 { color: var(--h6); }

/* Icons */
:is(.fa-github, .fa-linkedin-in, .fa-envelope, .fa-moon){ color: var(--icon); }