@import url(main.css);
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,600,600italic");
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Press+Start+2P&display=swap');

body h2 {
    font-size: 5em !important;
}

/*----------------------------
          About Me
------------------------------*/

/* Title */
.inner-about-description{
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .title-about-page-section{
        padding-top: 1em;
        padding-bottom: 1em;
    }

    .title-about-page-section h2{
        margin: 0;
    }



.portrait-div{
    margin: 0 0 4em 0;
    max-width: 400px;
    max-height: 400px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;

    border: 10px solid #1e1e1e;
}

.portrait{
    width: 100%;
    height: auto;
    object-fit: cover;
}

/*----------------------------
          Code Block
------------------------------*/

.code-block {
    width: 100%;
    height: auto; /* Allows it to expand based on content */
    max-height: none; /* Removes any height restrictions */
    background-color: #1e1e1e; /* Dark coding background */
    color: #dcdcdc; /* Default text color */
    font-family: "Fira Code", monospace; /* Monospace font for coding */
    padding: 30px;
    border-radius: 8px;
    font-size: 1em;
    white-space: pre-wrap;
    line-height: 2.5;
    overflow: visible; /* Ensures it does not scroll inside */
}


.code-block span {
    display: inline-block; /* Ensures proper alignment */
    text-indent: 0; /* Prevents extra indentation */
    /* padding: 30px; */
}

.code-block .description {
    display: block; /* Makes the text appear on a new line */
    margin-left: 4em; /* Aligns it properly under "lastName =" */
    white-space: pre-wrap; /* Ensures long text wraps correctly */
    max-width: 80%; /* Prevents text from stretching too far */
}

.code-block .blue {
    color: #569cd6; /* Blue color for class */
}

.code-block .gray {
    color: #858585; /* Gray color for private */
}

.blue {
    font-weight: bold;
    color: #569cd6; /* Blue for keywords (class) */
}

.gray {
    color: #858585; /* Gray for access modifiers (private) */
}

.purple {
    color: #c586c0; /* Purple for data types (int, string, string[]) */
}

.green {
    color: #b5cea8; /* Green for values (1, "Sarah", "Dadoun", array items) */
    color: #FFEA00;
}

.code-block::before {
    content: "Profile.java"; /* Simulates a filename */
    display: block;
    font-size: 0.9em;
    color: #858585;
    margin-bottom: 5px;
    margin-top: -10px;
}

.code-block::-webkit-scrollbar {
    display: none; /* Hides scrollbar for Chrome & Safari */
}



/*----------------------------
          Languages
------------------------------*/

.section-languages{
    border-top: 1px solid #3e3e3e;
    border-bottom: 1px solid #3e3e3e;
    padding-bottom: 5em;
}

.inner-languages{
    width: fit-content !important;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.languages{
    padding: 3em 0 3em;
}

.language-list, .platform-list {
    width: fit-content !important;
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1px;
}

.language-list li, .platform-list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #292929;
    padding: 15px;
    border-radius: 10px;
    color: white;
    font-size: 1.2em;
    font-weight: bold;
    width: 120px;
    transition: transform 0.3s ease; 
}

.platform-list img, .language-list img{
    width: 50px;
    height: 50px;
    margin-bottom: 8px;
    filter: grayscale(100%); /* Converts images to grayscale */
    transition: filter 0.3s ease-in-out;
}


.platform-list li:hover img, .language-list li:hover img {
    filter: grayscale(0%); /* Restores original color on hover */
}

img[alt="Django Logo"]{
    filter: grayscale(100%) brightness(500%) contrast(90%);
}

img[alt="Java Logo"] {
    filter: grayscale(100%) brightness(220%) contrast(90%);
}

img[alt="AWS Logo"] {
    filter: grayscale(100%) brightness(220%) contrast(90%);
}