:root {
    --primary-bg-color: #eee;
    --secondary-bg-color: #fff;
    --primary-text-color: #333;
    --secondary-text-color: #eee;
    --primary-heading-color: #3d9;
    --secondary-heading-color: crimson;
    --primary-link-color: #3d9;
    --secondary-link-color: crimson;

    --display: 'block';

    --progress-bar-html5: 0;
    --progress-bar-css3: 0;
    --progress-bar-js6: 0;
    --progress-bar-php8: 0;
    --progress-bar-python: 0;
    --progress-bar-wp: 0;
    --progress-bar-gitHub: 0;
    --progress-bar-ps: 0;
    --progress-bar-maya: 0;

    --title-bg-about: 0;
    --title-bg-skills: 0;
    --title-bg-portfolio: 0;
    --title-bg-feats: 0;
    --title-bg-contact: 0;

    --bottom-margin: 200;
}




body {
    /* font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
    font-family: 'Fredoka', sans-serif;
    color: var(--primary-text-color);
}

#container {
    background-color: var(--secondary-bg-color);
}




header {
    position: relative;
    background-color: midnightblue;
    color: var(--secondary-text-color);
    width: 100%;
    height: 600px;
    justify-content: space-between;
}


nav {
    position: fixed;
    background-color: #fffa;
    backdrop-filter: blur(25px);
    color: var(--primary-text-color);
    width: 100%;
    top: 0;
    z-index: 2;
}

nav ul {
    flex-direction: row;
}

nav ul li {
    padding: 25px 1.5vw;
    font-weight: bolder;
    cursor: pointer;
}


#topBG {
    flex-grow: 1;
    pointer-events: none;
    z-index: 3;
}

#topBG>* {
    pointer-events: all;
}

#topBG #lang {
    position: absolute;
    top: 20px;
}

#info ul li {
    margin: 10px 0;
}




main {
    width: 100%;
}

article {
    padding: 6rem 0;
}

article>section {
    width: 1000px;
}




article#about {
    direction: rtl;
}




article#skills {
    background-color: var(--primary-bg-color);
    direction: rtl;
}

.skill {
    padding: 10px 0;
    justify-content: space-between;
}

.skill img.icon {
    width: 50px;
    height:50px;
}

.skill-level {
    background:
        repeating-linear-gradient(75deg, #d5d5d5 0 2%, #ddd 0 4%) no-repeat 0px -12.5px,
        repeating-linear-gradient(105deg, #d5d5d5 0 2%, #ddd 0 4%) no-repeat 0px 12.5px;
    overflow: hidden;
    height: 25px;
    width: 600px;
    border-radius: 50px;
    box-shadow: 1px 1px 3px 0 #999;
}

.progress-bar {
    background: linear-gradient(90deg, #08f, #05c, midnightblue);
    width: 100%;
    height:100%;
    transition: 0.5s cubic-bezier(0.5,0.5,0,1);
}





article#portfolio {
    background-color: var(--secondary-bg-color);
    background-color: #ddd;
}

article#portfolio>section {
    flex-wrap: wrap;
}

.project {
    margin: 20px;
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.5,0.5,0,1);
}

.thumb {
    background: 
        linear-gradient(20deg, midnightblue 0 33%, #0000 0),
        linear-gradient(-5deg, #05c 0 75%, #08f 0);
    width: 200px;
    height:200px;
    margin-bottom: 10px;
    border-radius: 100vw;
    box-shadow: 1px 1px 5px 0 midnightblue;
    cursor: pointer;
    transition: all 0.1s
}

.thumb>h3 {
    color: var(--secondary-text-color);
    user-select: none;
    pointer-events: none;
}

.thumb>div {
    /* display: none; */
    pointer-events: none;
}

.project img.icon {
    width: 30px;
    height:30px;
    pointer-events: none;
}

.thumb h3, .thumb div {
    pointer-events: none;
}

#description {
    position: fixed;
    background-color: #fffd;
    backdrop-filter: blur(10px);
    width: 300px;
    height:100vh;
    right: 0;
    top: 0;
    padding: 100px 20px;
    justify-content: space-between;
    transform: translateX(100%);
    transition: transform 0.2s cubic-bezier(0.25, 0, 0, 1);
    z-index: 0;
    overflow-y: scroll;
}

#description h2 {
    margin-bottom: 25px
}

#description p {
    direction: rtl;
    color: midnightblue;
    font-style: italic;
    font-size: 1.1em;
}

#description::-webkit-scrollbar {
    right: 0;
    width: 5px;
}

#description::-webkit-scrollbar-track {
    background: #0000;
}

#description::-webkit-scrollbar-thumb {
    background: #05c;
    border-radius: 10vh ;
}




article#feats {
    background-color: var(--primary-bg-color);
    /* clip-path: polygon(0 0, 100% 50px, 100% 100%, 0 100%); */
}

article#feats section span {
    color: #05c
}


article#contact {
    direction: rtl;
}

article#contact section #contactInfo {
    margin: 50px 0;
    justify-content: space-between;
    gap: 25px;
    flex-wrap: wrap;
}

article#contact input {
    font-size: 1.25em;
    border: 1px solid;
    border-width: 0 0 1px 0;
    height: 40px;
    padding: 5px;
    margin: 0
}

article#contact input[name="name"] {
    /* flex-grow: 1; */
    max-width: 25%;
}

article#contact input[name="phone"] {
    /* flex-grow: 1; */
    max-width: 25%;
}

article#contact input[name="email"] {
    flex-grow: 2;
}

article#contact input[name="message"] {
    width: 100%;
    margin-bottom: 50px;
    border-width: 0 0 1px 0;
}

article#contact input::placeholder {
    color: #aaa;
    font-style: italic;
}

article#contact button {
    background-color: #ccc;
    line-height: 0px;
    width: 100px;
    height: 40px;
    padding: 10px;
    border-radius: 100vw;
}

article#contact button:hover {
    background-color: #05c;
    color: #fff
}





footer {
    background: 
        linear-gradient(120deg, #0000 0 55%, midnightblue 0),
        linear-gradient(100deg, #0000 0 45%, #05c 0),
        #08f;
    height:100px;
    width: 100%
}


.sending {
    position: fixed;
    background-color: #0000;
    width: 50px;
    height:50px;
    top: 50%;
    border-top: 6px dotted #05c;
    border-right: 6px dotted #05c;
    border-radius: 100vw;
}