@import url('https://fonts.cdnfonts.com/css/calibre');

@import url('https://fonts.cdnfonts.com/css/sf-mono');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'SF Mono', sans-serif;

}

#main-container {
    background-color: #0a192f;

}

/* header || nav-bar */

#link-1,
#link-2,
#link-3,
#link-4 {
    color: #ffffff;
    font-size: 1.5vh;
    margin-left: 5px;
}

/* Color of the links BEFORE scroll */
.navbar-scroll .nav-link,
.navbar-scroll .navbar-toggler-icon,
.navbar-scroll .navbar-brand {
    color: #64ffda;
    font-size: 17px;
    line-height: 13.9px;
    font-weight: 400;
}

.navbar-scroll .nav-link,
.navbar-scroll .navbar-toggler-icon,
.navbar-scroll .navbar-brand:hover {
    color: #ffffff;
}




.navbar-brand {
    font-size: unset;
    height: 3.5rem;
}

.nav-span {
    color: #64ffda;
    margin-right: 2px;

}

nav {
    padding-top: 1.5% !important;
    box-shadow: none !important;
    padding-right: 1%;
    position: relative;
    z-index: 1;
}

.nav-item>.nav-link:hover {
    color: #64ffda;
    margin-right: 2px;

}

.active,
a.active:hover {
    color: #64ffda;
}

#resume-btn {
    margin-top: -8%;
    font-size: 16px;
    line-height: 13.9px;
    font-weight: 400;
    background-color: transparent;
    outline: 0.5px solid #64ffda;
    border-radius: 4px;
    color: #ffffff;
    background: linear-gradient(to left, #0a192f 50%, #64ffda 50%) right;
    background-size: 200%;
    transition: .4s ease-out;
}

#resume-btn:hover {
    background-position: left;
    color: #0a192f;

}

#main-card {
    background-color: transparent;
    box-shadow: -10px 0 10px rgb(164, 255, 145);
}

#profile-card {
    height: 60vh;
    position: relative;

}

.background-gif {
    position: relative;
}

.header {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

.gif {
    position: relative;
    /* border-radius: 0% 0% 32% 28% / 10% 10% 40% 32%; */
}

video {
    width: 100%;
    height: 50%;
}

.image {
    position: absolute;
    bottom: -20%;
    left: 50%;
    transform: translateX(-50%);
    height: 200px;
    width: 200px;
    background-color: #1d252c;
    box-shadow: -10px 0 10px rgb(164, 255, 145);
}

.image>img {
    object-fit: cover;
    width: 100%;
    height: 100%;

}

.my-description {
    color: #a4ff91;
    font-size: 2vh;
    text-align: center;
}

/* .card-1>.name {
    margin-top: 12%;
    font-size: 10vh;
} */

.social-icons {
    text-align: center;
    font-size: 2vh;

}

.social-icons>a {
    color: #ffffff;
    margin-left: 10px;
}

.social-icons>a:hover {
    color: #a4ff91;
}

.fading-line {
    height: 3px;
    border: 0;
    background: linear-gradient(to right, transparent, #a4ff91, transparent);

}

.easy-buttons {
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 3%;
    margin-left: 4%;
    padding-left: 1%;
    text-align: center;
}

.cv,
.contact {
    font-size: 1.8vh;
    margin-left: 4%;

}

.cv>a,
.contact>a {
    color: #ffffff;
    font-weight: 700;

}

.cv>a:hover,
.contact>a:hover {
    color: #a4ff91;


}

.cv {
    border-right: 0.5px solid #a4ff91;


}

/* Section1 */
.card-1 {
    padding-top: 15%;

}

.hero-card {
    padding-top: 18%;
    margin-left: -28%;

}

.tech-lists-2>.fa-plus {
    color: #64ffda;
    font-size: 1.8vh;
}

#profile-card-id {
    /* background-color: #112240; */
    border: 10px solid #0a192f;
    border-radius: 50%;
    height: 50vh;
    width: 100%;

}

.card-1>.small {
    color: #64ffda;
    font-size: 2.5vh;
}

.card-1>.name {
    font-family: 'Calibre', sans-serif;
    font-size: 11vh;
    color: #ffffff;
    margin-top: -1%;
    font-weight: 550;
    line-height: 1.1;
}

.software-engineer {
    margin-top: -3.5%;
    font-size: 7.5vh;
    color: #ccd6f6;
    font-family: 'Calibre', sans-serif;
    color: #64ffda;
    font-weight: bold;

}

/* #card-one-main {
    /* height: 100vh; 
} */
#hero-image {
    margin-top: -40%;

}

