:root {
  --blue-main: #16bbff;
}

.row{
    height: calc(100vh - 100px);
    margin-top: 10vh;
}

.whois{
    background-image: linear-gradient(10deg, #4542ff 30%, transparent 30%), linear-gradient(-24deg, #67d689 30%, transparent 30%);
}

.me img{
    width: 15%;
    height: auto;
}

@media only screen and (max-width: 500px){
    .me img{
        width: 35%;
        height: auto;
    }
}

@media only screen and (min-width: 501px) and (max-width: 800px){
    .me img{
        width: 25%;
        height: auto;
    }
}

.terminal h2{
    position: absolute;
    left: 0;
    bottom: 7vh;
    border-right: #00ff00;
    overflow: hidden;
    white-space: nowrap;
    animation: typing 4.5s steps(40,end), blink-caret .75s step-end infinite;
    color: #ffffff;
    font-family: "Courier New";
    font-size: 1em;
}

@keyframes typing {
    from { width: 0}
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent}
    50% { border-color: #00ff00; }
}

.education{
    background: linear-gradient(-8deg, #fe8c00 30%, transparent 30%);
}

.education .progress{
    margin-top: 1em;
}

.education .progress::before {
    content: var(--year);
    white-space: pre;
    padding: 0 0.3rem;
}

.progress-bar-title{
    float: left;
    margin-left: -3em;
    color: black;
    position: absolute;
}

.sticky-top{
    position:sticky !important;
}

.experiencies{
    overflow: scroll;
    background: linear-gradient(120deg, #fe8c00 60%, #f83600 40%);
}

.experiencies .card, .projects .card{
    overflow: scroll;
    width: 20rem;
    background-color: #202428;
    color: white;
}

.experiencies .card:hover{
    transform: scale(1.05);
    transition: 1s ease-out;
}

.projects{
    overflow: scroll;
    background-color: #4542ff;
    position: relative;
}

.projects .row, .projects h1{
    z-index: 2;
    position: relative;
}

.skills{
    height: 120vh;
    background-color: #00ad6f;
    background-image: linear-gradient(white 2px, transparent 2px),
    linear-gradient(90deg, white 2px, transparent 2px),
    linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

.skills .card{
    width: 35rem;
    margin: 1rem;
    overflow: scroll;
    background-color: #202428;
    color: white;
}

.skills .row{
    overflow: scroll;
}

.hobbies a{
    color: var(--blue-main);
}

.contact .container{
    text-align: center;
}

.contact .container i{
    margin: 2rem;
    font-size: 2rem;
}

.contact{
    background-color: #202428;
    color: white;
}

.contact a{
    color: var(--blue-main);
}

.text-muted{
    color: #d7d6d3 !important;
}

.additional{
    background-image: linear-gradient(10deg, #1b1e21 60%, transparent 60%), linear-gradient(-30deg, #202428 30%, transparent 30%);
}

.additional h1{
    color: var(--blue-main);
}

.additional a{
    color: white;
}

.dots{
    position: absolute;
    top: 3rem;
    left: 2rem;
    z-index: 0;
}

.dot {
    height: 25px;
    width: 25px;
    background-color: #fff;
    border-radius: 50%;
    display: inline-block;
}

.al-shadow{
    box-shadow: rgb(22, 187, 255) 0px -3px 0px inset !important;
}

.hl-shadow{
    box-shadow: rgb(22, 187, 255) 0px -10px 0px inset !important;
}

wired-button::before{
    content: "* ";
    color: chartreuse;
}