/* This is the CSS file for the website. It is linked to the HTML file. */


/*Defining my design system - colours*/
:root {
  --primary-color: #FF7B61;
  --secondary-color: #FFF27A;
  --tertiary-color: #FFA254;
  --quaternary-color: #E8504D;
  --quinary-color: #FF549D;
  --senary-color: #47FFB7;
  --septenary-color: #7A54FF;
  --octonary-color: #7AFF80;

  --main-bg-color: #101011;
  --secondary-bg-color: #1C1C1D;
  --main-text-color: #F0F0F0;
  --secondary-text-color: #F5F5F5;
  --h2-text-color: #434343;
  --h3-text-color: #f5f5f5;
  --tertiary-text-color: #e9e9e9;

  --primary-gradient: linear-gradient(135deg, #7A54FF 100%, #47FFB7 100%);
  --secondary-gradient: linear-gradient(135deg, #FF549D 0%, #E8504D 100%);



  --button-background-color: var(--primary-color); 
  --button-text-color: var(--main-bg-color);
  --button-hover-color: var(--tertiary-color);
  --button-hover-text-color: var(--main-bg-color);
  --button-active-color: var(--tertiary-color);
  --button-active-text-color: var(--main-bg-color);
  --button-border-radius:8px;

}

/* Defining my button templates */

button {
  color: var(--button-text-color);
  background-color: var(--button-background-color);
  border: none;
  padding: 5px 20px;
  border-radius: var(--button-border-radius);
  transition: background-color 0.4s ease;
}

button:hover {
  background-color: var(--button-hover-color);
  color: var(--button-hover-text-color);
}

button:active {
  background-color: var(--button-active-color);
  color: var(--button-active-text-color);
}



/*Defining my design system - text

body is the overall text defaults. h1, h2, h3 and p are the specific overrides used throughout the website*/

body {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, sans-serif;
    margin: 0;
    padding: 0;
    background-color:var(--main-bg-color);
  }

h1 {
  color: var(--main-text-color);
  font-size: 2.5em;
  font-family: 'Krona One', Work Sans, Geneva, Verdana, sans-serif, sans-serif;
  src: url('https://fonts.googleapis.com/css?family=Krona+One')
}

h2 {
  color: var(--h2-text-color);
  font-size: 1.5em;
  font-family: 'Krona One', Work Sans, Geneva, Verdana, sans-serif, sans-serif;
  src: url('https://fonts.googleapis.com/css?family=Krona+One')
}

h3 {
  color: var(--h3-text-color);
  font-size: 1.5em;
  font-family: 'Krona One', Work Sans, Geneva, Verdana, sans-serif, sans-serif;
  src: url('https://fonts.googleapis.com/css?family=Krona+One')
}

p {
  color: var(--main-text-color);
  font-size: 1em;
  line-height: 1.5em;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}



main {
  color: var(--main-text-color);
  padding: 20px;
}

footer {
  background-color: var(--main-bg-color);
  color: var(--secondary-text-color);
  padding: 10px;
  margin: 30px;
  text-align: left;
}



/* This is the CSS for the header (navigation bar) of the website.

The navigation bar is separated into 2 divisions, called left-nav and right-nav; these are inclosed by a division called .header*/

.header {
    background-color: var(--main-bg-color);
    display: flex;
    padding: 0px 40px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    box-shadow: 1px 1px 10px 0px #000000;  
    
    position:fixed;
    top:0;
    width:100%;

    font-size: 0.6em;
    font-family: 'Krona One', Work Sans, Geneva, Verdana, sans-serif, sans-serif;
    src: url('https://fonts.googleapis.com/css?family=Krona+One')

  }

/* Left.nav settings - */

.left-nav {
  list-style-type:none;
  margin: 0px;
  padding: 0px;

}
.left-nav li a {
  text-decoration:none;
  color: var(--main-text-color);
  } 


/* Right.nav settings - */

.right-nav {
  margin: 10px 60px; 
}

.right-nav ul li{ 

  display: inline-block;

  padding: 0px 10px;
}

.right-nav ul li a {
    color: var(--main-text-color);
    text-decoration: none;
  }


/* This is the hero section of the site */

/* Hero container */

.adventures {
  color: linear-gradient (135deg, #7A54FF 100%, #47FFB7 100%);
  margin: -30px 0px 0px 0px;
  text-align: left;
}

.row {

display : flex;
align-items: top;
margin: 20px;

    @media screen and (max-width: 600px) {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 0px;
    }   

}
  

.twocolumnhero {
  flex: 50%;
  padding: 20px 20px;
  margin: 60px 10px;
  align-items: center;
  justify-content: center;
  border: #444444 solid 0px;
}


.twocolumn {
  flex: 50%;
  padding: 10px 20px;
  margin: 10px 20px;
  align-items: center;
  justify-content: center;
  border: #444444 solid 0px;
  
}


.threecolumn {
  flex: 33.33%;
  padding: 20px 20px;
  margin: 0px 30px 20px 0px;
  border: #444444 solid 0px;
  border-radius: 10px;
  background-color: var(--secondary-bg-color);

}