html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
    border:0;
    font:inherit;
    font-size:100%;
    margin:0;
    padding:0;
    vertical-align:baseline;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display:block;
}
html, body {
    background: #181818;
    font-family: 'Lato', helvetica, arial, sans-serif;
    font-size: 16px;
    color: #222;
}
.clear {
    clear: both;
}
p {
    font-size: 1em;
    line-height: 1.4em;
    margin-bottom: 20px;
    color: #444;
}
#cv {
    width: 90%;
    max-width: 800px;
    background: #f3f3f3;
    margin: 30px auto;
}
.mainDetails {
    padding: 25px 35px;
    border-bottom: 2px solid #cf8a05;
    background: #ededed;
}
#name h1 {
    font-size: 2.5em;
    font-weight: 700;
    font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
    margin-bottom: -6px;
}
#name h2 {
    font-size: 2em;
    margin-left: 2px;
    font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
}
#mainArea {
    padding: 0 40px;
}
#contactDetails ul {
    list-style-type:none;
    font-size:0.9em;
    margin-top:2px;
}
#contactDetails ul li {
    margin-bottom:3px;
    color:#444;
    line-height:2;
}
#contactDetails ul li a {
    color:#444;
    text-decoration:none;
    transition:all .3s ease-in;
}
#contactDetails ul li a:hover {
    color:#cf8a05;
}
section {
    border-top:1px solid #dedede;
    padding:20px 0 0;
}
.sectionTitle {
    float:left;
    width:25%;
}
.sectionContent {
    float:right;
    width:72.5%;
}
.sectionTitle h1 {
    font-family:'Rokkitt', Helvetica, Arial, sans-serif;
    font-style:italic;
    font-size:1.5em;
    color:#cf8a05;
}
.sectionContent h2 {
    font-family:'Rokkitt', Helvetica, Arial, sans-serif;
    font-size:1.3em;
    margin-bottom:-2px;
}
.keySkills {
    list-style-type:none;
    column-count:3;
    margin-bottom:20px;
    font-size:1em;
    color:#444;
}
.project-ul {
    list-style-type: disc;
}
.project-li {
    display: inline-block;
    padding-bottom: 10px;
}
.project-font {
    font-size: .9em;
    margin-bottom: 0%;
}
.project-button {
    display: inline-block;
    margin-left: auto;
    font-size: .8em;
    border: 1px solid #cf8a05;
    border-radius: 2px;
    padding: 3px 6px;
    background-color: rgb(249, 219, 164);
    cursor: pointer;
    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.3s ease-in-out;
}
.project-button:hover {
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.5);
}
@media all and (max-width: 601px) {
    #cv { width:95%; margin:10px auto; }
    #name, #contactDetails { float:none; width:100%; text-align:center; }
    .sectionTitle, .sectionContent { float:none; width:100%; }
}

/* Container for Credly badges */
.badges-container {
    display: flex;
    flex-wrap: wrap;       /* Wrap badges on small screens */
    gap: 15px;             /* Space between badges */
    margin-top: 10px;
}

/* Responsive badges on mobile */
@media (max-width: 600px) {
    .badges-container div {
        flex: 1 1 45%;     /* Adjust width on small screens */
    }
}