@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

.project {
    margin-top: 25px;
}

.sec-title a {
    color: #1584e6;
    /*font-size: 70%;*/
    margin-right: 10px;
}

.project-container {
    padding: 3vw 5vw;
}

.pd-content {
    width: 70%;
    /* background-color: rgb(61, 61, 61); */
    font-family: "Open Sans", sans-serif !important;
}

.pd-content .pd-image {
    width: 80%;
    margin-top: 10px;
    border-radius: 5px;
}

.pd-image, .pd-buttons, .project-time {
    position: relative;
    left: 10%;
}

.project-time {
    margin-top: 20px;
    opacity: 0.8;
    /*font-size: 1.05vw;*/
}

.pd-desc {
    margin-top: 50px;
    /*font-size: 1.2vw;*/
    letter-spacing: 0.1px;
    color: #f5fbff;
}

.pd-timeline {
    margin: 30px 0;
    /*font-size: 1.3vw;*/
}

li {
    position: relative;
    left: 15px;
    margin: 10px;
}

.pd-buttons {
    margin: 40px 0;
}


.pd-buttons a {
    text-decoration: none;
    padding: 10px 20px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    /*font-size: 1vw;*/
    color: #000;
    border-radius: 15px;
    margin-right: 25px;
    overflow: hidden;
    position: relative;
    z-index: 2;
    border: 1px solid #000;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.pd-buttons a i {
    /*font-size: 1.5vw;*/
    margin-right: 6px;
    position: relative;
    top: 1px;
    transition: all 0.25s ease-out;
}

.pd-buttons a::before {
    content: '';
    position: absolute;
    left: -1vw;
    bottom: -1vw;
    width: 2vw;
    height: 2vw;
    z-index: -1;
    border-radius: 50%;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.pd-buttons a:hover::before {
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    border-radius: 0;
}

.pd-buttons .code {
    background-color: #c8fbfb;
    color: #005a29;
}

.pd-buttons .code::before {
    background-color: #005a29;
}

.pd-buttons .code:hover {
    color: #c8fbfb;
    background-color: #005a29;
}

.pd-buttons .host {
    color: #06005a;
    background-color: #c2e4ff;
}

.pd-buttons .host:hover {
    color: #c2e4ff;
    background-color: #06005a;
}

.pd-buttons .host::before {
    background-color: #06005a;
}