* {
    padding: 0;
    margin: 0;
    scroll-behavior: smooth;
    color: white;
}

body {
    background-color: rgb(1, 1, 20);    
}

@keyframes background_animation {
    0%{
        background-position: 0% 50%;
    }
    50%{
        background-position: 50% 100%;
    }
    100%{
        background-position: 0% 50%;
    }
}

.nav_bar {
    background-color: rgb(0, 0, 0);
    font-size: 20px;
    text-align: right;
    margin: 8px;
    border: 1px solid rgb(133, 133, 2);   
    box-shadow: 0 0 15px #0056b3, 0 0 25px #0056b3;
    border-radius: 15px;
}

.nav-item {
    padding: 1px;
    border-radius: 15px;
}

.navbar_dandi {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.nav-link {

    color: white;
}

.nav-link:hover {
    border-radius: 15px;
    color: white;
    animation: bordernoic 2s step-start 1ms infinite normal;
}

.nav-link:active {    
    color: white;    
}

.nav-link:visited {    
    color: white;    
}

.nav_img {
    visibility: hidden;
}

.text_plus_img_div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#theme_toggler_emoji {    
    border-radius: 15px;
    cursor: pointer;
}

#theme_toggler_emoji:hover {
    border: 2px dotted white;
}

.current_time_php {
    font-size: 20px;
}

.about_me {
    
    display: flex;
    justify-content: space-between;
    margin: 25px 80px 40px 40px;
    padding: 25px 100px 50px 40px;
}

.about_me_text {
    font-family: 'Times New Roman', Times, serif;
    margin: 0;
    font-size: 35px;
    word-spacing: 8px;
}

#wrapper {
    font-size: 2rem;    
}

#cursor {
    display: inline-block;
    width: 20px;
    margin-left: 5px;
    animation: blinking_cursor 0.8s step-start infinite;
}

@keyframes blinking_cursor {
    50%{
        opacity: 0;
    }    
}

.about_me_lines {
    font-size: 15px;
    word-spacing: 10px;
    line-height: 40px;
    text-align: justify;    
}

.about_me_img {
    background-image: url(assets/images/my_img.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 300px;
    width: 300px;
    border: 1px dotted whitesmoke;
    border-radius: 50%;
    box-shadow: 0 0 15px #0056b3, 0 0 25px #0056b3;
    animation: bordernoic 4s 2s infinite normal;
}

.contact_me_button {
    color: whitesmoke;
    background-color: blueviolet;
    text-decoration: none;
    padding: 12px;
    border-radius: 15px;
    cursor: pointer;
    box-shadow: 0 0 15px #0056b3, 0 0 25px #0056b3;
    animation: bordernoic 4s 1s infinite normal;
}

.contact_me_button:hover {
    background-color: rgb(0, 0, 245);
}

@keyframes bordernoic {
    
    /* 10%,100%{
        border-color: #fb0094;
        box-shadow: 0 0 20px #fb0094, 0 0 30px #fb0094;
    } */
    25%,75%{
        border-color: #00f;
        box-shadow: 0 0 20px #00f, 0 0 30px #00f;        
    }
    /* 30%,80%{
        border-color: #0f0;
        box-shadow: 0 0 20px #0f0, 0 0 30px #0f0;
    }
    40%,70%{
        border-color: #ff0;
        box-shadow: 0 0 20px #ff0, 0 0 30px #ff0;
    } */
    50%,100%{
        border-color: #f00;
        box-shadow: 0 0 20px #f00, 0 0 30px #f00;
    }
}

.theme_toggler_msg {
    display: none;
    position: fixed;
    top: 90px;
    right: 20px;
    padding: 10px 15px;
    background: transparent;
    color: #fff;
    border-radius: 15px;
    font-size: 14px;
    animation: bordernoic 2s step-start 1ms infinite normal;
   
}

.download_msg {
    display: none;
    position: fixed;
    top: 100px;
    right: 20px;
    padding: 10px 15px;
    background: #333;
    color: #fff;
    border-radius: 15px;
    font-size: 14px;
}

.empty_space {
    padding: 2rem;
}

.page_divider {
    color: white;
}

.headings {
    color: white;
    text-align: center;
}

.main {
  width: 60%;
  position: relative;
}

.skills-list {
  padding: 20px;
}

.content-card {
  position: relative;
  background: linear-gradient(to bottom right, hsl(240, 1%, 25%) 3%, hsl(0, 0%, 19%) 97%);
  padding: 15px;
  padding-top: 45px;
  border-radius: 14px;
  box-shadow: 0 16px 30px hsla(0, 0%, 0%, 0.25);
  cursor: pointer;
  z-index: 1;
}

.content-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: linear-gradient(to bottom right, hsla(240, 1%, 18%, 0.251) 0%, hsla(240, 2%, 11%, 0) 100%), hsl(240, 2%, 13%);
  border-radius: inherit;
  z-index: -1;
}

.content-card {
  padding: 30px;
  padding-top: 25px;
}

.skills-item:not(:last-child) {
  margin-bottom: 15px;
}

.skill .title-wrapper {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

ul {
  list-style: none;
}

.skill .title-wrapper h3 {
  font-size: 20px;
  color: #fff;
}

.skill .title-wrapper data {
    color:gray;
    font-size: 20px;
    font-weight: 300;
}
.skill-progress-bg {
    background-color: #eee;
    width: relative;
    height: 16px;
    border-radius: 18px;
}

.skill-progress-fill {    
    background: linear-gradient(to left, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
    height: 100%;
    border-radius: 18px;
    animation: progressbar-fill 3s linear;
}

@keyframes progressbar-fill {
    from {
        width: 0;
    }

    to {
        width: width;
    }
}

#my_skills_heading, #my_projects_heading, #contact_me_heading {
    padding: 20px;
    text-align: center;
    font-size: 30px;
}

.my_skills_container {
    padding: 10px;
}

.skills {
    display: flex;
    align-items: center;
    margin: 15px;
    padding: 25px;
    border: 2px solid rgb(65, 65, 9);
}

.skill_image {
    text-align: center;
    position: relative;
}

.skill_text {
    text-align: start;
    font-size: 30px;
}

.card {
    background-color: #515151;
}

.card-text {
    /* text-align: justify; */
    font-style: italic;
    text-shadow: 2px 2px 5px rgb(0, 0, 200);
}

.my_project {
    display: flex;
    justify-content: space-between;
    margin: 20px 10px 20px 10px;
    padding: 30px;
    border: 2px solid yellow
}

.my_contact_handels{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.my_contact_handels_inside_div {
    width: 265px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.circular_for_img {
    color: blueviolet;
    border-radius: 50%;
}

.rectangle_for_text {
    display: flex;
    justify-content: start;
    align-items: center;
    height: 100px;
    width: 200px;
    color: whitesmoke;
}

#linkedin_url:hover, #twitter_url:hover, #github_url:hover, #instagram_url:hover {
    border-radius: 20%;
    padding: 0 4px 2px 4px;
    animation: bordernoic 2s step-start 1ms infinite normal;
}

.required-star {
    color: red;
    font-weight: bolder;
    font-weight: 900;
}