/* where i put my variables */
    
     :root {
        /* --flavorfulGradient: linear-gradient( 45deg, #845ec2, #d65db1, #ff6f91, #ff9671, #ffc75f); */
        --flavorfulGradient: linear-gradient( 45deg, #845ec2, #d65db1, #ff6f91, #ff9671, #ffc75f, #f9f871);
        /* data analytics */
        --pinkPrimary: #ff00e1;
        --pinkTertiary: #ffa3f4;
        --pinkSecondary: #ff6cda;
        --pinkLinGrad: linear-gradient(to right, var(--pinkPrimary) 0%, var(--pinkSecondary) 100%);
        --pinkTopLeftGrad: repeating-linear-gradient(to left top, var(--pinkTertiary), var(--pinkSecondary));
        /* SQL */
        --cyanPrimary: #00ffff;
        --cyanTertiary: #00b2fe;
        --cyanSecondary: #00ffb3;
        --cyanLinGrad: linear-gradient(to right, var(--cyanPrimary) 0%, var(--cyanSecondary) 100%);
        --cyanTopLeftGrad: repeating-linear-gradient(to left top, var(--cyanTertiary), var(--cyanSecondary));
        /* software engineering */
        --bluePrimary: #0d00ff;
        --blueTertiary: #526fff;
        --blueSecondary: #000098;
        --blueLinGrad: linear-gradient(to right, var(--bluePrimary) 0%, var(--blueSecondary) 100%);
        --blueTopLeftGrad: repeating-linear-gradient(to left top, var(--blueTertiary), var(--blueSecondary));
        /* Machine learning */
        --violetPrimary: #302ea3;
        --violetTertiary: #773cec;
        --violetSecondary: #d900ff;
        --violetLinGrad: linear-gradient(to right, var(--violetPrimary) 0%, var(--violetSecondary) 100%);
        --violetTopLeftGrad: repeating-linear-gradient(to left top, var(--violetTertiary), var(--violetSecondary));
    }
    /* .title:hover:before {
        content: "履歴書へようこそ";
    }
    
    .title:hover span {
        transform: scale(1.05);
        display: none;
    } */
    
    a>svg {
        text-decoration: none;
        border: none;
    }
    /* so i can apply a wacky gradient to background */
    
    body {
        background-image: var(--flavorfulGradient);
        background-size: 4000%;
        animation: gradCycle 10s ease-in infinite alternate-reverse;
    }
    /* initializing custom fonts */
    
    @Font-face {
        /* font-family: DINAlternate;
        src: url('fonts/DINAlternate-bold.ttf');
        font-family: Minecraftia;
        src: url('fonts/Minecraftia.ttf'); */
        font-family: Determination;
        src: url('fonts/DeterminationMonoWebRegular-Z5oq.ttf');
    }
    /* using custom fonts */
    
    * {
        font-family: Determination;
        font-size: large;
    }
    /* default card status (unused since everything's filled)*/
    
    .card {
        /* border-radius: 4px; */
        /* background: #fff; */
        /* -webkit-transform: translate3d(0, 0, 0); supposed to stop flickering (but no dice)*/
        transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
        cursor: pointer;
        border: 6px inset #ffffff;
        min-height: 225px;
        ;
    }
    /* self explanatory */
    
    .card:hover {
        transform: scale(1.05) rotateZ(-1deg);
        box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
        border: 6px inset #ffffff;
    }
    
    button {
        margin: 0;
        padding: 0;
        border: none;
        /* color: transparent; */
    }
    /* for gradient animations, go from bottom right to top left */
    
    @keyframes gradCycle {
        0% {
            background-position: bottom right;
        }
        100% {
            background-position: top left;
        }
    }
    /* when you click a box and open a modal, the background blurs */
    
    body.modal-open .bg {
        /* transform: .3s blur(5px); */
        -webkit-filter: blur(5px);
    }
    /*  applies grayish theme to modal body parts*/
    
    .modal-body,
    .modal-footer,
    .modal-header {
        /* background-color: #6e6e6e !important; */
        background-color: hsla(0, 0%, 0%, 0.7) !important;
        color: white !important;
        /* border: none !important; */
    }
    /* for carousel, have the album navigator colored and specifically positioned */
    
    .carousel .carousel-indicators li.active {
        /* background-image: linear-gradient(to right, black 0%, white 50%, black 100%); */
        /* background-image: linear-gradient(to right, blue 0%, cyan 50%, blue 100%); */
        /* background-color: blue; */
        background-color: coral;
        margin-bottom: 10.75px;
    }
    
    .data-analytics :is(h5,
    h4,
    h3,
    button,
    span) {
        background: white;
        /* background: var(--pinkLinGrad); */
        /* background-color: linear-gradient(to right, var(--pinkPrimary) 0%, var(--pinkSecondary) 100%); */
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    
    .card.data-analytics {
        border: 6px inset var(--pinkPrimary);
        background-color: var(--pinkTertiary);
    }
    
    .card.data-analytics:hover {
        background-image: var(--pinkTopLeftGrad);
        background-position: bottom right;
        background-size: 3000%;
        border: 6px inset var(--pinkPrimary);
        background-repeat: repeat-x;
        animation: gradCycle .75s ease-in infinite alternate;
    }
    
    .card.data-analytics::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: .3s;
        z-index: -1;
        color: var(--pinkPrimary);
        box-shadow: 0 0 5px var(--pinkPrimary);
        text-shadow: 0 0 5px var(--pinkPrimary);
    }
    
    .card.data-analytics:hover::before {
        box-shadow: 0 0 220px var(--pinkPrimary);
    }
    
    .sql :is(h5,
    h4,
    h3,
    button,
    span) {
        background: white;
        /* background: var(--cyanLinGrad); */
        /* background-color: linear-gradient(to right, var(--cyanPrimary) 0%, var(--cyanSecondary) 100%); */
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    
    .card.sql {
        border: 6px inset var(--cyanPrimary);
        background-color: var(--cyanTertiary);
    }
    
    .card.sql:hover {
        background-image: var(--cyanTopLeftGrad);
        background-position: bottom right;
        background-size: 3000%;
        border: 6px inset var(--cyanPrimary);
        background-repeat: repeat-x;
        animation: gradCycle .75s ease-in infinite alternate;
    }
    
    .card.sql::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: .3s;
        z-index: -1;
        color: var(--cyanPrimary);
        box-shadow: 0 0 5px var(--cyanPrimary);
        text-shadow: 0 0 5px var(--cyanPrimary);
    }
    
    .card.sql:hover::before {
        box-shadow: 0 0 220px var(--cyanPrimary);
    }
    
    .software-engineering :is(h5,
    h4,
    h3,
    button,
    span) {
        background: white;
        /* background: var(--blueLinGrad); */
        /* background-color: linear-gradient(to right, var(--bluePrimary) 0%, var(--blueSecondary) 100%); */
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    
    .card.software-engineering {
        border: 6px inset var(--bluePrimary);
        background-color: var(--blueTertiary);
    }
    
    .card.software-engineering:hover {
        background-image: var(--blueTopLeftGrad);
        background-position: bottom right;
        background-size: 3000%;
        border: 6px inset var(--bluePrimary);
        background-repeat: repeat-x;
        animation: gradCycle .75s ease-in infinite alternate;
    }
    
    .card.software-engineering::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: .3s;
        z-index: -1;
        color: var(--bluePrimary);
        box-shadow: 0 0 5px var(--bluePrimary);
        text-shadow: 0 0 5px var(--bluePrimary);
    }
    
    .card.software-engineering:hover::before {
        box-shadow: 0 0 220px var(--bluePrimary);
    }
    
    .machine-learning :is(h5,
    h4,
    h3,
    button,
    span) {
        background: white;
        /* background: var(--violetLinGrad); */
        /* background-color: linear-gradient(to right, var(--violetPrimary) 0%, var(--violetSecondary) 100%); */
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    
    .card.machine-learning {
        border: 6px inset var(--violetPrimary);
        background-color: var(--violetTertiary);
    }
    
    .card.machine-learning:hover {
        background-image: var(--violetTopLeftGrad);
        background-position: bottom right;
        background-size: 3000%;
        border: 6px inset var(--violetPrimary);
        background-repeat: repeat-x;
        animation: gradCycle .75s ease-in infinite alternate;
    }
    
    .card.machine-learning::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: .3s;
        z-index: -1;
        color: var(--violetPrimary);
        box-shadow: 0 0 5px var(--violetPrimary);
        text-shadow: 0 0 5px var(--violetPrimary);
    }
    
    .card.machine-learning:hover::before {
        box-shadow: 0 0 220px var(--violetPrimary);
    }