:root {
    --primary-text: black;
    --primary: red;
    --accent: indigo;
    --primary-trans: rgba(255, 0, 0, .4);
    --accent-trans: rgba(75, 0, 130, 0.4);
    --circle-size: 35mm;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
*:hover {
    /* outline: 1mm dotted purple; */
}
html, body {
    height: 100vh;
    background: #cecece;
    color: var(--primary-text);
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 4mm;
}

a:link, a:active, a:visited {
    color: var(--accent);
    transition: color 500ms ease-in-out;
}
a:hover {
    color: var(--primary);
}

main {
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    background: linear-gradient(30deg, var(--primary), var(--accent));
    backdrop-filter: blur(10mm);
}

.card{
    z-index: 10;
    position: relative;
    background: rgba(255, 255, 255, .6);
    border-radius: 1.2mm;
    /* border: solid 1px black; */
    box-shadow: 0mm 1mm 2mm 2mm rgba(0,0,0,.1);
    width: 85.6mm;
    height: 53.98mm;
    display: flex;
    flex-direction: column;
}
.card .header {
    /* background: white; */
    /* var(--accent-trans); */
    display: flex;
    flex-direction: row;
    gap: 1ch;
    padding: 4mm 5mm 1mm 5mm;

    .text {
        display: flex;
        flex-direction: column;
    }
    .avatar {
        border-radius: 50%;
        box-shadow: 0 .125ch .4ch .1ch rgba(0,0,0, .5);
    }
}
.card .contact {
    padding: 0 5mm;
}
.card strong {
    color: black;
    text-shadow: 0 .25mm .5mm;
}
.card strong em {
    color: red;
    font-size: 110%;
}
small {
    color: darkslategray;
    font-style: italic; 
}
dl {
    padding-top: 5mm;
    font-size: .8rem;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-auto-flow: row;
    gap: 1mm;
}

ul.projects {
    position: absolute;
    background: rgba(255, 0, 0, .4);
    /* backdrop-filter: blur(10mm); */
    bottom: 0; left: 0;
    width: 100%;
    list-style-type: none;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
}

ul.projects li {
    list-style-type: none;
    display: block;
    padding: 2mm;
    font-size: 70%;
}
ul.projects li a {
    display: block;
    padding: 0 0mm;
    border: solid 1mm var(--accent);
    background: var(--accent);
    color: white;
    padding: 1mm;
    border-radius: 2mm;
    text-decoration: none;
}

.circle {
    /* visibility: hidden; */
    position: absolute;
    display: block;
    background: linear-gradient(-150deg, var(--primary-trans), var(--accent-trans));
    
    /* color: white; */
    /* background: black; */
    display: flex;
    align-items: center;
    font-size: 8mm;
    justify-content: center;
    border-radius: 50%;


    /* border: solid 2mm black; */
    height: var(--circle-size);
    width: var(--circle-size);
    backdrop-filter: hue-rotate(15deg);
    z-index: 0;
    /* box-shadow: 0 0 2mm 5mm rgba(255, 255, 255, .3); */

    /* transform: rotate3d(1, 1, 1, 45deg); */
}

.a {
    top: 30%;
    left: 10%;
}
.b {
    right: 10%;
    bottom: 30%;
}