@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

* {
    margin: 0;
    padding: 0;
}

.header {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    gap: calc(1rem - 5px);
    grid-template-rows: 85px;
    width: 100%;
}

.header-left,
.header-center,
.header-right {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
}

.header-left,
.header-left-mobile {
    justify-content: flex-start;
    border-right: none;
}

#profile-picture {
    border-radius: 10%;
}

.link:link {
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    align-items: center;
}

.header:link,
.header:visited {
    font-weight: 700;
}

/*.header:visited {
    color: blue;
}*/

.header-right {
    justify-content: flex-end;
    border-left: none;
}

.actual-tab {
    font-size: 1rem;
    text-decoration: underline;
}

#dark-light-mode-svg {
    animation: rotation 7.5s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.dark-light-mode {
    padding: 10px 20px 10px 10px;
    border: none;
}

.index-title {
    font-size: 1.5rem;
    margin-left: 10px;
}

@media only screen and (min-width: 50px) and (max-width: 700px) {
    .header-left {
        display: none;
        visibility: hidden;
    }

    .header-left-mobile {
        display: flex;
        visibility: visible;
        font-size: calc(1rem - 2px);
        /*To change in future*/
        -webkit-tap-highlight-color: transparent;
    }

    .header-center {
        font-size: calc(1rem - 4px);
    }

    .header-center {
        display: none;
        visibility: hidden;
    }

    .header-center-mobile {
        display: grid;
        visibility: visible;
        grid-template-columns: 1.5fr 1.5fr 1fr;
        margin-left: calc(20% - 1rem);
        justify-content: center;
        text-align: center;
        font-size: calc(1rem - 4px);
    }

    .header-center-mobile > * {
        display: inline-block;
        text-align: center;
        /* Find another solution for blue thing not centered */
        -webkit-tap-highlight-color: transparent;
    }

    #profile-picture {
        height: 60px;
        width: 30px;
        border-radius: 5px;
    }

    #dark-light-mode-svg,
    #about-me-svg,
    #best-projects-svg,
    #random-project-svg {
        width: 30px;
        height: 30px;
    }

    #dark-light-mode-svg {
        margin-top: 4px;
    }
}

@media only screen and (min-width: 700px) {
    .header-left {
        display: flex;
        visibility: visible;
    }

    .header-left-mobile {
        display: none;
        visibility: hidden;
    }

    .header-center-mobile {
        display: none;
        visibility: hidden;
    }

    .header-center {
        display: grid;
        visibility: visible;
        grid-template-columns: repeat(6, 1fr);
        padding: 0;
        justify-content: center;
        align-items: center;
    }

    #profile-picture {
        height: 60px;
        width: 30px;
        border-radius: 10%;
    }
}