.small-description {
    /* color: #8892B0; */
    color: #A8B2D1;
    font-size: 22px;
    line-height: 1.5;
    font-family: 'Calibre', sans-serif;
}

.github {
    color: #64ffda;
    font-family: 'Calibre', sans-serif;

}

.github:hover {
    color: #64ffda;
    text-decoration: underline;
}

.checkout-btn {
    background-color: transparent;
    padding: 2%;
    outline: 0.1px solid #64ffda;
    font-size: 2.2vh;
    font-weight: 500;
    line-height: 14px;
    word-spacing: 0px;
    margin: 50px 0px 0px;
    padding: 2.5vh;
    border-radius: 4px;
    color: #64ffda;
    font-weight: 400;
    background: linear-gradient(to left, #0a192f 50%, #64ffda 50%) right;
    background-size: 200%;
    transition: .4s ease-out;
    text-align: center;
}

.checkout-btn:hover {
    background-position: left;
    color: #0a192f;
    outline: 0.1px solid #ffffff;

}

/* About section styling */
.card-2 {
    margin-top: 28%;

}

.number {
    color: #64ffda;
    font-size: 25px;
    font-weight: 600;
}

.about-heading {

    font-size: 32px;
    line-height: 35.2px;
    margin: 10px 0px 40px;
    font-weight: 600;
    font-family: 'Calibre', sans-serif;
    color: #ccd6f6;

}

.line-under {
    height: 3px;
    border: 0;
    background: linear-gradient(to right, transparent, #64ffda, transparent);

}

.about-content {
    color: #8892B0;
    font-size: 2.8vh;
    line-height: 1.5;
    font-family: 'Calibre', sans-serif;
    font-weight: 400;
    margin: 5vh 0px 3.75vh;
}

.moringa-school {
    color: #64ffda;
    font-family: 'Calibre', sans-serif;
    font-size: 22px;
    line-height: 26px;

}

.moringa-school:hover {
    color: #64ffda;
    text-decoration: underline;

}


.tech {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;


}

.animate__fadeIn {
    text-align: center;
    margin-left: 3vh;
    margin-right: 3vh;
    margin-bottom: 20px
}

.devicon-angularjs-plain,
.devicon-django-plain,
.devicon-bootstrap-plain,
.devicon-figma-plain,
.devicon-flask-original,
.devicon-git-plain,
.devicon-html5-plain,
.devicon-javascript-plain,
.devicon-markdown-original,
.devicon-postgresql-plain,
.devicon-python-plain,
.devicon-typescript-plain,
.devicon-visualstudio-plain {
    font-size: 8.5vh;
    color: #ffffff;

}

.animate__fadeIn>p {
    font-size: 15px;
    color: #fff;

}

.tech-lists {
    font-size: 15px;
    padding: 3px;
}

.fa-code-commit {
    font-size: 13px;
    margin-right: 1%;
    color: #64ffda;
}

#lists {
    margin-top: -3%;
}

#about-myself {
    margin-left: 5%;
}

.smooth-scroll {
    scroll-behavior: smooth;
}

.typing {
    font-family: 'Calibre', sans-serif;
    font-weight: 500;
}

.empty {
    height: 30vh;
}

/* card-3 styling */
#work-experience {
    /* margin-left: 12%; */

}

