@import url('https://fonts.googleapis.com/css2?family=Andada+Pro:ital,wght@1,800&family=Arvo&family=Bree+Serif&family=Libre+Baskerville:wght@700&family=Nunito:wght@300&family=Orelega+One&family=PT+Serif:ital,wght@1,700&family=Pacifico&family=Roboto+Slab:wght@600&family=Signika+Negative:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Andada+Pro:ital,wght@1,800&family=Arvo&family=Bree+Serif&family=Courgette&family=Libre+Baskerville:wght@700&family=Nunito:wght@300&family=Orelega+One&family=PT+Serif:ital,wght@1,700&family=Pacifico&family=Roboto+Slab:wght@600&family=Signika+Negative:wght@300&display=swap');

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: 'Roboto Slab', serif;
    /* font-family: 'Orelega One', cursive; */
}

body {
    /* background: linear-gradient(rgb(10, 1, 62), rgb(42, 0, 56), rgb(21, 1, 22)); */
    background-color: rgb(11, 11, 46);
    height: 97vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

form input {
    min-height: 5vh;
    min-width: 30vw;
    border-radius: .2rem;
    outline: none;
    border: none;
    caret-color: aqua;
    padding-left: .5rem;
    margin-bottom: 1rem;
    background: linear-gradient(229deg, rgb(16 11 44), rgb(12 19 74), rgb(6 9 36));
    color: white;
    border: .2px solid rgb(181, 178, 178);
}

input::placeholder {
    /* color: white; */
}

.card {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 1rem 1rem;
    color: white;
    background: linear-gradient(229deg, rgb(6 9 36), rgb(16 11 44), rgb(12 19 74));
    border-radius: .2rem;
    width: 50rem;
}

img {
    width: 16%;
    border-radius: 100%;
}

ul {
    padding: 0;
    margin: 0;
    display: flex;
    gap: .5rem;
}

ul li {
    list-style: none;
}

#repos {
    margin-top: .7rem;
    margin-top: 0.7rem;
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

#repos a {
    text-decoration: none;
    color: white;
    background-color: rgb(5, 7, 101);
    padding: .4rem .5rem;
    border-radius: .2rem;
}

strong {
    padding: 0.4rem
}

#error-message {
    color: white;
    padding: .3rem 2rem;
    border-radius: .2rem;
    display: none;
}

.user-info h2,
p {
    margin-bottom: 0.3rem;
}

@media screen and (max-width:820px) {

    .card {
        width: auto;
        margin: 0px 1rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 0rem;
    }

    .user-info p {
        margin-bottom: .5rem;
    }

    .user-info h2 {
        margin-top: .5rem;
    }

    ul {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    img {
        width: 25%;
        border-radius: 100%;
    }

    input {
        width: 15rem;
    }

    #repos {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body {
        height: auto;
        margin: 1rem 0;
    }
}

@media screen and (min-width:0px) and (max-width:370px) {
    body {
        width: 140vw;
        margin-top: 4rem;
    }
}