.site-wrap {
    overflow-x: hidden
}


h1 {
    text-transform: uppercase;
    font-size: 32px;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: bold;
    color: rgba(100, 63, 12, 0.967) !important;
}



h2 {
    font-size: 28px;
    font-family: 'Josefin Sans', sans-serif;
    text-align: center;
    color: rgba(138, 73, 43, 0.822) !important;
}





p {
    font-family: 'PT Sans', sans-serif;
}


html,
body {
    overflow-x: hidden;
}


body {
    background-color: rgba(75, 70, 73, 0.175);
    background-image: url("../image/background/space3.jpg");
}

/*Welcome*/
.navbar {
    background-color: rgba(210, 203, 195, 0.7);
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: rgba(142, 38, 100, 0.175)
}


/* Brief */
.brief {
    padding: 109px;
    text-align: center;

    background-image:
        radial-gradient(closest-side, rgba(157, 117, 83, 1), rgba(157, 117, 83, 0)),
        radial-gradient(closest-side, rgb(169, 139, 115, 1), rgba(169, 139, 115, 0)),
        radial-gradient(closest-side, rgba(218, 190, 167, 1), rgba(218, 190, 167, 0)),
        radial-gradient(closest-side, rgba(135, 109, 90, 1), rgba(135, 109, 90, 0)),
        radial-gradient(closest-side, rgb(205, 165, 129, 1), rgba(205, 165, 129, 0));

    background-repeat: no-repeat;
    animation: 5s movement linear infinite;
}


@keyframes movement {

    0%,
    100% {
        background-size:
            130vmax 130vmax,
            80vmax 80vmax,
            90vmax 90vmax,
            110vmax 110vmax,
            90vmax 90vmax;

        background-position:
            -80vmax -80vmax,
            60vmax -30vmax,
            10vmax 10vmax,
            -30vmax -10vmax,
            50vmax 50vmax;
    }

    25% {
        background-size:
            100vmax 100vmax,
            90vmax 90vmax,
            100vmax 100vmax,
            90vmax 90vmax,
            60vmax 60vmax;

        background-position:
            -60vmax -90vmax,
            50vmax -40vmax,
            0vmax 20vmax,
            -40vmax -20vmax,
            40vmax 60vmax;
    }

    50% {
        background-size:
            80vmax 80vmax,
            110vmax 110vmax,
            80vmax 80vmax,
            60vmax 60vmax,
            80vmax 80vmax;

        background-position:
            -50vmax -70vmax,
            40vmax -30vmax,
            10vmax 0vmax,
            20vmax 10vmax,
            30vmax 70vmax;
    }

    75% {
        background-size:
            90vmax 90vmax,
            90vmax 90vmax,
            100vmax 100vmax,
            90vmax 90vmax,
            70vmax 70vmax;

        background-position:
            -50vmax -40vmax,
            50vmax -30vmax,
            20vmax 0vmax,
            -10vmax 10vmax,
            40vmax 60vmax;
    }
}




.brief #icon {
    border-radius: 50%;
    width: 200px;
    height: 100%;
    border: 1px solid #784d1c6f;
}

.brief #sentence {
    font-family: 'Indie Flower', cursive;
    font-size: 20px;
}


.changeColor {
    color: rgba(121, 91, 61, 0.816);
}

#left_icon {
    color: #64413ad4;
    position: relative;
    left: -50px;
}

#right_icon {
    color: #64413ad4;
}


/* Introduction */
.introduction {
    background-color: #e5d3d12b;
    background-size: cover;
    padding: 40px;
    background-repeat: no-repeat;
    background-image: url("../image/background/white.jpg");
}

#selfintroBox {
    padding: 30px;
    text-align: center;
    margin: auto;
    margin-top: 3%;
    color: white;
    background-color: #dbcfcdac;
}


/* Life */
.carousel-item {
    background-repeat: no-repeat;
}


.life {
    padding: 40px;
    background-color: #f3efe8d1;
    background-repeat: no-repeat;
    background-size: cover;
}

@media only screen and (min-width : 1200px) {
    .carousel-caption {
        top: 20%;
    }
}

.life img {
    border-radius: 5%;
}


/* Contact*/
.contact {
    background-color: rgb(227, 223, 216);
    padding: 50px;
    background-size: 100%;
}

.contact_pic {
    margin: 0;
    padding: 0;

}

.contact li {
    color: rgb(171, 113, 58);
    display: inline-block;
    margin: 6px;
    list-style: none;

}

#smallicon {
    min-width: 40px;
    height: 40px;
    color: rgba(139, 93, 53, 0.762);
}

#emailField {
    border: #59423e9e solid 1px;
    background-color: white;
    padding: 15px;
    border-radius: 40px;
    color: #3b3433cb
}

.end,
#contact_information {
    text-align: center;
}

.end {
    font-size: 20px;
    font-family: 'Indie Flower', cursive;
    color: rgba(75, 70, 73, 0.521)
}

#back {
    float: right;
    border: #ebe3e218;
}

#back:hover {
    background: #9796f0;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #fbc7d4, #9796f0);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #fbc7d4, #9796f0);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border: #ebe3e218;
}


/* Skill */
.skill {
    padding: 40px;
    background-color: #c9beaed1;
    background-repeat: no-repeat;
    font-family: 'Alkalami', serif;
}


.rmLinkStyle {
    color: #f8f3f2c9;
}



.rmLinkStyle:hover {
    color: #b08b83c9;
}

/* Coding */

#moreApplications {
    color: #59423e;
    font-size: 20px;
}


.rmLinkStyleApplication {
    color: #b08b83c9;
}

.rmLinkStyleApplication:hover {
    color: #251b18c9;
}

.eachHeader {
    font-family: 'Roboto Condensed', sans-serif;
}

.journeyCaptionCodingBg {
    background-color: rgba(255, 255, 255, 0.633);
}

.journeyCaptionBg {
    background-color: rgba(255, 255, 255, 0.633);
}

/* background caption shorter */
/* @media screen and (min-width: 1200px) {
    .journeyCaptionBg {
        transform: translateY(165%);
        height: 100px;
    }
} */

.codingIconHead {
    color: rgb(192, 172, 172);
}

.skillHeaderBorder {
    font-size: 25px;
    color: #59423e;
    font-family: 'Alkalami', serif;
}

.skillBorder {
    padding: 10px;
    /* border: 1.5px solid rgb(129, 121, 121); */
    border-radius: 20%;
    color: rgb(129, 121, 121);
    background-color: #c9c3c3b5;
    display: inline-block
}

.skillBorderCol {
    padding: 5px;
}

.skillsContainer {
    justify-content: space-evenly;
}