@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}

:root{
    --color: rgb(17, 17, 17);
    --link-color: rgb(86, 86, 86);
    --background: rgb(244, 244, 242);
    --grey: #414141;

    --background-opacity: rgba(0, 0, 0, 0.06);

    --card-height:1rem;
    --card-width: auto;

    --body-copy: 1.2rem;
    --caption-copy: calc(var(--body-copy) * 0.8);

    --space-bar-0: 0.8rem;
    --space-bar-1: 1rem;
    --space-bar-2: calc(var(--space-bar-1) * 1.8);
    --space-bar-3: 4rem;
    --space-page-margin: 10rem;
}

body{
    color: var(--color);
    background-color: var(--background);
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--body-copy);
    display: grid;
    grid-template-rows: min-content 1fr min-content;
    align-items: center;
}


@media(width<1000px){
    :root{
         --space-page-margin: 4rem;
    }
}
@media(width<800px){
    :root{
        --body-copy: 1rem;
        --space-bar-0: 0.6rem;
        --space-bar-1: 0.8rem;
        --space-bar-2: calc(var(--space-bar-1) * 1.8);
        --space-bar-3: 2rem;
        --space-page-margin: 2rem;
    }
}

hgroup, main, footer{
    margin-inline: var(--space-page-margin);
    margin-block: var(--space-bar-2);
}


section, footer, .cta{
    background-color: var(--background-opacity);
    padding-inline: var(--space-bar-2);
    padding-block: var(--space-bar-1);
    border-radius: var(--space-page-margin);
}

hgroup{
    display: flex;
    justify-content:space-between;
    column-gap: var(--space-bar-1);
    align-items: center;
    font-size: var(--body-copy);
    position: sticky;
    inset-block-start: var(--space-bar-2);
    z-index: 1;
    background-blend-mode: difference;

    section:first-child{
        backdrop-filter: blur(2rem);
        overflow: hidden;
    }
    section{
        display: flex;
        justify-content: space-between;
        width: 100%;
    
        ul{
            display: flex;
            column-gap: var(--space-bar-1); 
         }
        svg{
                width: 1rem;
                height: 1rem;
                fill: var(--color);
            }
    }


}

footer{
    font-size: var(--caption-copy);
    display: flex;
    justify-content:space-between;
    align-items: center;
    color: var(--color);
    p{
        padding-block: 0.2rem;
        opacity: 0.8;
    }
    p:nth-child(2){
        opacity: 0.6;
    }

    @media(width<1200px){
        display: block;
    }
}


#project{
    display: grid;
    gap: var(--space-bar-2);
    grid-template-columns: repeat(7, 1fr); 

    li{
        @media(width<600px){
            grid-column: 1 /span 7;
            }
    }
}
.card {
    
    position: relative;
    border-radius: var(--space-bar-3);
    align-items: left;
    gap: var(--space-bar-0);
    display: flex;
    flex-direction: column;
    font-size: var(--body-copy);
    color: var(--color);
    /* background-color: var(--background-opacity); */

}

img{
    border-radius: var(--space-bar-2);
    overflow: hidden;
}

#binding{
    grid-column: 1 /span 3;
}
#spread{
    grid-column: 3 /span 5;
}
#manuscript{
    grid-column: 1 /span 3;
}
#links{
    grid-column: 3 /span 5;

}
#functions{
    grid-column: 1 /span 3;
}






/* i want to have a cool hover efffect */
/* i found this gradient border example on codepen:https://codepen.io/gayane-gasparyan/pen/jOmaBQK */
/* i reversed the interaction so my border animated when on hover */

/* i learned that:
    this example uses pseudo element for the border.
    the border is an illusion made by offsetting the color block
    */
.secondarycta:hover{
    fill: var(--link-color);
}
.cta{
    width: max-content;
    position: relative;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
    font-size: var(--body-copy);
    color: var(--color);
    
}


.cta:before, .cta:after {
    content: "";
    position: absolute;
    border-radius: var(--space-page-margin);
    background-image: linear-gradient(
    var(--rotate)
    , #ffffff, #ffffff 43%, #d5d5d5);
    z-index: -1;
    animation: none;
    opacity: 0;
}

.cta::before {
    width: 100.25%;
    height: 101%;
    top: -0.5%;
    left: -0.05%;
}

.cta::after {
    top: calc(var(--card-height) / 10);
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    transform: scale(1.03);
    filter: blur(calc(var(--card-height) / 12));
    transition: opacity .5s;
}

.cta:hover {
    color: var(--link-color);
    background-color: #ffffff;
    transition: color 1s;
}
.cta:hover:before, .cta:hover:after {
    animation: spin 2.5s linear infinite;
    opacity: 1;
}




@keyframes spin {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}