@font-face{
    font-family: myFont;
    src:url('LiberationSans-Bold.ttf')
}

.orange{
    color: #FFA500;
}

.OpenSansFont{
    /* font-family: 'Open Sans', sans-serif; */
    font-family: myFont;
}

.image-container {
    position: relative;
    display: inline-block;
}

.image-container img {
    border-radius: 7px; /* Smooth edges for the image */
    position: relative;
    z-index: 2;
}

.image-container::before {
    content: '';
    position: absolute;
    top: 8px; /* Adjust for shadow offset */
    left: 8px; /* Adjust for shadow offset */
    width: 100%;
    height: 100%;
    border: 1px solid #ffffff; /* Back border */
    border-radius: 7px; /* Match the image's border radius */
    z-index: 1;
}

.glitch {
    width: 300px;
    height: 340px;
    background: url('Pictures/me.jpg');
    background-size: cover;
    animation: glitch 3.5s infinite steps(1);
}
@keyframes glitch {
    0%, 100% {
        background: url('Pictures/me.jpg');
       
        background-size: cover;      
    }
    92.5% {
        background: url('Pictures/glitch1.png');
        background-size: cover; 
        opacity: 1;     
    }
    95% {
        background: url('Pictures/glitch2.png');
        background-size: cover;
        opacity: 0;
    }
    97.5% {
        background: url('Pictures/glitch3.png');
        background-size: cover;   
        opacity: 1;        
    }
}