/* Style the welcome section */
#welcome-section {
    height: 100vh;
    width: 100%;
    display: flex;
}

/* Style the sidebar */
#sidebar {
    flex-wrap: nowrap;
    height: 100vh;
    flex-basis: 5em;
    background-image: linear-gradient(to top right, #000000, pink);
}

/* Style for the animated box on the sidebar */
#sidebar div {
    border: 1px solid pink;
    height: 1em; 
    width: 1em; 
    animation-name: animatebox;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    z-index: 0;
}

/* This animation moves the box right to left */
@keyframes animatebox {
    0%   {}
    50%  {transform: translate(4em, 0)}
    100% {transform: translate(0, 0)}
  }

/* Add animation delay to box to create a cool effect */
#delay-2 {
    animation-delay: 2s;
}

#delay-4 {
    animation-delay: 4s;
}

#sidebar div:hover {
    transform: scale(4); /* To grow the box, when user hovers over the box */
}

/* Style the welcome area */
#welcome-area{
    z-index:1 ;
    flex-grow: 1;
    background-image: linear-gradient(to bottom right, white, #ADD8E6);
    position: relative;
}

/* Style my name */
#welcome-area h1{
    margin-top: 3em;
    margin-left: 1em;
}

/* Style the welcome message */
#welcome-message{
    padding-left: 5em;
    padding-top: 1em;
    font-size: 2.5em;
}

/* The animation code for my name */
@keyframes animatename {
    0%   {color: red; font-family: "Monospace"}
    25%  {color: yellow; font-family: "Verdana"}
    50%  {color: blue; font-family: "Cursive"}
    75%  {color: green; font-family: "Comic Sans MS" }
    100% {color: pink;  font-family: "Fantasy"}
  }
  
/* Initialize the animation, when user hover my name */
#welcome-area h1:hover{
    position: relative;
    animation-name: animatename;
    animation-duration: 10s;
}



/* Style the hover for trigger-hidden-text */
#trigger-hidden-text:hover{
    color: red;
}

/* Style the show-text-one-line */
#show-text-one-line{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    padding-right: 1em;
}

/* Style the projects section */
#projects {
    width: 100vw;
    background-color: #ADD8E6;
    padding: 10em;
    z-index: 3;
    position: relative;

}
/* Style the heading under projects */
#projects h1{
    text-align: center;
    padding-bottom: 1em;
}

/* Style the project table */
#projects-table {    
    flex-wrap: wrap;
    flex-direction: row;
    display: flex;
    align-items: stretch;
    align-content: space-around;
    justify-content: space-around;
}

/* Style the links section */
#info {
    padding: 2em;
    background-color: #bdbdbd;
    width: 100vw;
}

/* Style the navigation bar*/
#navbar {
    overflow: hidden;
    background-color: #333;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
    z-index:100; /* To keep navbar at the top of the webpage */
}

/* Style the links inside the navbar */
#navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    font-size: 1.5em;
    text-decoration: none;
}

/* Style the links inside the navbar on hover */
#navbar a:hover {
    color: black;
    background-color: white;
}

/* Use the Helvetica font for h1 and h2 tags */
h1 {
    font-family: 'Helvetica';
}

h2 {
    font-family: 'Helvetica';
}

/* Style the project tiles */
.project-tile {
    background-color: white;
    flex-basis: 0;
    border: solid;
    padding: 4em;
    border-width: 0.5em;
    border-radius: 5%;
    margin: 1em;
    text-align: center;
    min-width: 25em;
}

/* Style the project tile's anchors */
.project-tile a {
    color: black;
    font-size: 2em;
    font-family: 'Helvetica';
    display: inline-block;  
}

/* Style the links table */
#links-table {    
    flex-wrap: wrap;
    flex-direction: row;
    display: flex;
    align-items: stretch;
    align-content: space-around;
    justify-content: space-around;
}

/* Style the profile link */
#profile-link {
    font-size: 2em;
    padding-top: 1.5em;
    height: 6em;
    width: 6em;
}

#profile-link:hover{
    transform: scale(1.2); /* To grow the button, when user hovers over the button */
}

/* Style the profile link's image */
#profile-link img {
    position: relative;
    max-width: 100%;
}

  /* If the screen size is 601px or more */
@media only screen and (min-width: 601px) {
    h1 {
        font-size: 5em;
    }
    h2 {
        font-size: 2em;
    }
}
  
  /* If the screen size is 600px or less */
  @media only screen and (max-width: 600px) {
    /* Style my name */
    #welcome-area h1{
        margin-top: 4em;
        margin-left: 2em;
    }
    /* Style the welcome message */
    #welcome-message{
        padding-top: 3em;
        padding-left: 3em;
        padding-right: 1em;
        font-size: 2em;
    }
    
    /* Style the h1 */
    h1 {
        font-size: 3em;
    }

    /* Style the h2 */
    h2 {
        font-size: 2em;
    }

    /* Style the projects section */
    #projects {
        padding: 1em;
    }

    /* Style the projects h1 section */
    #projects h1{
        text-align: center;
        padding-top: 1em;
        padding-bottom: 1em;
    }

    /* Style the project tile */
    .project-tile {
        padding: 1em;
        min-width: 80vw;
    }

    /* Style the project tile's anchor */
    .project-tile a {
        font-size: 1em;
    }

    /* Style the profile link */
    #profile-link {
        font-size: 2em;
        padding-top: 1em;
        height: 4em;
        width: 4em;
    }
    
    /* Style the profile link's image */
    #profile-link img {
        position: relative;
        max-width: 100%;
    }
}