@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --fs-1: clamp(1rem, 1vw, 3rem);
    --fs-2: calc(var(--fs-1)*1.5);
    --fs-half: calc(var(--fs-1)*.75);
    --lh-1: clamp(1.65, 1.85, 2);
    --lh-2: calc(var(--lh-1)*2);
    --color-orange: hsla(350, 100%, 50%, 1.0);
    --color-violet: hsla(270, 100%, 50%, 1.0);
    --color-blue: hsla(210, 100%, 50%, 1.0);
    --color-bluegrey: hsla(240, 100%, 10%, 1.0);
    --color-cream: hsla(20, 100%, 97%, 1.0);

    font-family: "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: var(--fs-1);
    line-height: var(--lh-1);
    letter-spacing: -0.005rem;
    word-spacing: .025rem;
    color: var(--color-bluegrey);
}

/*Universal Box-model*/
*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}


body, html {
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    font-kerning: auto;
    min-height: 100vh;
}

body {
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-template-areas:
      ". h ."
      ". b ."
      ". f .";
      backdrop-filter: blur(5px);
      background: linear-gradient(to bottom, var(--color-blue) 25%, var(--color-violet) 100%);
}

p {
    color: var(--color-bluegrey);
}

a {
    color: var(--color-bluegrey);
    text-decoration: .1px solid (var(--color-violet));
}


em {
    vertical-align: middle;
    font-style: italic;
    font-size: calc(var(--fs-1)*.85);
}

h3 {
    letter-spacing: 0.025rem;
    font-size: var(--fs-2);
    font-weight: 600;
    line-height: 2;
    text-align: center;
    border-bottom: 1.5px solid var(--color-orange);
    margin-top: .25rem;
}

header {
    grid-area: h;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60px;
    vertical-align: baseline;
}

a.logo {
    text-decoration: none;
    transition: all 350ms ease-in;
    border-top: .5px solid white;
    border-bottom: .5px solid white;
    padding: 0 25px;
    color: var(--color-cream);
    font-size: var(--fs-2);
    font-weight: 900;
    letter-spacing: .5rem;
    text-indent: .5rem;
    word-break: keep-all;
}

.logo:hover {
    text-decoration: none;
    transition: all 350ms ease-in;
    background-color: white;
    backdrop-filter: blur(50%);
    font-weight: 300;
    padding: 0 27px;
    letter-spacing: .6rem;
    text-indent: .6rem;
    border-radius: 1.5rem;
    color: var(--color-blue);
}

a:hover {
    transition: all 50ms ease-in;
    text-underline-offset: 2.5px;
    text-decoration: 1.5px solid underline var(--color-orange);
}

a:active {
    transition: all 50ms ease-in;
    color: var(--color-orange)
}

.portfolio {
    margin-top: .5rem;
}

.container {
    z-index: 1;
    grid-area: b;
    display: flex;
    flex-direction: column;
    padding: var(--fs-2);
    background: var(--color-cream);
    opacity: 100%;
    border-radius: 1.5rem;
}

.container>a {
    white-space: nowrap;
}

ul {
    padding: var(--fs-half);
}

li {
    padding: 1px;
    list-style: none;
}

.icon {
    display: inline-block;
    rotate: -45deg;
    position: relative;
    text-align: center;
    width: var(--fs-half);
    height: 100%;
    margin-right: 5px;
}

#inner {
    fill: var(--color-orange);
    opacity: 0;
}

#outer {
    fill: var(--color-bluegrey);
}

:hover>.icon {
    #inner {
        transition: all 50ms ease-in;
        opacity: 100%; }
}

:active>.icon {
    #inner {
        transition: all 50ms ease-in;
        opacity: 0%; }
    #outer {
        transition: all 50ms ease-in;
        fill: var(--color-orange); }
}

footer {
    margin-top: var(--fs-1);
    font-size: var(--fs-half);
    grid-area: f;
    text-align: center;
    p {
        color: var(--color-cream);
    }
    .c {
        color: var(--color-orange);
        padding-right: 2px;
        font-weight: 600;
    }
}