.small-image{
    animation: expand 1s ease-in forwards;
}

body{
    background-image: url("../images/bg.jpg");
}

nav>div>ul>li{
    font-family: custom;
    width: 15vw !important;
    text-align: center !important;
    text-transform: capitalize;
}

nav>div>ul>li:first-child{
    padding-left: 20px;
}

nav>div>ul>li:last-child{
    padding-right: 20px;
}

nav>div>ul>li{
    animation: fade-up 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}


@font-face{
    font-family: custom;
    src: url("../fonts/RibeyeMarrow-Regular.ttf");
}

@keyframes expand{
    from{
        max-height: 0px;
        max-width: 0px;
        margin-top: 0px;
    }
    to{
        margin-top:5px;
        max-height:70px;
        max-width: 70px;
    }
}

@keyframes fade-up{
    from{
        margin-top: -50px;
    }
    to{
        margin-top: 0px;
    }
}

@keyframes fade-in{
    from{
        opacity: 0;
    }
    to{
        opacity:1;
    }
}

.container{
    margin-top: 10vh;
    animation: fade-in 2s;
}


ul.dropdown-content{
    font-family: custom;
    min-width: 15vw !important;
    margin-top: 4.5vw !important;
}

.flexbox{
    display:flex;
    flex-wrap: wrap;

}

.picture{
    flex-basis: 60px;
    margin: auto;
    flex-shrink:1;
}

.picture2{
    width: 85vw !important;
    margin: auto;
    height: 400px !important;
}

.collapsible-header i.fa{
    color: rgb(99, 47, 47);
}

.text{
    flex-shrink: 1;
    flex-basis: 600px;
    margin: auto;
}

.bottom{
    margin-top: 10px;
    float: right;
}
.self-container{
    width: 85vw;
    margin: 10vh auto;
}
span.about{
    margin-left: 10px;
    font-family: custom2;
    font-size: large;
}
@font-face{
    font-family: custom2;
    src: url("../fonts/BILLY\ ARGEL\ \ WHITE.jpeg");
}

#about{
    animation: fade-in 2s ease-in forwards;
}

a.bars{
    margin-bottom:10px;
    margin-left: -10px;
}

ul#mobile-side{
    font-family: custom2;
    text-transform: capitalize;
}

div#projects{
    display: flex;
    flex-wrap: wrap;
    flex-direction:row-reverse;
    justify-content: center;
    margin-left: 100vh auto;
}

iframe{
    flex-basis:50%;
    margin: auto;
    height: 50vh;
}
.spacer{
    flex-basis: 100%;
    height: 100px;
}
.spacing{
    width: 3vh;
}

.title{
    font-family: custom !important;
    flex-basis: 100%;
    text-align: center;
    margin-bottom: 5vh !important;
    margin-top: -5vh !important;

}

.circular{
    border-radius: 10px;
    height: 370px;
    width: 360px;
    box-shadow: 10px 10px 10px 10px rgba(75, 40, 40,0.2);
    
}

#about{
    overflow: hidden;
}



.special-color{
    color: hsl(0, 0%, 6%);
    font-size: 25px;

}

.small-card{
    flex-basis:500px !important;
    /* min-height: 750px !important; */
    margin-left: 3vw !important;
    margin-right: 3vw !important;
    animation: turn-over 2s cubic-bezier(0.175, 0.885, 0.32, 1.45);
}


@keyframes turn-over{
    from{
        opacity: 0;
        transform: scale(0);
    }
    to{
        opacity: 1;
        transform: scale(1);

    }
}