/* Importing the Raleway font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

/* Resetting box model and removing default margin and padding */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Setting smooth scrolling behavior for the whole document */
html{
    scroll-behavior: smooth;
}

/* Styling selected text */
::selection{
    background-color: #ff8349;
}

/* Styling selected text for Mozilla Firefox */
::-moz-selection{
    background-color: #ff8349;
}

/* General body styles */
body{
    font-family: "Raleway", sans-serif; /* Applying Raleway font to the whole document */
    display: flex;
    justify-content: space-evenly; /* Horizontally centering content */
    align-items: center; /* Vertically centering content */
    flex-direction: column; /* Setting the main axis of flex layout as column */
    background: linear-gradient(46deg, #000000, #ff8349); /* Gradient background */
    min-height: 100vh; /* Setting minimum height to full viewport height */
    color: white; /* Setting text color to white */
    font-size: large; /* Setting default font size */
}

/* Styling profile card */
.card {
    margin: 5px; /* Adding a small margin */
    float: left; /* Allowing elements to float left */
    width: 300px; /* Setting a fixed width */
    border-radius: 28px; /* Adding border radius */
    padding: 20px; /* Adding padding */
    margin: 20px; /* Adding margin */
    transition: .5s ease-in-out; /* Adding transition effect */
    width: 85%; /* Setting width to 85% of its container */
    box-shadow: 0px 0px 40px 1px #0000002e; /* Adding box shadow */
}

/* Styling profile picture */
.profile-picture img {
    width: 200px; /* Setting width */
    height: auto; /* Allowing height to adjust proportionally */
    border-radius: 50%; /* Making the image circular */
    cursor: pointer; /* Adding pointer cursor */
    transition: 2s ease-in-out; /* Adding transition effect */
}

/* Header styles */
.header{
    display: flex; /* Flex layout */
    justify-content: space-between; /* Spacing elements evenly */
    align-items: center; /* Vertically centering elements */
    padding: 20px; /* Adding padding */
}

/* Social media links */
.links {
    font-size: 2rem; /* Setting font size */
}

.links a{
    margin: 4px; /* Adding margin */
    color: rgba(255, 255, 255, 0.324); /* Setting text color */
}

.links a:hover{
    color: white; /* Changing text color on hover */
}

/* Styling horizontal rule */
.border{
    width: 50%; /* Setting width */
    margin: 20px auto; /* Centering horizontally with margin */
    border-color: rgba(255, 255, 255, 0.324); /* Setting border color */
}

/* Biography section styles */
.bio {
    padding: 15px; /* Adding padding */
    text-align:left; /* Aligning text to the left */
    letter-spacing: 3px; /* Adding letter spacing */
    line-height: 3rem; /* Setting line height */
}

/* Styling links on hover */
.links a img:hover{
    width: 40px; /* Changing image size on hover */
}

/* Button styles */
.buttons{
    display: flex; /* Flex layout */
    justify-content: space-between; /* Spacing elements evenly */
    align-items: center; /* Vertically centering elements */
    list-style: none; /* Removing default list styles */
}

.buttons a{
    text-decoration: none; /* Removing default link underline */
    background: black; /* Setting background color */
    border-radius: 18px; /* Adding border radius */
    color: white; /* Setting text color */
    padding: 4px 20px; /* Adding padding */
    margin: 20px; /* Adding margin */
    font-size: 1.2rem; /* Setting font size */
    transition: 0.5s ease-in-out; /* Adding transition effect */
    border: transparent; /* Removing border */
}

.buttons a:hover{
    color: black; /* Changing text color on hover */
    background-color: white; /* Changing background color on hover */
}

/* Styling scrollbar */
/* width */
::-webkit-scrollbar {
    width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; /* Adding scrollbar track background color */
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #777; /* Adding scrollbar handle color */
    border-radius: 28px; /* Adding border radius */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; /* Changing scrollbar handle color on hover */
}

/* Media query for smaller screens */
@media screen and (max-width: 700px) {
    .c1{
        width:auto;
    }
    
    .header{
        display: flex;
        flex-direction: column; /* Changing flex direction for smaller screens */
    }
}