/* 

This CSS file is contains the CSS rule sets for 
    - index.html
    - any universal elements that all pages use

The CSS for the take-action.html is in take-action.css

*/

/************************************************/
/************* UNIVERSAL ELEMENTS ***************/
/************************************************/
/*
font-family: 'Coming Soon', cursive;
                            For paragraphs
font-family: 'Overlock', cursive;
                            For subheadings
font-family: 'Timmana', sans-serif;
                            For main Heading*/

/* TODO: Customize your font properties and background color for all elements inside the <body> and <html> tags */
body,
html {
  height: 100%;
  font-size: 20px; /* Change the font size*/
  font-family: "Coming Soon", cursive; /* Change the font */
  line-height: 1.25em; /* Change the line height size*/
  margin: 1px;
  color: white; /* Change the font color*/
  background-color: #345995; /* Change the background color */
  box-sizing: border-box;
}

h1 {
  letter-spacing: 5px;
  font-size:26px;
  /*TODO: Change the font-family property to your linked font*/
  font-family: "Roboto Mono", sans-serif;
  color: #EECD59;
  text-align: center;
  font-family: 'Timmana', sans-serif;
}

/*TODO: Change the font-family property to your linked font*/
h2 {
  letter-spacing: 3px;
  font-size: 17px;
  font-family: "Roboto Mono", sans-serif;
  color: white;
  text-align: center;
  line-height: 1.3em;
}

/*TODO: Change the color of a link when a person hovers over it*/
p a {
  color: #028D71;
  text-decoration: underline;
}

/************************************************/
/*************** CSS FOR NAV BAR ****************/
/************************************************/

/* All of these TODOs are optional. You should change the styling based on your mockup */

/* TODO (optional): Change the background color and/or border style */

ul.nav-bar {
  /* Styling for the <ul class="nav-bar"> element */
  list-style-type: none;
  margin: 0;
  padding-top: 1px;
  overflow: hidden;
  background-color: #43d6b9ff;
  border-style: solid;
  border-color: #028D71;
}

/* TODO (optional): Change the font size*/

li.nav {
  /* Styling for the <li class="nav"> element */
  float: right;
  font-size: 15px;
}

/* TODO (optional): Change the font color, decoration, and/or case */

li.nav a {
  /* Styling for the <a> elements in <li class="nav"> */
  display: block;
  color: #028D71;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
}

li.other-nav {
  padding-bottom:30px;
}

/* TODO (optional): Change the background color and/or font color when the mouse hovers over an item */

li.nav a:hover {
  /* Styling for the <a> elements when the mouse is hovering in <li class="nav"> */
  background-color: #028D71;
  color: #43d6b9ff;
}

/************************************************/
/*********** CSS FOR FLEXBOX HEADING ************/
/************************************************/

/* TODO: Review the CSS properties to the flexbox container for title and intro text */
.flex-container {
  display: flex; /* Set the flexbox display */
  flex-direction: row-reverse; /* Configure the flex items to row */
  flex-wrap: wrap; /* Don’t wrap the flex items */
  justify-content: center; /* Justify the flex items to the center */
  align-items: center; /* Align the flex items to the center */

  /* Design properties */
  background-color: #028D71;
  padding: 7px;

  /* Positioning properties */
  position: absolute;
  left: 20%;
  right: 20%;
  top: 40%; /* Change this value to move the box up or down */

  /*Debugging Tip: Uncomment the line below to see the outline of the container*/
  /*border-style: dotted;*/
}

/* TODO: Review the CSS properties to the flex item for the heading (the left box) */
.heading-home {
  padding: 2%;
  color: #43d6b9ff;
  font-size: 20px;
  letter-spacing: 10px;
  line-height: 60px;
  text-align: center;

  /*Debugging Tip: Uncomment the line below to see the outline of the container*/
  /*border-style: dotted;*/
}

/* TODO: Review the CSS properties to the flex item for the intro text (the right box) */
.intro-text {
  background-color: #8C0E03; /* Add your own background color */
  padding: 3%;
  margin: 3%;
  color: white; /* Add the color of your font */
  font-size: 15px; /* Add your font size*/
  letter-spacing: 2px; /* Adds space between letters */
  line-height: 1.4em; /* Adds space between lines */
  text-align: center;

  /*Debugging Tip: Uncomment the line below to see the outline of the container*/
  /*border-style: dotted;*/
}

/************************************************/
/*************** PARALLAX SCROLL ****************/
/************************************************/

/*-----------TEXT SECTIONS-----------*/

/* TODO (optional): Change the background color and/or text alignment */

.text-section {
  background-color: #03CEA4;
  padding: 20px 45px;
  margin: 35px;
  text-align: center;
}

/*---------IMAGE STYLING + PARALLAX PROPERTY---------*/

/* TODO: Add the CSS selector for each image to the collective image rule set */

.main-message,
.image-one,
.image-two{
  display: flex;
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #345995;
  background-size: cover;
  min-height: 100%; /* This adjusts the height of the image */
  justify-content: center;

  /* TODO: Add the property to create the parallax scrolling effect here */
  background-attachment: inherit;
}


.main-message,
.image-one, 
.image-two{
  /* The background image */
  background-image: url("img_tree.gif");

  /* Set a specified height, or the minimum height for the background image */
  min-height: 500px;

  /* Set background image to fixed (don't scroll along with the page) */
  background-attachment: fixed;

  /* Center the background image */
  background-position: center;

  /* Set the background image to no repeat */
  background-repeat: no-repeat;

  /* Scale the background image to be as large as possible */
  background-size: cover;
}
/* TODO: Replace the current image URL with your own. This is the top image on your homepage. */
.main-message,
.image-one,
.image-two{
  background-image: url("https://cdn.glitch.com/d6b4179e-4038-4e2f-9646-99de0bec1eb1%2F73ccea2a-3a92-4480-bd6c-2e76cae0cebf.image.png?v=1594760367964");
}


.cutting{
  background-image: url("https://cdn.glitch.com/d6b4179e-4038-4e2f-9646-99de0bec1eb1%2F5d3a6db3-51ee-42cf-a968-72605319bee6.image.png?v=1594867979227")
}
/* TODO: Replace the current image URL with your own */

/* TODO: Add a second background image. Make sure you add this class selector to the collective image rule set above */

/* TODO: Add more background images by repeating the process above */

/*-----------IMAGE ATTRIBUTIONS (if required)-----------*/
.attributions {
  font-size: 12px;
  text-align: right;
  margin-right: 10px;
}

.section2{
  padding:60px;
  box-sizing: border-box;
}

/******************************************************/
/***** CHANGE INDEX.HTML CSS BASED ON SCREEN SIZE *****/
/******************************************************/

/* TODO: Add a breakpoint if the screen is 700px or less */

/* TODO: Add additional breakpoints based on your website's design */
