@keyframes blinking {
    0% {
        background-color: rgba(0, 255, 0, 1);
    }
    25% {
        background-color: rgba(0, 255, 0, 0.7);
    }
    50% {
        background-color: rgba(0, 255, 0, 0.5);
    }
    75% {
        background-color: rgba(0, 255, 0, 0.7);
    }
    100% {
        background-color: rgba(0, 255, 0, 1);
    }
}
@keyframes fish_orange {
    0% {
        top: 0;
        right: -10vw;
    }
    25% {
        top: 30vh;
        right: 45vw;
    }
    50% {
        right: 110vw;
        top: 0;
    }
    
    55% {
        top: -10vh;
    }
}

@keyframes fish_green {
    0% {
        top: 0;
        left: -10vw;
    }
    25% {
        top: 10vh;
        left: 55vw;
    }
    50% {
        left: 110vw;
        top: 0;
    }
    55% {
        top: -10vh;
    }
}

* {
    margin: 0;
    box-sizing: border-box;
}

body {
    background: linear-gradient(to top, rgba(93, 202, 226, 0.5), rgba(255, 255, 255, 0.7));
}

header {
    position: relative;
    top: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to right, rgba(44, 137, 168), rgba(30, 95, 116));
    border-bottom: 2px solid #333;
}
.titel {
    padding: 20px;
    transition: letter-spacing 0.3s ease-in-out;
}
.titel:hover {
    letter-spacing: 3px;
}
.cv {
    position: absolute;
    right: 180px;
    top: 50%;
    transform: translateY(-50%);
    color: darkblue;
    text-decoration: none;
    font-size: 1.5em;
}
.nav-link {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: black;
    text-decoration: none;
    font-size: 1.5em;
}
.pasfoto {
    position: absolute;
    top: 0;
    right: 0;
    float: right;
    height: 90px;
    margin: 5px;
    border-radius: 100%;
    border: 2px solid black;
}
.statusBall {
    position: absolute;
    top: 0;
    right: 0;
    background-color: lime;
    height: 25px;
    width: 25px;
    border-radius: 100%;
    border: 3px solid black;
    margin: 5px;
    animation: blinking 3s linear infinite;
}

@media (max-width: 880px) {
    header {
        height: 200px;
    }

    .cv {
        top: 70%;
        left: 200px;
    }
    .nav-link {
        top: 70%;
        left: 20px;
    }

    .pasfoto {
        display: none;
    }
    .statusBall {
        display: none;
    }
}

.intro {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto auto;
    background: linear-gradient(to top, rgba(93, 202, 226, 0.5), rgba(255, 255, 255, 0.7));
    border-bottom: 2px solid #333;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 20px;
    min-height: 90vh;
    position: relative;
}

.intro div {
    background-color: #1e5f74;
    color: white;
    margin: 10px;
    padding: 15px;
    border-radius: 15px;
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.intro div:hover {
    transform: scale(1.05, 1.05);
    box-shadow: 7px 7px 15px rgba(127, 127, 127, 0.5);
}
.intro div a {
    color: #7bd9ff; 
}
.intro div a:hover {
    color: #00b6ff;
}
.intro div a:active {
    color: #ff3434;
}

.overmij {
    grid-column: 1 / span 2;
    grid-row: 1;
    justify-self: start;
    align-self: start;
}

.stage {
    grid-column: 2 / span 2;
    grid-row: 3;
    justify-self: center;
    align-self: end;
}

.gloobPartial {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
    align-self: start;
}

/* responsive fallback: stack vertically with full width */
@media (max-width: 768px) {
    .intro {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        height: auto;
    }
    .intro div {
        width: 100%;
        margin: 5px 0;
    }
}
.gloobButton {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.gloobButton:hover {
    transform: scale(1.2, 1.2);
}
.gloob {
    transform: scaleX(-1);
}

.projectenHeader {
    height: 100px;
    background: linear-gradient(to left, rgba(44, 137, 168), rgba(30, 95, 116));
    align-content: center;
    text-align: center;
    border-bottom: 2px black solid;
    position: sticky;
    top: 0;
    z-index: 100;
}

.projecten {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 70vw;
    margin: 10vh 0 15vh 0;
}

.card {
    margin: 15px;
    width: 23rem;
    border: 1px black solid;
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}
@media (min-width: 1460px) {
    .card {
        width: 30rem
    }
}
.card:hover {
    box-shadow: 7px 7px 15px rgba(127, 127, 127, 0.5);
    transform: scale(1.05, 1.05);
}
.card a {
    transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out;   
}
.card a:hover {
    transform: scale(1.2, 1.2);
    margin: 0 10px 0 10px;
}
.card img {
    object-fit: contain;
    max-height: 250px;
}

/* alle skills */
.skillbar {
    margin: 15px 0 0 15px;
    cursor: default;
    text-align: center;
}
.skill {
    color: white;
    border-radius: 15px;
    width: fit-content;
    padding: 7px;
}
.html { background-color: rgb(205, 89, 53); }
.css { background-color: rgb(49, 109, 172); }
.js { background-color: rgb(226, 187, 73); }
.php { background-color: rgb(82, 93, 145); }
.mysql { background: linear-gradient(to right, rgb(40, 95, 134) 50%, rgb(235, 159, 59) 50%); }
.pma { background: linear-gradient(to right, rgb(82, 93, 145) 50%, rgb(235, 159, 59) 50%); }
.sqlite { background: rgb(15, 128, 204); }
.kotlin { background: rgb(177, 37, 234) }
.bootstrap { background-color: rgb(121, 31, 235); }
.scss { background-color: hotpink; }

/*#fish_orange {*/
/*    position: fixed;*/
/*    background-image: url('../images/flying_fish_orange.svg');*/
/*    width: 75px;*/
/*    height: 80px;*/
/*    transform: scale(1.5, 1.5);*/
/*}*/

/*#fish_green {*/
/*    position: fixed;*/
/*    background-image: url('../images/flying_fish_green.svg');*/
/*    width: 75px;*/
/*    height: 80px;*/
/*    transform: scale(1.5, 1.5);*/
/*}*/

footer {
    display: flex;
    color: rgba(144, 144, 144, 0.827);
    background-color: rgb(54, 54, 54);
    height: 20vh;
    justify-content: center;
}

footer div {
    height: 100%;
    align-content: center;
    margin: auto 20px auto 20px;
}
.socials {
    text-align: center;
}