@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;600&display=swap');

* {
    margin: 0;
    padding: 0;
}


/* Variables for day and night mode */
:root {
    --primaryColor: #f0f0f0;
    --secondaryColor: #728AB7;
}

@media (prefers-color-scheme: dark) {
    :root {
        --primaryColor: #4c5d7c;
        --secondaryColor: #f8f8f8;
    }
}

@media screen and (max-width: 1100px) {
    .container {
        flex-direction: column;
    }
    .info {
        width: 90%;
    }
    .buttons {
        justify-content: center;
    }
    .link {
        padding: 0.8rem;
    }
    .projects {
        flex-direction: column;
        align-items: center;
        width: 90%;
        margin-bottom: 30px;
    }
}

@media screen and (min-width: 1100px) {
    .container {
        max-width: 90vw;
        height: 100vh;
        margin: auto;
    }
    .info {
        width: 55%;
        margin-right: 5%;
    }
    .link {
        padding-right: 1rem;
    }
    .projects {
        width: 100%;
    }
}

body {
    background-color: var(--primaryColor);
    font-family: 'Rubik', sans-serif;
    font-size: max(0.8vw, 15px);
    color: var(--secondaryColor);
}

.container {
    width: 100%;
    display: flex;
    align-items: center;
}

.projects {
    display: flex;
}

#name {
    font-size: max(3vw, 3rem);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#desc {
    line-height: 1.5;
    padding-bottom: 1rem;
}

.buttons {
    width: 100%;
    display: flex;
}

i {
    font-size: 23px;
}

button {
    padding: 1em 0.7em;
    font-size: max(0.8vw, 15px);
    font-weight: bold;
    background: var(--primaryColor);
    border: none;
    border-radius: .5rem;
    color: var(--secondaryColor);
    cursor: pointer;
    transition: .2s ease-in-out;
    box-shadow: -6px -6px 14px rgba(255, 255, 255, .7),
                -6px -6px 10px rgba(255, 255, 255, .5),
                6px 6px 8px rgba(255, 255, 255, .075),
                6px 6px 10px rgba(0, 0, 0, .15);
}

button:hover {
    box-shadow: -2px -2px 6px rgba(255, 255, 255, .6),
                -2px -2px 4px rgba(255, 255, 255, .4),
                2px 2px 2px rgba(255, 255, 255, .05),
                2px 2px 4px rgba(0, 0, 0, .1);
}

button:active {
    box-shadow: inset -2px -2px 6px rgba(255, 255, 255, .7),
                inset -2px -2px 4px rgba(255, 255, 255, .5),
                inset 2px 2px 2px rgba(255, 255, 255, .075),
                inset 2px 2px 4px rgba(0, 0, 0, .15);
}

@media (prefers-color-scheme: dark) {
    button {
        box-shadow: -6px -6px 14px rgba(51, 62, 83, 0.5),
                    -6px -6px 10px rgba(51, 62, 83, .3),
                    6px 6px 8px rgba(51, 62, 83, .3),
                    6px 6px 10px rgba(27, 27, 27, 0.4);
    }

    button:hover {
        box-shadow: -2px -2px 6px rgba(51, 62, 83, .6),
                    -2px -2px 4px rgba(51, 62, 83, .4),
                    2px 2px 2px rgba(51, 62, 83, .05),
                    2px 2px 4px rgba(0, 0, 0, .1);;
    }

    button:active {
        box-shadow: inset -2px -2px 6px rgba(51, 62, 83, .7),
                    inset -2px -2px 4px rgba(51, 62, 83, .5),
                    inset 2px 2px 2px rgba(51, 62, 83, .075),
                    inset 2px 2px 4px rgba(0, 0, 0, .15);
    }
}