/* ============ about & contact ============ */
a{color: black}

.linkstyle {margin: 0 2px;display: inline-block;position: relative;transition: color .5s;}
.linkstyle:hover{color: var(--pri01);}
.linkstyle::after {content: " ";width: 0;height: 1px;position: absolute;bottom: 2px;left: 0;background-color: var(--pri01);transition: width .5s,background .5s;}
.linkstyle:hover::after {width: 100%;background-color: var(--pri01);}

/* ============ contact ============ */
.mail {margin: 0 2px;display: inline-block;position: relative;transition: color .5s;}
.mail:hover{color: blue;}
.mail::after {content: " ";width: 0;height: 1px;position: absolute;bottom: 2px;left: 0;background-color: blue;transition: width .5s,background .5s;}
.mail:hover::after {width: 100%;background-color: blue;}