body {
    font-family: Georgia, 'Times New Roman', Times, serif;
    background: var(--bg-color);
    height: 70vh;
}

* {
    margin: 0;
    padding: 0;
    border: 0;
}

h1, h2, h3 {
    color: var(--h1-color);
}

p {
    color: var(--p-color);
}

.center-this {
    height: 80vh;
    display: grid;
    justify-content: center;
    align-items: center;
}

.first-container {
    display: grid;
    justify-content: center;
    align-items: center;
}

.container {
    display: grid;
    align-items: center;
    width: ;
    height: 86vh;
    margin: 0;
}

.profile {
    text-align: center;
}

/* .img {
    display: flex;
    justify-content: center;
} */

.img img:hover {
    animation: var(--animation) 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.img img {
    width: 10%;
    height: auto;
    border-radius: 50%;
}

a {
    text-decoration: none;
}

.text {
    height: 80vh;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    animation-name: var(--animation);
    animation-duration: 5s;
    animation-iteration-count: infinite;
    /* animation-name:umfla;
    animation-duration:2s; */
}

.text h1 {
    font-size: 70px;
}

h1:hover {
    animation-name: mareste;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

footer a, p {
    display: grid;
    justify-content: center;
    align-items: center;
}

.hamburger {
    display: none;
}

/*making progress bar for skills so easy*/

::-webkit-scrollbar {
    background-color: red;
    width: 1px;
}

::-webkit-scrollbar-thumb {
    background: yellow;
}

.skill-progres-bar {
    width: 60vw;
    height: 10px;
    background-color: red;
}

.skill-progres-bar p {
    position: absolute;
    margin: auto;
    /* right: 90px;
    margin-top: -58px; */
}

.skill-actual-progres {
    width: 90%;
    height: 10px;
    background-color: blue;
}

.flex {
    display: flex;
    justify-content: space-between;
}