body{
    font-family: 'Times New Roman';
    margin: 0;
    padding: 0;
    background-color: rgb(45, 45, 45);
}

.contact-container {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 10px;
    flex-wrap: wrap; /* Keeps it responsive on smaller screens */
}

.profile-pic {
    width: 250px;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 4px 13px rgba(0,0,0,0.3);
}

.header-card {
    background-color: rgb(255, 130, 0);
    color: aliceblue;
    padding: 10px; /* Add some padding */

}

/* header-info-card a is meant for those contain links such as a, and hover a is when it changes when you hover over it */
.header-info-card{
    color: aliceblue;
    text-align: left;
    padding-left: 10px; /* this adds intention */
    white-space: pre-line;
    margin-top: 10px;
}

.header-info-card a {
    color: rgb(255, 130, 0);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 20px;
    font-weight: bold;
    display: inline-block;
    margin-top: 5px;
}

.header-info-card a:hover{
    background-color: aliceblue;
    color: rgb(45, 45, 45);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}



/*!Our horizontal rule card*/
.line-one{
    border-top: 3px solid rgb(255, 130, 0);
    border-bottom: 3px solid rgb(255, 130, 0);

}

.info-card{
    line-height: 1.4; /*reduced line spacing*/
    color: aliceblue;
    text-align: left;
    padding-left: 10px; /* this adds intention */
    margin-top: 0;   
    margin-bottom: 15px;
}

.info-card ul {
    padding-left: 20px;
    margin: 0;
    color: aliceblue;
}

.info-card li {
    margin-bottom: 10px;
    line-height: 1.4;
    color: aliceblue;
}



/* ! Collapsible styles allow people to see NOTES, PROJECTS, DEMOS */
.collapsible {
    background-color: rgb(255, 130, 0);
    color: rgb(45, 45, 45);
    cursor: pointer;
    padding: 10px;
    width: 100%;
    max-width: 600px;
    margin: 10px;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    border-radius: 4px;
    transition: 0.4s;
}

.active, .collapsible:hover {
    background-color: aliceblue;
}

.collapsible:after {
    content: '\002B'; /* Unicode character for "plus" sign (+) */
    color: rgb(45, 45, 45);
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2212"; /* Unicode character for "minus" sign (-) */
}

/*!The content is the Information inside the collapsable */
.content {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: rgb(55, 55, 55);
    margin: 0 20px;
    max-width: 600px;
    color: aliceblue;
}

.content p {
    padding: 10px;
}

.content a {
    color: rgb(255, 130, 0);
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: bold;
    display: block;        /* Makes links take full width and stack vertically */
    margin-bottom: 10px;   /* Adds space between links */
    padding: 5px 10px;     /* Adds some padding for better spacing */
}

/* NOTES and ERRORS FOR <p>*/
.note {
    color: cadetblue;
}