:root{
    --ff-primaryfont: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    --clr-background: rgb(17,17,17);
    --clr-container1: rgb(28, 28, 28);
    --clr-container2: rgb(19, 19, 19);
    --clr-cardbody: rgb(41, 41, 41);
    --clr-servericon: rgb(24, 24, 24);

    --clr-title: rgb(255, 255, 255);
    --clr-text: rgb(220, 220, 220);
    --clr-iconfab: rgb(220, 220, 220);
    --clr-list: rgb(220, 220, 220);
    --clr-link: rgb(186, 216, 255);
    --clr-link-hover: rgb(0, 166, 255);

    /*Porgramming colors*/
    --clr-lua: rgb(0, 123, 255);
    --clr-cplusplus: #0067ac;
    --clr-c: #659AD3;
    --clr-csharp: rgb(138,43,226);
    --clr-javascript: #FFE873;
    --clr-typescript: #3178C6;
    --clr-perl: #3178C6;
    --clr-mysql: #00618A;
    --clr-nodejs: #53a54b;
    --clr-docker: #0073EC;
    --clr-arduino: #00979c;
    --clr-python1: #4B8BBE;
    --clr-python2: #FFE873;
    --clr-html: #e34c26;
    --clr-css1: #264de4;
    --clr-css2: #2965f1;
    --clr-ansible: #e00;

    --sb-uni: 5px 5px 9px -5px #000000;
}

body {
    background-color: var(--clr-background);
    margin: 0;
    font-family: var(--ff-primaryfont);
    font-size: var(--fs-body);
    line-height: 1.6;
    overflow: auto;
    overflow-x: hidden;
}

body::-webkit-scrollbar {
    display: none;
}

li {
    color: var(--clr-list);
}

code {
    color: rgb(255, 255, 255);
    background-color: #353535;
    border-radius: 3px;
    padding: 3px;
    box-shadow: var(--sb-uni);
  }

/* basic like background and positioning elements */

.containerscheme1 {
    background-color: var(--clr-container1);
    padding:40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.containerscheme2 {
    background-color: var(--clr-container2);
    padding:40px 0;
}

.card-title {
    color: var(--clr-title);
}

.card-text {
    color: var(--clr-text);
}

.card-body {
    background-color: var(--clr-cardbody);
    box-shadow: var(--sb-uni);
}

.devicon {
    font-size: 3rem;
    padding: 8px;
    display: inline-block;
    vertical-align: middle;
}

.devicon-img {
    max-width: 60px;
    max-height: 60px;
}

.fab {
    color: var(--clr-iconfab);
}

.workexpimg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;

    max-width: 155px;
    max-height: 155px;
    transition: max-height .25s, max-width .25s;
    width: 25vw;
    height: 25vw;
}

.workexpimg:hover {
    max-width: 165px;
    max-height: 165px;
}

.workexpcontainer {
    float: right;
    display: block;
    max-width: 185px;
    max-height: 185px;
    width: 25vw;
    height: 25vw;
    aspect-ratio: 1;

    border-radius: 3px;
    background: var(--clr-servericon);

    position:absolute;
    right:30px;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);

    box-shadow: var(--sb-uni);
}

.devlogocontainer {
    margin-right: 10px;
    display:inline-block;
    max-width: 100%;
    max-height: 100%;
    width: 100px;
    height: 100px;
}

.submylogo {
    display: flex;
    align-items:center;
    border-bottom: 3px solid var(--clr-title);
    padding: 20px;
}

.mylogo {
    margin-left: auto;
    margin-right: auto;
    width: 27.5em
}

.video-container {
    width: 50%;
    padding-top: 28.125%;
    height: 0px;
    position: relative;
}

.video-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 97.5%;
    height: 97.5%;
    box-shadow: var(--sb-uni);
}

.img-container {
    width: 50%;
    padding-top: 28.125%;
    height: 0px;
    position: relative;
}

