@charset "utf-8";

:root {

    --accent: #0A5F91;
    --bgcolor: #2DBAFF;

    --grad-20 : linear-gradient(135deg, red 33.3%,          orangered 66.67%,         darkorange 100%);
    --grad-40 : linear-gradient(135deg, red 16.7%,          orangered 33.34%,         darkorange 50%,
                                        orange 66.67%,      gold 83.34%,              yellow 100%);
    --grad-60 : linear-gradient(135deg, red 11.1%,          orangered 22.22%,         darkorange 33.33%,
                                        orange 44.44%,      gold 55.55%,              yellow 66.66%,
                                        greenyellow 77.77%, lawngreen 88.88%,         lime 100%);
    --grad-80 : linear-gradient(135deg, red 8.33%,          orangered 16.67%,         darkorange 25%,
                                        orange 33.32%,      gold 41.65%,              yellow 50%,
                                        greenyellow 58.31%, lawngreen 66.64%,         lime 75%,
                                        springgreen 83.33%, mediumspringgreen 91.66%, aqua 100%);
    --gradient: linear-gradient(135deg, red 6.67%,          orangered 13.34%,         darkorange 20%,
                                        orange 26.67%,      gold 33.34%,              yellow 40%,
                                        greenyellow 46.67%, lawngreen 53.34%,         lime 60%,
                                        springgreen 66.67%, mediumspringgreen 73.34%, aqua 80%,
                                        turquoise 86.67%,   mediumturquoise 93.34%,   darkturquoise 100%);
    --grad-100: var(--gradient);

}

.basic, .beginner {
    background: var(--grad-20);
    min-width: 0%;
    max-width: 20%;
    width: 15%;
}
.novice {
    background: var(--grad-40);
    min-width: 21%;
    max-width: 40%;
    width: 35%;
}
.intermediate {
    background: var(--grad-60);
    min-width: 41%;
    max-width: 60%;
    width: 55%;
}
.advance, .advanced {
    background: var(--grad-80);
    min-width: 60%;
    max-width: 80%;
    width: 75%;
}
.expert {
    background: var(--grad-100);
    min-width: 80%;
    max-width: 100%;
    width: 100%;
}
.popover-header { font-size: .6rem;  }
.popover-body { font-size: .65rem; }

.card-header { padding: .75rem .75rem .75rem 1.25rem; }
.form-control { background-color: transparent; }
.form-control:active, .form-control:focus, .form-control:hover { background-color: white }
.form-group { margin-bottom: 0.5rem; }
.list-group-item { padding: .75rem .5rem; }


