:root {
    --bg-color: #ffffff;
    --text-color: #0e141e;
    --card-bg: #ffffff;
    --skill-bg: #d1d1d1;
    --skill-hover: #b8b8b8;
    --skill-strong-bg: #b8b8b8;
    --skill-strong-hover: #a3a3a3;
    --link-color: #708090;
}

[data-theme="dark"] {
    --bg-color: #121212;
    --text-color: #f5f5f5;
    --card-bg: #1e1e1e;
    --skill-bg: #2a2a2a;
    --skill-hover: #3a3a3a;
    --skill-strong-bg: #3a3a3a;
    --skill-strong-hover: #4a4a4a;
    --link-color: #d3d3d3;
}

html {
    font-family: 'Tenor Sans', sans-serif;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: Arial, sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

#container {
    display: flex;
}

#sidebar {
    flex: 15%;
    margin: 5% 2% 0 10%;
}

#info-pages {
    flex: 55%;
    margin-top: 5%;
    margin-right: 10%;
}

#image, #profile-photo {
    width: 220px;
    height: 205px;
    border-radius: 20px;
}

#name {
    font-size: 25px;
    line-height: 20px;
}

#description {
    color: #555;
    font-size: 14px;
}

[data-theme="dark"] #description {
    color: #f5f5f5;
}

.page {
    box-shadow: 0px 0px 20px -9px rgba(0, 0, 0, 0.75);
    padding: 15px 30px 30px;
    background-color: var(--card-bg);
    margin-bottom: 30px;
}

.page > p {
    font-size: 19px;
    line-height: 2;
}

.page > ul {
    list-style-type: none;
}

.tag {
    font-size: 17px;
}

.tag span {
    font-size: 14px;
}

.tag span span {
    color: #738f93;
}

[data-theme="dark"] .tag span {
    color: #f5f5f5;
}

[data-theme="dark"] .tag span span {
    color: #a3b0b4;
}

#skill, #skill-stronger {
    display: inline;
    font-family: "Courier New", Courier, monospace;
    line-height: 35px;
    padding: 2px;
    border-radius: 4px;
}

#skill {
    background: var(--skill-bg);
    font-size: 14px;
}

#skill:hover {
    background-color: var(--skill-hover);
}

#skill-stronger {
    background: var(--skill-strong-bg);
    font-size: 18px;
}

#skill-stronger:hover {
    background-color: var(--skill-strong-hover);
}

.cryptedmail {
    font-size: 15px;
    font-weight: bold;
    color: var(--link-color);
    text-decoration: none;
    font-family: 'Cutive Mono', Courier, monospace;
}

#sidepanel-section-title {
    line-height: 30px;
}

#social-thumbnail, #cert-thumbnail {
    width: 40px;
    border-radius: 20px;
}

#cert-thumbnail {
    width: 100px;
}

.link {
    text-decoration: none;
    color: var(--link-color);
    font-weight: bold;
    font-family: 'Cutive Mono', Courier, monospace;
}

ul > li {
    font-size: 14px;
    list-style-type: disc;
    line-height: 20px;
}

.counter {
    font-size: 14px;
    color: #545454;
    font-weight: bold;
    display: block;
    text-align: center;
    margin-top: 2em;
}

#darkModeToggle {
    position: fixed;
    top: 10px;
    right: 10px;
    padding: 8px 12px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    z-index: 1000;
}