*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.main-container a{
    text-decoration: none;
}

.padding{
    padding-left: 150px;
    padding-right: 150px;
    padding-top: 30px;
    padding-bottom: 30px;
}


.main-container .slideshow-container{
    position: relative;
    margin: auto;
}

.main-container .slideshow-container .mySlides{
    display: none;
}

.main-container .slideshow-container .mySlides .text{
    color: #f2f2f2;
    padding: 8px 12px;
    position: absolute;
    bottom: 40%;
    width: 100%;
    text-align: center;
}

.main-container .slideshow-container .mySlides .text{
    transform: translateX(-100px);
    opacity: 0;
    animation: move-in 1s ease forwards;
}

.overlay{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: rgb(5, 5, 37);;
    opacity: 0.6;
}
  
.fad{
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade{
    from{opacity: .4}
    to{opacity: 1}
}

@keyframes move-in{
    to{ transform: translateX(0);
        opacity: 1;}
}

.main-container .experience{
    width: 100%;
    background-color: #f2f2f2;
}
.main-container .experience .excolor.start{
    background-color: red;
    width: 0;
    animation: excolor 3s ease forwards;
}
@keyframes excolor{
    0%{
        width: 0%;
    }
    
    100%{
        width: 75%;
    }
}
.main-container .experience .skillscolor.start{
    background-color: red;
    width: 0;
    animation: skillscolor 3s ease forwards;
}
@keyframes skillscolor{
    0%{
        width: 0%;
    }
    
    100%{
        width: 61%;
    }
}
.main-container .experience .margincolor.start{
    background-color: red;
    width: 0;
    animation: margincolor 3s ease forwards;
}
@keyframes margincolor{
    0%{
        width: 0%;
    }
    
    100%{
        width: 54%;
    }
}
.main-container .experience .speedcolor.start{
    background-color: red;
    width: 0;
    animation: speedcolor 3s ease forwards;
}
@keyframes speedcolor{
    0%{
        width: 0%;
    }
    
    100%{
        width: 100%;
    }
}

.font{
    font-family: 'Times New Roman', Times, serif;
}

.blue{
    color: rgb(29, 29, 132);
}

@media only screen and (max-width:1000px) {
    .main-container .hide-sm{
        display: none;
    }
    .main-container .hide-lg{
        display: flex;
    }

    .padding{
        padding-left: 20px;
        padding-right: 20px;
    }
}