@import url("https://fonts.googleapis.com/css?family=Raleway:400");

* {
    box-sizing: border-box;
}

@property --angle {
    syntax: '<angle>';
    initial-value: 90deg;
    inherits: true;
}

@property --gradX {
    syntax: '<percentage>';
    initial-value: 50%;
    inherits: true;
}

@property --gradY {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: true;
}

/*body {
    font-family: Raleway, sans-serif;
    text-align: center;
    margin: 0;
    padding: 1rem;
    background-color: rgba(10, 12, 18, 1);
    color: white;
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}*/

/*p {
    margin: 0;
}*/

:root {
    --d: 2500ms;
    --angle: 90deg;
    --gradX: 100%;
    --gradY: 50%;
    --c1: rgba(168, 239, 255, 1);
    --c2: rgba(168, 239, 255, 0.1);
}

/*.wrapper {
    min-width: min(40rem, 100%);
}*/

.box:hover {
    font-size: 3vw;
    /*margin: max(1rem, 3vw);*/
    border: 0.35rem solid;
    /*padding: 3vw;*/
    border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;
    animation: borderRotate var(--d) linear infinite forwards;
}

    .box:hover:nth-child(2) {
        border-image: radial-gradient(ellipse at var(--gradX) var(--gradY), var(--c1), var(--c1) 10%, var(--c2) 40%) 30;
        animation: borderRadial var(--d) linear infinite forwards;
    }

@keyframes borderRotate {
    100% {
        --angle: 420deg;
    }
}

@keyframes borderRadial {
    20% {
        --gradX: 100%;
        --gradY: 50%;
    }

    40% {
        --gradX: 100%;
        --gradY: 100%;
    }

    60% {
        --gradX: 50%;
        --gradY: 100%;
    }

    80% {
        --gradX: 0%;
        --gradY: 50%;
    }

    100% {
        --gradX: 50%;
        --gradY: 0%;
    }
}