.tech-lists-2 {
    list-style: none;
    color: #8892B0;
    font-family: 'Calibre', sans-serif;
    line-height: 1.5;
    font-size: 22px;
    font-weight: 400;

}

.line-under-2 {
    margin-bottom: 6%;
    height: 3px;
    border: 0;
    background: linear-gradient(to right, transparent, #64ffda, transparent);
}

#experience-items {
    color: #64ffda;
}

.icta {
    color: #64ffda;
    font-family: 'Calibre', sans-serif;

}

.icta:hover {
    color: #64ffda;

}

#place {
    color: #64ffda;
    font-size: 20px;
}

.experience {
    color: #ffffff;
    font-family: 'Calibre', sans-serif;
}

.tech-lists-2>.numbering-2 {
    color: #64ffda;
}

/* section3 */
/* #Projects{

} */
.corner-colours {
    height: 200px;
    width: 200px;
    border-radius: 50%;
    background-color: #112240;
    position: sticky;
    top: 30%;
    right: 2%;


}

.card-3 {
    margin-bottom: 9%
}

.line-under-3 {
    height: 3px;
    border: 0;
    background: linear-gradient(to right, transparent, #64ffda, transparent);
    margin-bottom: 3%;

}

#project-one,
#project-two {
    margin-bottom: 10%;
    height: 40vh;

}

#project-three {
    margin-bottom: 3%;
}

.projects-show {
    width: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.project-title {
    color: #64ffda;
    text-align: end;
}

.project-name {
    color: #8892B0;
    font-family: 'Calibre', sans-serif;
    font-size: 3.0vh;
    font-weight: 600;
    text-align: end;
}

.explanation {
    color: #A8B2D1;
    font-size: 2vh;
    font-weight: 400;
}

.explanation>.child {
    font-family: 'Calibre', sans-serif;
    line-height: 1.0;
    margin-top: 13px;
    margin-left: -5%;
    background-color: #112240;
    padding: 1.5%;
    border-radius: 5px;
    position: absolute;
    width: 28%;
    z-index: 2;

}

.okoa-child {
    font-family: 'Calibre', sans-serif;
    line-height: 1.0;
    margin-top: 13px;
    margin-left: 12%;
    background-color: #112240;
    padding: 1.5%;
    border-radius: 5px;
    position: absolute;
    width: 28%;
    z-index: 2;

}

.tech-stacks {
    margin-top: 39%;
    text-align: end;

}

.tech-stack {
    color: #A8B2D1;
    font-weight: 400;
    margin-left: 6px;

}

.project-links a {
    color: #ffffff;
    float: right;
    font-size: 2vh;


}

.project-links>a>span>i {
    margin-left: 20px;
    margin-top: 25px;
}

.project-links>a>span>i:hover {
    color: #64ffda;


}

#circles {
    background-color: #112240;
    width: 15vw;
    height: 30vh;
    border-radius: 50%;
    box-shadow: 50px 0 0 -2px #8892B0;

}

.hero-card>img {
    width: 20vh;
    width: 20vw;
    position: absolute;
}

/* project 2 styling */
.project-title-2 {
    color: #64ffda;
    text-align: start;
}

.project-name-2 {
    color: #8892B0;
    font-family: 'Calibre', sans-serif;
    font-size: 3.0vh;
    font-weight: 600;
    text-align: start;
}

.explanation-2 {
    color: #A8B2D1;
    font-size: 2vh;
    font-weight: 400;
}

.explanation-2>.child {
    margin-left: 12%;
    font-family: 'Calibre', sans-serif;
    line-height: 1.0;
    margin-top: 13px;
    background-color: #112240;
    padding: 1.5%;
    border-radius: 5px;
    position: absolute;
    width: 28%;
    z-index: 2;

}

.tech-stacks-2 {
    margin-top: 42%;
    text-align: start;


}

.tech-stack-2 {
    color: #A8B2D1;
    font-weight: 400;
    margin-left: 6px;


}

