/*======================================
general syles 

========================================*/

body{
    background-color: #ffffff;
    margin: 0 auto;
}


header {
    background-color: #000000;
    border-bottom: 1px solid #000000;
    position: fixed;
    width: 100%;
    z-index:10;
}


h1{
    color:#000000;
    margin: 0 auto 20px auto; /* centers the heading and adds spacing below it */
    font-size: 32px;
}


p{
    color: #000000;
    font-size: 25px;
    line-height: 2; /* increases the space between lines for better reading
    max-width: 800px; /* limits the width of the paragraph for better reading*/
    margin: 0 auto 20px auto; /* centers the paragraph and adds spacing below it */
}





/*======================================
header sttyle with icons and links
this contains the links to all other sites and github and the icons for them
========================================*/

header ul {
    list-style-type: none; /* Remove default list styling */
    margin: 30px auto; /* centers the lsit and adds vertical spacing */
    padding: 0 20px; /* adds horizontal padding*/
}

header li {
    color: #ffffff;
    display: inline-block; /*displays list side-by-side*/
    margin-right: 20px; /* adds spacing between the words */ 
    width: 100px; /* sets a fixed width for each list item */
}


header li a{
    color: inherit;
    text-decoration: none;
    display: inline-block;
    width: 100%; /* makes the link fill the entire list item */
}

header li i {
    margin-right: 8px; /* Adds space between the icon and the word "Git Hub" */
    font-size: 1.1rem; /* Makes the icon slightly larger if you want it to stand out */
    vertical-align: middle; /* Keeps the icon aligned with the text baseline */
}

header li:hover a {
    color: #01e9fa;
}
header li:hover i {
    color: #01e9fa;
}









/*======================================
styles for he hero image
which is the giant image at the begining of the page that 
has the name of the page in the middle of it
========================================*/

.hero{
    background-image:url('storym_beach_night.jpg');
    background-color: #cccccc; /* Fallback color if the image fails to load */
    height: 75vh; /*sets the height to 75% of the viewportheight*/
    background-position: center;
    background-repeat: no-repeat; /*ensures the image does not repeat if it is smaller than the container*/
    background-size: cover; /*scales the image to cover the entire container while maintaining its aspect ratio*/

    display: flex;
    justify-content: center;
    align-items: center;
    text-align:center;

}

.hero h1 {
    color: #ffffff;
    font-size: 80px;
    /* Horizontal, Vertical, Blur-radius, Color */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}





/*======================================
css code for the scroll box, it is in every sections and allows you to scroll
========================================*/
.scroll-box {
    height: 250px; /* The fixed height of your box */
    overflow-y: auto; /* The magic property that adds the vertical scrollbar */
    border: 2px solid #e0e0e0; /* The outline of the box */
    border-radius: 8px; /* Rounds the corners of the box */
    padding: 10px;
    background-color: #fafafa; /* A very light grey background to make the box stand out */
}


.scroll-box p {
    margin: 10px 0 15px 0;
    max-width: none; /* Allows the text to fill the entire width of the box */
}



/*======================================
About section
========================================*/

.about-section {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Aligns the image and text to the top */
    gap: 50px; /* Creates space between the picture and the text */
    max-width: 1350px; /* Keeps the section from getting too wide */
    margin: 60px auto; /* Centers the whole block on the page */
    padding: 0 40px;
}

.about-image img {
    width: 450px; /* Adjust this to make your picture bigger or smaller */
    height: auto;
    border-radius: 12px; /* Gives the image nice rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Adds a subtle shadow for depth */
}

.about-content {
    flex: 1; /* Tells the text area to take up the remaining space */
    text-align: left; /* Left-aligns text for easier reading */
}

.about-content h1 {
    margin: 0 0 15px 0; /* Removes default margins to align with the top of the image */
    text-align: center; 
}





/*======================================
experiance section
========================================*/

.experience-section{
    display: flex;
    flex-direction: row-reverse; /*does the work of making the image and text sit side by side*/
    justify-content: center;
    align-items: flex-start; /* Aligns the image and text to the top */
    gap: 50px; /* Creates space between the picture and the text */
    max-width: 1350px; /* Keeps the section from getting too wide */
    margin: 60px auto; /* Centers the whole block on the page */
    padding: 0 40px;
}

.experience-image img {
    width: 350px; /* Adjust this to make your picture bigger or smaller */
    height: 350px;
    border-radius: 12px; /* Gives the image nice rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Adds a subtle shadow for depth */
}

.experience-content{
    flex: 1; /* Tells the text area to take up the remaining space */
    text-align: left; /* right-aligns text for easier reading */ 
}

.experience-content h1{
    margin: 0 0 15px 0; /* Removes default margins to align with the top of the image */
    text-align: center;
}



/*======================================
docker section
========================================*/

.docker{
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Aligns the image and text to the top */
    gap: 50px; /* Creates space between the picture and the text */
    max-width: 1350px; /* Keeps the section from getting too wide */
    margin: 60px auto; /* Centers the whole block on the page */
    padding: 0 40px;
}

.docker-image img {
    width: 350px; /* Adjust this to make your picture bigger or smaller */
    height: 350px;
    border-radius: 12px; /* Gives the image nice rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Adds a subtle shadow for depth */
}

.docker-content h1{
    margin: 0 0 15px 0; /* Removes default margins to align with the top of the image */
    text-align: center;
}

.docker-content {
    flex: 1; /* Tells the text area to take up the remaining space */
    text-align: left; /* Left-aligns text for easier reading */
}


/*======================================
Plex
========================================*/

.Plex{
    display: flex;
    flex-direction: row-reverse; /*does the work of making the image and text sit side by side*/
    justify-content: center;
    align-items: flex-start; /* Aligns the image and text to the top */
    gap: 50px; /* Creates space between the picture and the text */
    max-width: 1350px; /* Keeps the section from getting too wide */
    margin: 60px auto; /* Centers the whole block on the page */
    padding: 0 40px;
}

.Plex-image img {
    width: 350px; /* Adjust this to make your picture bigger or smaller */
    height: 350px;
    border-radius: 12px; /* Gives the image nice rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Adds a subtle shadow for depth */
}

.Plex-content h1{
    margin: 0 0 15px 0; /* Removes default margins to align with the top of the image */
    text-align: center;
}

.Plex-content {
    flex: 1; /* Tells the text area to take up the remaining space */
    text-align: left; /* Left-aligns text for easier reading */
}