/*============================*/
/* ===== General CSS ===== */ 
/*============================*/

body {
    background-image: url(../Assets/Images/background-image1.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0;
    min-height: 100vh;
    display: flex;               
    justify-content: center;     
    align-items: center;         
}

.page {
    max-width: 1250px;
    margin: 40px auto;
    background: #e0e0e0; 
    padding: 40px;              
    border: 4px solid #000;      
    box-shadow: 0 0 0 4px #000, 0 0 0 8px #000; 
    font-family: 'Courier New', monospace, serif;
    color: #000;
}

.profile-picture {
    display: flex;
    align-items: center;
    gap: 20px;
}

.profile-pic {
    width: 80px;      
    height: 80px;     
    border-radius: 50%; 
    object-fit: cover; 
    border: 3px solid #000;
    align-self: flex-end;
}

@media (max-width: 600px) {
    .container {
        flex-direction: column;
    }
}


/*----------------------------*/
/* ===== Tech Stack CSS ===== */
/*----------------------------*/

/* Scales Python logo */ 
.python-tech {
    width: 50px;
    height: 50px;
}

/* Scales HTML logo */
.html-tech {
    width: 50px;
    height: 50px;
}

/* Scales CSS logo */
.css-tech {
    width: 50px;
    height: 50px;
}

.js-tech {
    width: 50px;
    height: 50px;
}

.git-tech {
    width: 50px;
    height: 50px;
}

.sql-tech {
    width: 50px;
    height: 50px;
}

.unity-tech {
    width: 50px;
    height: 50px;
}

.ps-tech {
    width: 50px;
    height: 50px;
}
/*----------------------------*/
/* ====   Projects CSS   ==== */
/*----------------------------*/

/* Project 1 Scale */
.project-one {
    width: 50px;
    height: auto;
}

/* Project 2 Scale */
.project-two {
    width: 50px;
    height: auto;
}

/* Project 3 Scale */
.project-three {
    width: 50px;
    height: auto;
}

/* Project 4 Scale */
.project-four {
    width: 50px;
    height: auto;
}

/*----------------------------*/
/* ====   Socials CSS   ==== */
/*----------------------------*/

.Contacts {
    display: flex;           
    gap: 10px;               
    align-items: center;
}

.Contacts img {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

.Contacts img.linkedin {
    margin-left: -15px;
}

.location {
    width: 20px;
    height: 20px;
}