.project-links-2>a {
    color: #ffffff;
    text-align: start;
    font-size: 2vh;


}

#decor {
    /* margin-top: -25%; */
    position: absolute;
}

.project-links-2>a>span>i {
    margin-left: 15px;
    margin-top: 25px;
}

.project-links-2>a:hover {

    color: #64ffda;
}
.icon-name{
    /* color: #8892B0; */
    font-weight: bolder;
    color:#fff;

}

.noteworthy-projects {
    background-color: transparent;
    padding: 2%;
    outline: 0.1px solid #64ffda;
    font-size: 2.2vh;
    font-weight: 500;
    line-height: 14px;
    word-spacing: 0px;
    margin: 50px 0px 0px;
    padding: 20px;
    border-radius: 4px;
    color: #64ffda;
    font-weight: 400;
    background: linear-gradient(to left, #0a192f 50%, #64ffda 50%) right;
    background-size: 200%;
    transition: .4s ease-out;
    text-align: center;

}

.noteworthy-projects:hover {
    background-position: left;
    color: #0a192f;
    outline: 0.1px solid #ffffff;

}

.projects-btn {
    text-align: end;
}

/* contact-section styling */
.about-heading-4 {
    color: #64ffda;
    font-size: 1.9vh;
    font-weight: 400;

}

.about-heading-4 .number-4 {
    text-align: center;
    color: #64ffda;

}

.contact-me {
    color: #A8B2D1;
    font-size: 5vh;
    font-family: 'Calibre', sans-serif;
    line-height: 1.8;
    text-transform: uppercase;
    font-weight: 600;
}

.contact-description {
    color: #A8B2D1;
    font-size: 2.5vh;
    font-weight: 400;
    font-family: 'Calibre', sans-serif;
    margin-bottom: 4%;
}

.get-in-touch-btn {
    font-family: 'Calibre', sans-serif;
    color: #64ffda;
    font-size: 2.5vh;
    border-radius: 5px;
    background-color: transparent;

}

footer {
    text-align: center;
    margin-top: 10%;
    color: #A8B2D1;
    font-weight: 500;
    font-size: 2vh;
}

#left-description {
    margin-left: 5%;
    padding-top: 7%;
}

#rotating-world {
    height: 50vh;

}


