/* general */

:root {
    --base-color: #070b1d;
    --base-variant: #717997;
    --container-color: #0d1117;
    --text-color: #ffffff;
    --secondary-text: #a4a5b8;
    --primary-color: #3a435d;
    --tooltip-color: #4b006e;
    --popup-color: #111a27;
}

.whitemode {
    --base-color: #f7f7f7;
    --base-variant: #e8e9ed;
    --container-color: #fff;
    --text-color: #000000;
    --secondary-text: #232738;
    --primary-color: #3a435d;
    --tooltip-color: #ff81df;
    --popup-color: #d3c7c7;
}

/* Ensure no unexpected margins or paddings */
html, body {
    font-family: Arial, sans-serif;
    background-color: var(--base-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    box-sizing: border-box;
}

p {
    color: var(--secondary-text);
}

/* Fix container centering on small screens */
.container {
    max-width: 800px;
    width: 90%; /* Make it responsive */
    margin: 50px auto; /* Ensure horizontal centering */
    padding: 20px;
    background-color: var(--container-color);
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: right;
    margin-bottom: 10px;
}

/* Further improvements for very narrow screens */
@media (max-width: 600px) {
    .container {
        width: 95%;
        margin: 20px auto; /* Adjust margins */
    }
}

.container + .container {
    margin-top: 20px; /* Adjust the margin between containers */
}




/* whitemode button */

#theme-switch{
    border: none;
    cursor: pointer;
    height: 50px;
    width: 50px;
    padding: 0;
    border-radius: 50%;
    background-color: var(--base-variant);
    display: flex;
    justify-content: center;
    align-items: center;
    top: 20px;
    right: 20px;
}

#theme-switch svg{
    fill: var(--primary-color);
}

#theme-switch svg:last-child{
    display: none;
}

.whitemode #theme-switch svg:first-child{
    display: none;
}

.whitemode #theme-switch svg:last-child{
    display: block;
}





/* Contact Buttons */

ul {
    list-style: none;
}
  
.contact {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    row-gap: 0.5rem;
    padding: 20px; /* Remove any padding if necessary */
    margin: 0; /* Remove any margin if necessary */
}

.contact .icon-content {
    position: relative;
}

.contact .icon-content .tooltip {
    position: absolute;
    top: 35px;
    left: 65%;
    transform: translateX(50%);
    color: #fff;
    padding: 6px 10px;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    font-size: 14px;
    transition: all 0.3s ease;
}

.contact .icon-content:hover .tooltip {
    opacity: 1;
    visibility: visible;
    top: 20px;
}

.contact .icon-content a {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    color: #4d4d4d;
    background-color: #fff;
    transition: all 0.3s ease-in-out;
}

.contact .icon-content a:hover {
    box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
}

.contact .icon-content a svg {
    position: relative;
    z-index: 1;
    width: 30px;
    height: 30px;
}

.contact .icon-content a:hover {
    color: white;
}

.contact .icon-content a .filled {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: #000;
    transition: all 0.3s ease-in-out;
}

.contact .icon-content a:hover .filled {
    height: 100%;
}

.contact .icon-content a[data-social="github"] .filled,
.contact .icon-content a[data-social="github"] ~ .tooltip {
    background-color: #24262a;
}

.contact .icon-content a[data-social="gmail"] .filled,
.contact .icon-content a[data-social="gmail"] ~ .tooltip {
    background-color: #e0574b;
}

.contact .icon-content a[data-social="whatsapp"] .filled,
.contact .icon-content a[data-social="whatsapp"] ~ .tooltip {
    background-color: #25d366;
}

.contact .icon-content a[data-social="youtube"] .filled,
.contact .icon-content a[data-social="youtube"] ~ .tooltip {
    background-color: #ff0000;
}


/* Mobile Contact Buttons */

.mobile-contact{
    display:none;
}

