/*Amal Kariyawasam, 2023, Only one CSS file is used for the portfolio site ! 
*/

body
{
  font-family: Arial, Helvetica, sans-serif;
  display: flex; /*Enable flexbox layout */
  flex-direction: column; /* Set flexbox direction to column */
  margin: 0; /*Set the margin to 0 */
  min-height: 100vh; /* The min-width CSS property sets the minimum width of an element. 
  It prevents the used value of the width property from becoming smaller than the value specified for min-width. */
}
.body {
  flex: 1;
  display: flex;
}

/* ********** Start of code for Navigation Bar **********  */
.nav-bar
{
  background-color:#1F2937;
  padding:1vw;
  display: flex; /*Enable flexbox layout */
  flex-direction: row;
  justify-content: space-between; /*This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. 
  It also exerts some control over the alignment of items when they overflow the line. */
  flex-wrap: wrap;
  flex-shrink: 0;

 }

.nav-bar ul
{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.nav-bar li
{
float:left;
}

.nav-bar li a 
{
  color:#F9FAF8;
  padding-top: 0.5vw;
  padding-bottom: 0.5vw;
  padding-left: 0.5vw;
  padding-right: 0.5vw;
  text-decoration: none;
  font-size:2em;
}

.nav-bar li a:hover
{
  background-color: #15d48e;
}

.nav-bar a:active {
  background-color: #0704aa;
}

/* ********** End of code for Navigation Bar **********  */


.intro
{
  display: flex; /*Enable flexbox layout */
  flex-direction: column;
  justify-content: center;
  padding:2em;
  background-color: #1F2937;
  color:#e7dddd;
  font-size: 1.3em;
  font-weight: 700;
    
}

.project-intro {
  display: flex;
  flex-direction: column;
  padding:2em;
  background-color: #E5E7EB;
}

.project-intro p {
  font-size: 1.5em;
  text-align: center;
}

.project-intro h1 {
  justify-content: center;
  background-color: #E5E7EB;
  color:#1F2937;
  padding:0.5em;
}

.portfolio
{
  
  display: flex; /*Enable flexbox layout */
  flex-direction: row;
  flex-wrap:wrap;
  flex-basis: 0;
  flex:1;
  column-gap: 15px;
  color:black;
  font-size:1.2em;
  row-gap: 15px;
  justify-content:baseline;
  align-items:stretch;
  
}

.project-1, .project-2, .project-3, .project-4, .project-5
{
  display:flex;
  flex-wrap: wrap;
  flex-direction: column;
  margin-bottom: -1vw;
  padding:5px;
  margin:10px;
  border-radius: 25px;
  border-color: #3882f6;
  border-width: 0.2vw;
  border-style: solid;
  width:60vh;
  
}

.footer
{
text-align:center;
padding: 2vw;
display: block;
background-color: #1F2937;
color:#fbfbfe;
}

/* ********** Start of code for Links **********  */
a:link {
  color: #2997ff;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: #027a50;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #7940e3;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: #086342;
  background-color: transparent;
  text-decoration: underline;
}

/* ********** End of code for Links **********  */

h1
{
  display: flex; /*Enable flexbox layout */
  justify-content: center; /*This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. 
  It also exerts some control over the alignment of items when they overflow the line. */
  background-color: #1F2937;
  color:#fbfbfe;
  text-align: center;
  font-size: 2.5em;
  margin:0px;
}

p{
  margin:0px;
}