.icon-bar {
    position: fixed;
    bottom: 0;
    left: 1%;
    border: none;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.icon-bar a {
    display: block;
    border: none;
    text-align: center;
    padding: 15px;
    transition: all 0.3s ease;
    color: white;
    margin-bottom: 10px;
    font-size: 20px;
    border-radius: 50%;
}

.icon-bar a:hover {
    color: #64ffda;
}
  .animate__lightSpeedInLeft {
    --animate-duration: 4s;
  }
  
aside {
    position: fixed;
    bottom: 30%;
    right: 0%;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

aside h6 {
    font: bold 12px;
    letter-spacing: 2px;
    color: #fff;
    line-height: 24px;
    border-bottom: 0.5px solid #112240;
    text-align: center;
    padding: 2%;
}

.line-under-vr {
    right: 0;
    transform: rotate(90deg);
    height: 3px;
    border: 0;
    background: linear-gradient(to right, transparent, #64ffda, transparent);
}

html {
    scroll-behavior: smooth;
}

.my-email {
    font-family: 'Calibre', sans-serif;
    font-size: 3vh;
    color: #64ffda;
    border: 0.8px solid #112240;
    text-align: center;
    padding: 2%;
    font-weight: 500;
}

.my-email:hover {
    border-bottom: 1px solid #64ffda;
    border-right: 1px solid #64ffda;
}

.borders-grid {
    width: 100%;
}

.borders-grid>.grid {
    border-style: solid;
    border-color: white;

}

#job-card {
    background-color: transparent;
    color: #A8B2D1;
    margin-bottom: 4vh;
    border-radius: 10px;
    padding: 5px;
}

#job-card:hover {
    background-color: #0a192f;
    box-shadow:
        0 2.8px 2.2px rgba(0, 0, 0, 0.034),
        0 6.7px 5.3px rgba(0, 0, 0, 0.048),
        0 12.5px 10px rgba(0, 0, 0, 0.06),
        0 22.3px 17.9px rgba(0, 0, 0, 0.072),
        0 41.8px 33.4px rgba(0, 0, 0, 0.086),
        0 100px 80px rgba(0, 0, 0, 0.12);
    /* border-right:1px solid #64ffda; */
}

.horizontal-rule{
    border: 1.4px solid #64ffda;
    width: 50%;
    margin-bottom: -5px;
}

.company-links {
    position: relative;
    color: #64ffda;
    text-decoration: none;
    font-weight: bold;
    font-size: 3vh;
}

.company-links::before {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #64ffda;
    transition: width 1.0s ease;
}

.company-links:hover {
    color: #64ffda;
}

.company-links:hover::before {
    width: 100%;
    color: #64ffda;
}

.number {
    color: #64ffda;
}

/* New styling for technologies */
.icon-1{
    padding: 10px;
    margin-bottom: 1.5rem;
    margin-right: 1.5rem;
    /* background: #112240; */
    border-radius: 2px;
    text-align: center;
    /* vertical-align: middle; */
    
}
.icon-1 h3{
    font-weight: 600;
    color: #A8B2D1;
    font-size: 2vh;


}
.icon-1>h3>i{
    margin-bottom: -5px;
}


/* Media queries */
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .card-1>.name {
        font-size: 9vh;
    }

    .software-engineer {
        font-size: 4vh;
    }

    .small-description {
        font-size: 2.5vh;
    }

    .checkout-btn {
        font-size: 1.8vh;
        padding: 10px;
        margin-top: -1%;

    }

    .about-heading {
        font-size: 3vh;
    }

    #about-myself>.about-heading>.number {
        font-size: 2.5vh
    }

    #about-myself>.about-heading {
        font-size: 3vh
    }

    .about-content {
        font-size: 2.5vh;
    }

    #work-experience {
        margin-top: -60%;
    }

    #work-experience>.about-heading>.number {
        font-size: 2.5vh;
    }

    .experience,
    .tech-lists-2 {
        font-size: 2.5vh;
    }

    #Projects>.about-heading>.number {
        font-size: 2.5vh;
    }

    .projects-show {
        width: 100%;
        margin-top: 2%;
    }

    #project-one {
        margin-bottom: 0;
        height: 26vh;
    }

    #project-one>.col-md-7 {
        padding-top: 0;
        height: 0;
    }

    #project-one>.col-md-5>.project-title {
        margin: 0;
        padding: 0;
    }

    #project-one>.col-md-5>.project-name {
        margin: 0;
        padding: 0;
    }

    .explanation>.child {
        width: 100%;
        margin: 0;
        font-size: 2.5vh;
        position: relative;
        padding: 4%;
    }

    .tech-stacks {
        font-size: 2vh;
        margin-top: 5%;
    }

    .explanation-2>.okoa-child {
        width: 100%;
        margin: 0;
        font-size: 2.5vh;
        position: relative;
        padding: 4%;

    }

    .tech-stacks-2 {
        margin-top: 4%;
        font-size: 2vh;

    }

    .noteworthy-projects {
        padding: 3%;

    }

    #rotating-world {
        height: 35vh;
        
    }

    .contact-me {
        font-size: 3vh;
    }

    #left-description {
        margin-left: 0;
        padding-top: 7%;
    }

    .icon-bar {
        display: none;

    }

    aside {
        display: none;
    }

    .hero-card {
        display: none;
    }

    .about-content>.moringa-school {
        font-size: 2.5vh;
    }

    .fa-bars {
        color: #64ffda;
    }

    .my-email {
        font-size: 2vh;

    }


}