.mobile-contact-button {
    text-decoration: none;
    font-size: 18px;
    padding: 10px;
    border: none;
    background: none;
}

.mobile-contact-button:hover {
    background-color: #f0f0f000;
    color: #555;
}

.gradient-github {
    background: #24262a;
}

.text-github {
    color: #ffffff;
}

.gradient-gmail {
    background: #e0574b;
}

.text-gmail {
    color: #000000;
}

.gradient-whatsapp {
    background: #25d366;
}

.text-whatsapp {
    color: #000000;
}

.gradient-youtube {
    background: #ff0000;
}

.text-youtube {
    color: #000000;
}

@media(max-width:1050px){
    .contact{
        display:none;
    }

    .mobile-contact{
        display: block;
    }
}



/* pdf buttons */

.pdf-button-container {
    display: inline-flex;
    white-space: nowrap;
    margin-left: 5px;
    margin-bottom: 5px;
    border: none;
    border-radius: 5px;
    /* cursor: pointer; */
    transition: background-color 0.3s;
}

.pdf-button {
    text-decoration: none;
    color: #333;
    font-size: 18px;
    padding: 10px;
    border: none;
    background: none;
}

.pdf-button:hover {
    background-color: #f0f0f000;
    color: #555;
}

.tooltip {
    position: relative;
    display: inline-block;
    padding: 10px;
    border: none;
    background: none;
}

.tooltip img {
    vertical-align: middle;
    width: 20px; /* Adjust the width of the image */
    height: 20px; /* Adjust the height of the image */
    transition: opacity 0.3s; /* Smooth transition */
}

.tooltip:hover img {
    opacity: 0.5; /* Adjust the brightness on hover */
}

.tooltip .tooltiptext {
    visibility: hidden;
    background-color: var(--tooltip-color);
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 120%; /* Position tooltip above the element */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Ensure it stays centered */
    white-space: nowrap; /* Prevents line breaks */
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--tooltip-color) transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
}

.popup-content {
    background: var(--popup-color);
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    width: 300px;
    position: relative;
}

.popup-close-button {
    margin-top: 10px;
    padding: 5px 10px;
    background-color: red;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}


/* colors for buttons */

