body
{
    /* font-family: 'Titillium Web', sans-serif; */
    /* font-family: 'Quicksand', sans-serif; */
    font-family: 'Lora', serif;
    /* font-family: 'Oswald', sans-serif; */
    /* font-family: 'Staatliches', cursive; */
    
    /* font-family: 'Maven Pro', sans-serif; */
    scroll-behavior: smooth;
    /* box-sizing: border-box; */    
}

::-webkit-scrollbar
{
    width: 0.75vw;
}

/* ::-webkit-scrollbar-button
{
    background-color: slategray;
    
} */

::-webkit-scrollbar-track
{
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
    background-color: #1F487E;
    border-radius: 25px;
    /* outline: 1px solid slategrey; */
}

::-webkit-scrollbar-corner {

    background-color: #cc2366;
    color: #fff;
}

.add-new
{
    /* position: absolute; */
    position: relative;
    top: 95%;
    left: 90%;
    z-index: 100;
}


/* theme: #254666 */
/*  theme-c: #91142f */

/* new theme: #112a41 */

#welcomee
{
    background: url('../illus/bricks.svg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    
} 

/* @keyframes bg-w
{
    0% {
        background: url('../illus/welcome-01.svg');
        background-size:cover;
        background-attachment: fixed;
        background-position: bottom;
        background-repeat: no-repeat;
    }
    10% {
        background: url('../illus//welcome-02.svg');
        background-size:cover;
        background-attachment: fixed;
        background-position: bottom;
        background-repeat: no-repeat;
    }
    20% {
        background: url('../illus//welcome-03.svg');
        background-size:cover;
        background-attachment: fixed;
        background-position: bottom;
        background-repeat: no-repeat;
    }
    30% {
        background: url('../illus//welcome-04.svg');
        background-size:cover;
        background-attachment: fixed;
        background-position: bottom;
        background-repeat: no-repeat;
    }
    40% {
        background: url('../illus/welcome-05.svg');
        background-size:cover;
        background-attachment: fixed;
        background-position: bottom;
        background-repeat: no-repeat;
    }
    50% {
        background: url('../illus//welcome-06.svg');
        background-size:cover;
        background-attachment: fixed;
        background-position: bottom;
        background-repeat: no-repeat;
    }
    60% {
        background: url('../illus/welcome-05.svg');
        background-size:cover;
        background-attachment: fixed;
        background-position: bottom;
        background-repeat: no-repeat;
    }
    70% {
        background: url('../illus/welcome-04.svg');
        background-size:cover;
        background-attachment: fixed;
        background-position: bottom;
        background-repeat: no-repeat;
    }
    80% {
        background: url('../illus/welcome-03.svg');
        background-size:cover;
        background-attachment: fixed;
        background-position: bottom;
        background-repeat: no-repeat;
    }
    90% {
        background: url('../illus/welcome-02.svg');
        background-size:cover;
        background-attachment: fixed;
        background-position: bottom;
        background-repeat: no-repeat;
    }
    100% {
        background: url('../illus/welcome-01.svg');
        background-size:cover;
        background-attachment: fixed;
        background-position: bottom;
        background-repeat: no-repeat;
    }
} */

.color-pick
{
    background-color: #05192d;
}

.text-theme
{
    color: #0d213a !important;
}

.bg-theme
{
    /* background-color: #030f24 !important; */
    /* background-color: #0d213a; */
    background-color: #1D3461;
    color: #fff;
}

.bg-theme-sec
{
    background-color: #91142f;
}

.border-theme-right
{
    border-right: 0.5em solid #91142f;
}

.bg-blue
{
    background-color: #1da1f2;
}

.bg-black
{
    background-color: #000;
}

.bg-gray
{
    background-color: #e6e6e6;
}

.bg-black-r
{
    background-color: #fff;
    color: #000;
    transition: all 0.5s ease;
}

.social-box
{
    height: 35vh;
    width: 35vh;
}



.bg-black-a
{
    background-color: #000;
    color: #fff;
    transition: all 0.5s ease;
}

.img-box-wrapper
{
    height: 45vh;
    width: 30vw;
}

p.gpa
{
    font-family: 'Staatliches', cursive;
}

.work-box
{
    transform: scale(1);
    transition: all 0.5s;
}

.work-box:hover
{
    transform: scale(1.05);
    transition: all 0.5s;
}

.img-box
{   height: 100%;    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.img-box-txt
{
    opacity: 0;
    background-color: hsla(0, 1, 10%, 0.5);
    font-family: 'Oswald', sans-serif;
}

.img-box:hover .img-box-txt
{
    opacity: 1;
    background-color: hsla(0, 0%, 0%, 0.75);
    transition: opacity 0.45s;
}

.edu-box
{
    background-color: #fff;
    color: #000;
    transition: all 0.5s;
}

.edu-box:hover
{
    background-color: #1F487E;
    color: #fff;
    transition: all 0.5s;
}

.skill-star
{
    color: #3891A6;
    transform: scale(1);
    transition: all 0.5s;
}

.skill-star:hover
{
    color: #1D3461;
    transform: scale(1.1);
    transition: all 0.5s;
}

#footer
{
    min-height: 50vh;    
    background-color: #1D2D44;
    /* font-family: 'Oswald', sans-serif; */

}

.instagram
{ 
    /* width:100px; height:100px; */
    background: #f09433; 
    background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
    background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
}

.logo
{
    max-height: 10vh;
}

.col-img
{
    height: auto;        
    max-width: 100%;
    width: auto;      
}

.card-img
{
    width: auto;
    height: 50vh;
}

.col-def-img
{
    border-radius: 50%;
    /* max-height: 100%; */
    transform: scale(0.5);
    overflow: hidden;
    max-height: 100%;
    width: auto;
}

.col-default
{
    max-height: 100%;
    overflow: hidden;
}

.fullsize
{
    /* max-height: 100vh; */
    min-height: 100vh;
    max-height: auto;    
    max-width: 100vw;
    width: 100vw;
}

.fullsize_n
{
    height: 95vh;
    width: 100vw;
}

.fullsize-strict
{
    max-height: 90vh;
    max-width: 100vw;
}

.bg-img-wrapper
{
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.row-bg
{
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    /* filter: blur(1px); */
    z-index: 0;
}

.row-bg-i
{
    filter: blur(0);
    z-index: 10;
    background-color: rgba(44, 37, 37, 0.5);

}

#welcomee
{
    /* background: url('../images/web-bg-04.jpg');   */
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    /* filter: grayscale(1); */
}

.profile-img-wrapper
{
    /* top: 50% ;
    left: 50%;
    transform: translate(-50%, -50%); */
    max-height: 30vh;
    max-width: 30vh;
    border-radius: 50%;
    overflow: hidden;
    /* position: absolute; */
}

.profile-img
{
    
    /* top: 50%;
    left: 50%; */
    /* margin: auto; */
    /* position: relative; */    
    max-height: 60vh;
    max-width: 100%;
    height: auto;    
    transform: scaleX(1);
    transition: transform 0.5s;
    /* filter: grayscale(90%); */
}

.about-text
{
    transform: scaleX(1);
    transition: all 0.5s;
}

.about-text-flip
{
    transform: scaleX(-1);
    transition: all 0.5s;
}

.profile-img-flip
{
    transform: scaleX(-1);
    transition: transform 0.5s;
}

.profile-img-def
{
    max-width: 100%;
    max-height: 100%;
}

.profile-img-def img
{
    max-width: 100%;
    max-height: 100%;
}

.profile-img img
{
    max-height: 60vh;
    max-width: 100%;
    height: auto;   
}

/* .profile-img:hover {

    transform: scale(1.1);
    /* border: 4px solid white; */
    
    /* transition: border 2s ease-in-out; */
    /* animation: img-b 10s linear;
} */
 
@keyframes img-g {

    20% {
        border-top: 10px solid white;
    }

    40% {
        border-left: 10px solid white;
    }

    80% {
        border-bottom: 10px solid white;
    }

    100% {
        border-right: 10px solid white;
    }

}


.def-hr
{
    height: 1px;
    width: 0%;
    margin: auto;
    background-color:#a8a8a8;
    animation: hr 5s ease infinite;
}

@keyframes hr
{
    0% {

        width: 5%;
    }

    25% {

        width: 40%;
    }

    50% {

        width: 75%;
    }

    75% {

        width: 40%;
    }

    100% {

        width: 5%;
    }
}


/* li.h4::before
{
    content: "\2911 ";
    color: #f0ad4e;
} */

#projects img
{
    max-height: 100%;
    width:100%;
    max-width: 100vw;
}

/* Blog page */
.blog-hero
{
    min-height: 70vh;
    width: 100%;
    height: auto;
    /* max-height: 70vh; */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.blog-hero-txt
{
    background-color: hsla(0, 0%, 0%, 0.55);
    color: #fff;
}

.blog-hero-caption
{
    font-family: 'Nanum Gothic', sans-serif;
}

.blog-content-img img
{
    max-width: 30vw;
    height: auto;
    max-height: 60vh;
}

.blog-links a
{
    font-family: 'Oswald', sans-serif;   
}

/* about */

.about-link
{
    font-family: 'Nanum Gothic', sans-serif;
}

.about-link:after
{
    border-bottom: 0;
    border-bottom-width: 0;
}

.about-link:hover
{
    border-bottom: 2px solid #000;    
    border-bottom-width: 100%;
    transition: all 0.25s;
}

@media screen and (max-width: 960px)
{
    
    .blog-content-img img
    {
        max-width: 60vw;
    }

}