*::-webkit-scrollbar { background-color: #2DBAFF; width: .25rem; }
*::-webkit-scrollbar-thumb { background-color: #0A5F91; }
*:not(body)::-webkit-scrollbar { border-top-right-radius: .15rem; }
*:not(body)::-webkit-scrollbar-corner, *:not(body)::-webkit-resizer { background-color: #0A5F91; }
*:not(body)::-webkit-scrollbar-corner, *:not(body)::-webkit-resizer { border-bottom-right-radius: .15rem; }
*:not(body)::-webkit-scrollbar-thumb, *:not(body)::-webkit-scrollbar-track { border-top-right-radius: .15rem; }

html { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body { min-width: 320px;/* font-size: calc(16px + 1vw);line-height: calc(1.1em + 0.5vw); */ }
body::-webkit-scrollbar-track { background-color: #2DBAFF; box-shadow: inset 0 0 .125rem #0A5F91; }
h1,h2,h3,h4,h5,h6 { font-family: 'Open Sans', sans-serif; }
a,button,link,nav,select,optgroup,option { font-family: 'Segoe UI', sans-serif; }
p,label,ul,ol,li,input,textarea { font-family: 'Segoe UI', sans-serif; }


header {
    background-image: linear-gradient(120deg, #155799, #159957);
    background-image: url(https://drive.google.com/uc?id=107nSW3VFPK7AeYA5Tqg4xztRKHc9Y6cp), linear-gradient(120deg, #2DBAFF, #0A5F91);
    background-position: center top;
    background-size: cover;
    color: #fff;
    padding-top: 2rem;
    padding-bottom: 2rem;
}
header > div#myphoto-box {
    position: relative;
    margin: 0 auto;
    min-width: 120px;
    max-width: 240px;
    width: 15%;
    z-index: 1;
}
header > div#myphoto-box > img#pic { border: 8px solid white; }
header > div#profile-box { margin-top: 1.5rem; }
header > div#profile-box > #profile-name { opacity: .9; padding: 1rem 1rem 0 }
/* header > div#profile-box > #profile-desc { opacity: .6; padding: 0 1rem }
header > div#profile-box > #profile-desc > * { display: inline-block; } */


footer {
    background-image: linear-gradient(120deg, #2DBAFF, #0A5F91);
    margin: 0 -15px;
    padding: 1rem;
}
footer > div { margin-bottom: .5rem; margin-top: .5rem;}
footer > div#social > ul > li > label {
    overflow-x: hidden;
    padding-left: .5rem;
}


section > .head {
    background-image: linear-gradient(120deg, #159957, #155799);
    background-image: linear-gradient(120deg, #0A5F91, #2DBAFF);
      color: white;
     margin: 0 -15px 1rem;
    padding: .75rem 1rem 1rem;
    text-transform: lowercase;
}

section > .body { margin: 0 1rem 2rem; }
section > .body > p { padding: 0; }
section > .body > blockquote {
    border-right: .25rem solid maroon;
     margin: 1rem 0rem;
    padding: .5rem 1.5rem .5rem 0;
}

section#skills > .body > ul {
    border: .05rem solid rgba(0, 0, 0, 0.2);
    border-radius: .25rem;
    list-style: none;
    padding-left: 0;
    padding: 1rem;

    min-width: 250px;
    width: 48.5%;
    display: inline-block;
}

section#skills > .body > ul > li {
    box-shadow: 0 8px 8px -4px rgba(0, 0, 0, 0.3);
    display: flex;
    margin-bottom: 1rem;
    transition: box-shadow 200ms ease-out;
}
section#skills > .body > ul > li:last-child {
    margin-bottom: 0;
}
section#skills > .body > ul > li:hover, section#skills > .body > ul > li:active {
    box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.3);
    transition: box-shadow 200ms ease-in;
}

section#skills > .body > ul > li > a > div.icon {
    border: .05rem solid rgba(0, 0, 0, .2);
    border-right: none;
    border-radius: .125rem;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    padding: .25rem;
}
section#skills > .body > ul > li > a > div.icon > img {
    object-fit: contain;
    object-position: 50% 50%;
    width: 1.5rem;
}

section#skills > .body > ul > li > div.proficiency {
    background-color: rgba(30, 45, 60, 1);
    background-color: rgba(32, 32, 32, 1);
    background-color: rgba(27, 42, 47, 1);
    border-bottom-right-radius: .125rem;
    border-top-right-radius: .125rem;
    color: white;
    text-align: right;
    width: calc(100% - 1.5rem);

    display: flex;
    align-items: center;
    justify-content: left;
}
section#skills > .body > ul > li > div.proficiency > div {
    border-bottom-right-radius: .125rem;
    border-top-right-radius: .125rem;
    height: .5rem;
    padding: 0.25rem;
    vertical-align: middle;
}


@media (min-width: 320px) {
    html{ font-size: 1.25rem; }
} @media (max-width: 575px) {
    header > div#profile-box { background-color: rgba(0, 0, 0, .6); }
} @media (min-width: 576px) {
    html{ font-size: 1.05rem; }
    header > div#profile-box { margin-top: .35rem; }
} @media (min-width: 768px) {
    html{ font-size: 1.25rem; }
    header > div#profile-box { margin-top: .85rem; }
} @media (min-width: 992px) {
    html{ font-size: 1.50rem; }
} @media (min-width: 1200px) {
    html{ font-size: 1.50rem; }
} @media (min-width: 320px) and (max-width: 640px) {
    section#skills > .body > ul { width: 100%; }
}