.gradient-generic {
    background: linear-gradient(45deg, #bbb, #ddd);
}

.gradient-lightblue {
    background: linear-gradient(45deg, #99d2e0, #e4f7ff);
}



.gradient-purple-mathematical_methods_in_game_theory {
    background: linear-gradient(45deg, #9a7ddb, #d989f1);
}

.gradient-purple-numerical_analysis {
    background: linear-gradient(45deg, #9e72cc, #8d60b9);
}

.gradient-purple-introduction_to_machine_learning {
    background: linear-gradient(45deg, #cf7018, #c08f24);
}

.gradient-blue1 {
    background: linear-gradient(45deg, #7f7fd5, #86a8e7, #91eae4);
}

.gradient-blue2 {
    background: linear-gradient(45deg, #3c6df0, #6ac1ff);
}

.gradient-blue3 {
    background: linear-gradient(45deg, #87CEEB, #1E90FF);
}

.gradient-blue4 {
    background: linear-gradient(45deg, #6495ED, #87CEFA, #6495ED);
}

.gradient-blue5 {
    background: linear-gradient(45deg, #007bff, #00a5ff);
}

.gradient-blue6 {
    background: linear-gradient(45deg, #62b1ff, #00c3ff);
}

.gradient-blue7 {
    background: linear-gradient(45deg, #73b9ff, #00ade2);
}

.gradient-red-discrete_math_1 {
    background: linear-gradient(45deg, #ff3333, #ff9999);
}

.gradient-red-discrete_math_2 {
    background: linear-gradient(45deg, #ce4747, #ff4747);
}

.gradient-red-logic_for_computer_science {
    background: linear-gradient(45deg, hsl(0, 100%, 85%), #ff0000);
}

.gradient-red-set_theory {
    background: linear-gradient(45deg, #ff4646, #ff9b9b);
}

.gradient-red-number_theory {
    background: linear-gradient(45deg, #be5252, #ff2323);
}

.gradient-red-computational_models {
    background: linear-gradient(45deg, #8B0000, #FF4500);
}

.gradient-red-computational_complexity {
    background: linear-gradient(45deg, #990000, #e60000);
}

.gradient-red-automata_logic_games {
    background: linear-gradient(45deg, #990000, #ff1313);
}

.gradient-red-computation_by_linear_algebra {
    background: linear-gradient(45deg, #bd0707, #cc0000);
}

.gradient-red-introduction_to_modern_cryptography {
    background: linear-gradient(45deg, #ff83bd, #ff2af4);
}

.gradient-green-linear_algebra_1a {
    background: linear-gradient(45deg, #339933, #99cc99);
}

.gradient-green-linear_algebra_2a {
    background: linear-gradient(45deg, #35944d, #6fcf85);
}

.gradient-green-group_theory {
    background: linear-gradient(45deg, #8BC34A, #64e668);
}

.gradient-green-fields_galois {
    background: linear-gradient(45deg, #8BC34A, #64e668);
}

.gradient-green-number_theory {
    background: linear-gradient(45deg, #d2ff6a, #cfe229);
}

.gradient-pink1 {
    background: linear-gradient(45deg, #ff80ee, #ffd1e7);
}

.gradient-pink2 {
    background: linear-gradient(45deg, #f397e7, #ffd1dc);
}

.gradient-pink3 {
    background: linear-gradient(45deg, #3b38ff, #f0bdff);
}

.gradient-orange1 { /* Not in use */
    background: linear-gradient(45deg, #ffa94d, #ffd699);
}

.gradient-orange2 { /* Not in use */
    background: linear-gradient(45deg, #ffb84d, #ffd699);
}

.gradient-orange3 {
    background: linear-gradient(45deg, #ffad00, #e7d272, #ffad00);
}

.gradient-orange4 { /* Not in use */
    background: linear-gradient(45deg, #db8504, #f8c06c);
}

.gradient-brown1 {
    background: linear-gradient(45deg, #633c1f, #967045, #cfb9a6);
}

.gradient-brown2 {
    background: linear-gradient(45deg, #7b5740, #7e4812);
}

.gradient-brown3 {
    background: linear-gradient(45deg, #4e3828, #7b5740, #a78567);
}

.gradient-rainbow1 { /* Not in use */
    background: linear-gradient(45deg, #9400d3, #bb5bff, #6e6eff, #52f852, #ffff00, #ff7f00, #ff0000);
}

.gradient-rainbow2 { /* Not in use */
    background: linear-gradient(45deg, #ff00ff, #d47cfa, #b055f1, #4f4ff3, #00ffff, #30dd95, #7fff7f, #ffff00, #ff7f00, #ff0000);
}


.gradient-teal1 {
    background: linear-gradient(45deg, #006666, #33cccc, #66ffff, #99ffff);
}

.gradient-teal2 { /* Not in use */
    background: linear-gradient(45deg, #008080, #00CED1, #40E0D0, #20B2AA);
}

.gradient-teal3 {
    background: linear-gradient(-45deg, #008080, #00CED1, #40E0D0, #21cec5);
}

.gradient-teal4 { /* Not in use */
    background: linear-gradient(45deg, #005f73, #0a9396, #94d2bd, #2a9d8f);
}

.gradient-teal5 { /* Not in use */
    background: linear-gradient(45deg, #008080, #00CED1, #40E0D0, #20B2AA);
}

.gradient-teal6 { /* Not in use */
    background: linear-gradient(45deg, #b2dfdb, #80cbc4, #4db6ac, #26a69a);
}

.gradient-teal7 { /* Not in use */
    background: linear-gradient(-45deg, #008b8b, #00CED1, #00768d);
}