.img-container-tall {
    width: 50%;
    padding-top: 62.5%;
    height: 0px;
    position: relative;
}

.img-hold {
    position: absolute;
    top: 0;
    left: 0;
    width: 97.5%;
    height: 97.5%;
}

.img-fluid {
    box-shadow: var(--sb-uni);
}

/* typography and colors */

@keyframes python-fade {
    0% {
        color: var(--clr-python1);
    }
    100% {
        color: var(--clr-python2);
    }
}

.devicon-lua-plain-wordmark:hover {
    color: var(--clr-lua);
}
.devicon-lua-plain-wordmark{
    color: white;
    transition: color .25s;
}

.devicon-cplusplus-plain-wordmark:hover {
    color: var(--clr-cplusplus);
}
.devicon-cplusplus-plain-wordmark {
    color: white;
    transition: color .25s;
}

.devicon-csharp-plain-wordmark:hover {
    color: var(--clr-csharp);
}
.devicon-csharp-plain-wordmark {
    color: white;
    transition: color .25s;
}

.devicon-c-plain-wordmark:hover {
    color: var(--clr-c);
}
.devicon-c-plain-wordmark {
    color: white;
    transition: color .25s;
}

.devicon-nodejs-plain:hover {
    color: var(--clr-nodejs);
}
.devicon-nodejs-plain {
    color: white;
    transition: color .25s;
}

.devicon-javascript-plain:hover {
    color: var(--clr-javascript);
}
.devicon-javascript-plain {
    color: white;
    transition: color .25s;
}

.devicon-typescript-plain:hover {
    color: var(--clr-typescript);
}
.devicon-typescript-plain {
    color: white;
    transition: color .25s;
}

.devicon-mysql-plain:hover {
    color: var(--clr-mysql);
}
.devicon-mysql-plain {
    color: white;
    transition: color .25s;
}

.devicon-docker-plain:hover {
    color: var(--clr-docker);
}
.devicon-docker-plain {
    color: white;
    transition: color .25s;
}

.devicon-arduino-plain:hover {
    color: var(--clr-arduino);
}
.devicon-arduino-plain {
    color: white;
    transition: color .25s;
}

.devicon-python-plain:hover {
    animation-name: python-fade;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.devicon-python-plain {
    color: white;
    transition: color .25s;
}

.devicon-ansible-plain:hover {
    color: var(--clr-ansible);
}
.devicon-ansible-plain {
    color: white;
    transition: color .25s;
}

.devicon-perl-plain:hover {
    color: var(--clr-perl);
}
.devicon-perl-plain {
    color: white;
    transition: color .25s;
}

.devicon-plain:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}
.devicon-plain {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    transition: all .25s ease;
}

nav .navbar-nav .nav-item .nav-link {
    font-family: var(--ff-primaryfont);
    color: var(--clr-link);
    text-decoration: none;
    transition: color .25s;
    font-size: 20px;
}

nav .navbar-nav .nav-item .nav-link:hover {
    color: var(--clr-link-hover);
}

.itemlink {
    font-family: var(--ff-primaryfont);
    color: var(--clr-link);
    text-decoration: none;
    transition: color .25s;
}

.itemlink:hover {
    color: var(--clr-link-hover);
}

.fab {
    font-size: 2.5rem;
    padding: 2px;
    transition: color .25s;
}

.fab-text {
    color: inherit;
    font-size: 20px;
}

.fab:hover {
    color: var(--clr-link-hover);
}

p {
    font-family: var(--ff-primaryfont);
    color: var(--clr-text);
}

h1 {
    font-family: var(--ff-primaryfont);
    color: var(--clr-title);
}

h2 {
    font-family: var(--ff-primaryfont);
    color: var(--clr-title);
}

h3 {
    font-family: var(--ff-primaryfont);
    color: var(--clr-title);
}

h4 {
    font-family: var(--ff-primaryfont);
    color: var(--clr-title);
}

h5 {
    font-family: var(--ff-primaryfont);
    color: var(--clr-title);
}