/* --------------------------------------css for small screens--------------------------------------- */

/* Add this at the end of your CSS file */

/* Mobile-first approach */
@media only screen and (max-width: 600px) {
    body {
        font-size: 16px; /* Adjust font size for smaller screens */
    }

    #nav {
        height: 12%; /* Adjust height of navigation bar for smaller screens */
    }

    #bannerContainer {
        padding-top: 10%; /* Adjust padding for smaller screens */
        padding-bottom: 3%; /* Adjust padding for smaller screens */
    }

    #Me,
    #ColeBranston_Image {
        width: 100%; /* Make images fill the width on smaller screens */
        margin-left: 0; /* Remove margin for smaller screens */
    }

    .box {
        width: 100%; /* Make project boxes fill the width on smaller screens */
    }

    #projectLinks {
        margin-left: 0; /* Adjust the position of project links for smaller screens */
        margin-top: 5vh;
    }
}

/* --------------------------------------Base CSS--------------------------------------- */

* {
    scroll-behavior: smooth; 
}

@media only screen and (min-width: 601px){

body{
    margin: 0;
    padding: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: #0c0c0c;
    scroll-behavior: smooth;
    font-family: 'Poppins', sans-serif;
    width: 100%;

}

.bodyText{
    color: #8f87bd;
}

#nav{
    display: flex;
    position: fixed;
    background-color: #000000c7;
    width: 100%;
    height: 8%;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

#name {
    width: 35%;
    font-size: 1.5rem;
    justify-content: center;
    text-align: center;
}

.navButton{
    width: 15%;
    font-size: 1.25rem;
    text-align: center;
}

.navLink.a{
    color: #cfccf1;
    transition: 0.25s ease;
    transform: translateY(-5px);
}

.navLink{
    transition: 0.60s ease;
    color: #6759b8;
    border: transparent solid 3px;
    width: 50%;
}

.navLink:hover{
    color: #cfccf1 !important;
    transition: 0.25s ease !important;
    transform: translateY(-5px) !important;
}

.navlinkIcon{
    transition: 0.60s ease;
    color: #6759b8;
    border-bottom: transparent solid 0.2rem;
}

.navlinkIcon:hover{
    color: #cfccf1;
    transition: 0.25s ease;
}

nav a {
    text-decoration: none;
    color: inherit;
}


#bannerContainer{
    display: flex;
    padding-top: 17em;
    padding-bottom: 3em;
    justify-content: center;
    text-align: center;
}

#banner{
    border: #6759b8 solid 0.3em;
    border-radius: 1em;
    padding-left: 1.4em;
    padding-right: 1em;
    font-size: 2rem;
}

.headerContainer{
    font-size: 1.5rem;
    padding-top: 1.4em;
    padding-left: 2em;
}

#Work {
    padding-bottom: 17.5%;
}

.Header:not(#skillsText, #homepage){
    /* color: #cac4fd !important; */
    color: white !important;
    text-shadow: 0 0 0.125em hsl(0 0% 10% / 0.3), 0 0 0.45em currentColor;
}

#skillsText{
    color: #cac4fd !important;
}

#intro{
    display: flex;
    padding-bottom: 3%;
}

#Me{
    width: 30%;
    margin-left: 14%;
    margin-top: 5%;
    transition: 0.6s ease;
}

#desciption {
    font-size: 2.5vh;
    color: #9d8df5;
}

#ColeBranston_Image{
    overflow: hidden;
    border-radius: 50%;
    width: 30%;
    height: 33rem;
    margin-left: 12.5%;
    transition: 0.6s ease;
}

@keyframes fadeRight{
    0%{
        opacity: 0;
        transform: translateX(-100vh);
        transition: 0.6s ease;
    }

    100%{
        opacity: 1;
        transform: translateX(0);
        transition: 0.6s ease;
    }
}

@keyframes fadeLeft{
    0%{
        opacity: 0;
        transform: translateX(100vh);
        transition: 0.6s ease;
    }

    100%{
        opacity: 1;
        transform: translateX(0);
        transition: 0.6s ease;
    }
}

@keyframes fadeIn{
    0%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}

.parallaxImage{
    background-attachment: fixed;
    background-image: url("Images/mountains_Image.jpg");
    background-size: 100%;
    display: grid;
    height: 40rem;
    width: 100%;
    border-bottom: #6759b8 solid 8px;
    border-top: #6759b8 solid 8px;
    justify-content: center;
    align-items: center;
}

#parallaxText{
    display: flex;
    justify-content: center;
    align-items: center;
    border: #423975 solid 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    height: 20%;
    width: 95%;

}

.frontText{
    color: #b7aeff;
    border: #5d50a7 solid 1rem;
    padding: 0.5rem;
    font-size: 3rem;
}

#skills {
    display: flex;
    flex-direction: row;
}

.container{
    padding: 25px 10%;
}

