@import url("style.css");
a {
    color: cyan;
}

a:hover {
    color: cadetblue;
}

a:visited {
    color: aquamarine
}

#link_container {
    display: flex;
    flex-wrap: wrap;
}

.box-link {
    display: flex;
    flex-direction: column;
    
    border: rgb(87, 11, 175) 6px ridge;
    padding: 0.5em;
    width: 310px;
    height: 350px;

    position: relative;

    margin: auto;
}


.box-link .box-content {
    flex-grow: 1;
    position: relative;
}

.box-link img, .box-link object {
    max-width: 100%;
}

.box-link object {
    pointer-events: none; /* makes the picture clickable*/
}


.box-link:nth-of-type(2) .box-content object{
    position: absolute;
  left: 3%;
  top: 15%;
/* this is a bit shite */
}
/* 
@property --animation-progress {
    syntax: "<number>";
    initial-value: 0;
    inherits: true;
} */

#projects_link .box-content {
    display: flex;
  align-items: center;
  justify-content: center;

}

@property --color {
  syntax: '<color>'; /* <- defined as type number for the transition to work */
  initial-value: black;
  inherits: true;
}

#projects_link svg {
    height: 172px;
    overflow:visible;
    --color: pink;
    transition: --color 0.75s linear;
}

#projects_link svg #front, #projects_link svg #back{
    transform:rotatex(0) 
        skewx(0)
        ;
    transition: transform 0.75s;
    transform-origin:0% 115%;
}
#projects_link svg .contents{
    height: 116px;
    width: 116px;
    transform: translate(80px, 80px);
    transition: transform 0.3s ease-out;
}

@media (prefers-reduced-motion: no-preference) {
    #projects_link:hover svg #front, #projects_link:focus svg #front, #projects_link:active svg #front { 
        transform:rotatex( 20deg) skewx( -9deg);
    }

    #projects_link:hover svg #back, #projects_link:focus svg #back, #projects_link:active svg #back { 
        transform:rotatex( -2deg) skewx( 3deg);
    }

    #projects_link:hover svg, #projects_link:focus svg, #projects_link:active svg {
        --color: blue;
    }

    #projects_link:hover svg .contents, #projects_link:active svg .contents, #projects_link:focus svg .contents{
        transform: translate(0px, 0px);
        animation: 0.3s 1 anim1 linear none;
    }
}

#addons img {
    width: 100px;
    display: block;
    position: absolute;

    transition:
        transform 0.75s,
        top 0.75s ease-in-out,
        bottom 0.75s ease-in-out,
        left 0.75s ease,
        right 0.75s ease;
}

#addons img:nth-child(1) {
    top: 0%;
    left: 0%;
}


#addons img:nth-child(2) {
    bottom: 0%;
    right: 0%;
}

@media (prefers-reduced-motion: no-preference) {
    
    #addons:hover img:nth-child(1), #addons:active img:nth-child(1), #addons:focus img:nth-child(1) {
        top: 53%;
        left: 60%;
        /* width: 50%; */
    }
    #addons:hover img:nth-child(2), #addons:active img:nth-child(2), #addons:focus img:nth-child(2) {
        bottom: 60%;
        right: 60%;
        /* width:50%; */
    }

    #addons:hover img, #addons:active img, #addons:focus img {
        animation: 1s 1 shadow_flash;
        transform: scale(1.25);
    }
}

.box-link .box-label {
    width: 100%;
}

nav ul {
    padding: 0;
}

nav li {
    list-style: none;
    display: inline-block;
}

main {
    text-align: center;
    flex-grow: 1;

}

#main-wrapper {
    max-width: 50em;
    margin: auto;
    /* border: rgb(87, 11, 175) 4px ridge; */
}

h1 {
    /* marg */
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-shadow:
        1px 1px grey,
        2px 1px grey,
        3px 1px grey,
        4px 1px grey,
        5px 1px grey,
        6px 1px grey;
    transform: rotate3d(-1, 1, -0.1, 30deg);
    animation: 2s infinite alternate h1_animation;
    animation-timing-function: steps(15, end);
}

@keyframes h1_animation {
    from {
        transform: rotate3d(-1, 1, -0.1, 30deg);
    }

    to {
        transform: rotate3d(-1, 1, -0.1, 40deg);
    }
}

@keyframes shadow_flash {
    from {
        filter: drop-shadow(0 0 0rem white);
    }

    70% {
        filter: drop-shadow(0 0 0rem white);
    }

    85% {
        filter: drop-shadow(0 0 0.5rem white);
    }

    to {
        filter: drop-shadow(0 0 0rem white);
    }
}

@keyframes anim1{
    0% { transform: translate(80px, 80px); }
    50% {transform: translate(50px, 30px); }  
    100% { transform: translate(0px, 0px); }
  }