.row{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.sub-title{
    font-size: 60px;
    font-weight: 600;
    color: #fff;
}

.btn{
    display: block;
    margin: 50px auto;
    width: fit-content;
    border: 1px solid #6759b8;
    padding: 14px 50px;
    border-radius: 6px;
    text-decoration: none;
    color: #fff;
    transition: 0.5s;
}

.btn:hover{
    background: #6759b8;
}

.contact-right{
    flex-basis: 60%;
}

.contact-left{
    margin-top: -1.75%;
}

.social-icons a:hover{
    color: #ff004f;
    transform: translateY(-5px);
}

form input, form textarea{
    width: 100%;
    border: 0;
    outline: none;
    background: #262626;
    padding: 15px;
    margin: 15px;
    color: #fff;
    font-size: 18px;
    border-radius: 6px;
    transform: translateX(-15px);
}

form .btn2{
    background: #080808;
    padding: 14px 60px;
    font-size: 18px;
    margin-top: 20px;
    cursor: pointer;
}

p, li {
    color: white;
    margin: 0;
}

#arrowDiv {
    text-align: center !important;
    padding-top: 6%;
    padding-bottom: 7.5%;
}

#downArrow{
    color: #b7aeff;
    transition:"0.60s ease";
    animation: moveUpDown 0.7s ease infinite alternate !important;
}

@keyframes moveUpDown{
    0% {
        transform: translateY(-10px);
      }

    100% {
        transform: translateY(10px);
    }
}

@keyframes fadeUp {
    0% {
        transform: translateY(100px);
        opacity: 0;
      }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

i:not(#downArrow, #paperplaneIcon, #phoneIcon, #skillIcon, #projectLinks) {
    transition: 0.25s ease;
    color: #6759b8;
    padding-right: 2rem;
    padding-top: 2rem;
    text-shadow: 0 0 0.125em hsl(0 0% 10% / 0.3), 0 0 0.45em currentColor;
}


i:hover:not(#downArrow, #paperplaneIcon, #phoneIcon, #skillIcon, #projectLinks)  {
    transition: 0.25s ease;
    color: #cfccf1;
}

#paperplaneIcon{
    color: white;
    padding-right: 1rem;
    padding-top: 0rem;
}

#phoneIcon{
    color: white;
    padding-right: 1rem;
    padding-top: 1rem;
}

#msg{
    color: #61b752;
    margin-top: -2rem;
    display: block;
    text-align: center;

}

#experienceHeader{
    text-shadow: 0 0 0.125em hsl(0 0% 10% / 0.3), 0 0 0.45em currentColor;
    color: white;
}

.clickable{
    transition: 0.25s ease !important;
}

.clickable:hover {
    color: white !important;
    transition: 0.25s ease !important;
    cursor: pointer;
}

#experienceText {
    position: absolute;
    transition: 0.7s ease;
}

.sliderText:not(#experienceText) {
    opacity: 0;
    position: absolute;
    transition: 0.7s ease;
}

ul {
    list-style: none;
}

.title {
    color: rgb(136, 57, 226);
}

.subtitle {
    font-size: 85%;
    color: #ababab;
}

#skillsBox {
    display: flex;
    margin-top: 1vh;
}

.skill {
    margin-left: 1vh;
    width: 60vh;
}

.skillHeader {
    color: white;
    text-align: center;

}

#skillIcon {
    color: rgb(136, 57, 226);
    margin-right: 1vh;
    text-shadow: 0 0 0.125em hsl(0 0% 10% / 0.3), 0 0 0.45em currentColor;
}

.skillItem {
    color: #ababab;
    margin-top: 1vh;
}

#myProjects{
    display: flex;
    flex-direction: column;
}

#column2{
    margin-left: 5%;
    width: 60%;
}

.box{
    margin-top: 2vh;
    border: #423975 solid 0.5rem;
    background-color: #1f1b38;
    border-radius: 0.5rem;
    padding-right: 5%;
    display: flex;
    flex-direction: row;
    padding: 3vh;
    z-index: 1;
    transform: translateX(0);
    height: 25vh;
    overflow: hidden;
    transition: 0.8s ease;
}

.box:hover .cover {
    height: 100%;
}

.box:hover {
    transform: translateX(10vh);
    transition: 0.8s ease;
    border: #ffffff solid 0.2rem;
}

.box:hover #projectLinks {
    opacity: 1;
    transition: 0.8s ease;
}

.projectText {
    width: 50%;
}

.projectimageDiv {
    width: 46.5%;
    margin-left: 2vh;
    text-align: center;
    height: 25vh;
    overflow: hidden;

}

 .projectImage{
    border-radius: 2vh;
 }

.projectHeader{
    font-weight: bold;
    font-size: 2vh;
}

.projectDesc {
    color: #ababab;
    margin-top: 0.5vh;
}

.cover {
    height: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6),rgb(255, 255, 255));
    width: 100%;
    margin: -3vh;
    position: absolute;
    opacity: 0.5;
    transition: height 0.8s;
}

#projectLinks {
    position: absolute;
    margin-left: 55vh;
    margin-top: 10vh;
    text-shadow: 0 0 0.125em hsl(0 0% 10% / 0.3), 0 0 0.45em currentColor;
    color: white;
    z-index: 5;
    opacity: 0;
    transition: 0.3s ease;
}

footer {
    text-align: center;
    background-color: rgb(32, 32, 32);
    padding: 3.5vh;
}

#footerText {
    color: #ababab;
}

}