/* Fixed Entities */
:root{

  /* Background */
  --backgroundColor: rgb(255 239 217);
  --backgroundColor2: black;
  --backgroundColor3: burlywood;
  
}

/* Body */
body{

  /*Background*/
  background-color: var(--backgroundColor);

}

/* ====================================================================================================================================================== */
/* Links */
a{

  /* Decoration */
  text-decoration: none;

  /* Color */
  color: black;

}

/* ====================================================================================================================================================== */
/* Navigation Bar */
.main{

  /* Display */
  display: grid;
  grid-template-areas: "header . . . . nav nav nav nav";


  /* Position */
  position: relative; 

}

/* Page head */
.heading{

  /* Display */
  display: flex;

  /* Position */
  position: relative;
  left: 1%;
  top: -10%;

  /* Text */
  color: wheat;

}
/* Page head photo */
.heading img{

  /* Grid */
  grid-area: header;

  /* Position */
  position: relative;
  left: 1%;
  top: -10%;

  /* Dimenssions */
  width: 100px;
  height: 100px;
  margin-right: 5%;

}

/* Navigation */
.nav{

  /* Display */
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-area: button;

  /* Dimenssions */
  width: 50%;
  height: 50px;

  /* Background */
  background-color: var(--backgroundColor3);
  box-shadow: 5px 5px rgb(190, 149, 95);

  /* Position */
  position: fixed;
  right: 0;
  top: 0;
  align-items: center;
  text-align: center;

}

/* Navigation buttons */
.pages{

  /* Text */
  color: rgba(0, 0, 0, 0.603);
  font-size: larger;

  /* Dimenssions */
  padding: 2% 3%;
  margin: 0 2% 0 5%;

}
/* Navigation opened button */
.pages.active{

  /* Text */
  font-size: x-large;
  color: black;

}

/* ====================================================================================================================================================== */
/* Header */
header{
  /* Background */
  background-color: var(--backgroundColor3);

  /* Text */
  color: white;
  text-align: center;

  /* Dimenssion */
  width: 102%;
  padding: 5% 0;
  margin: 0 -1%;
}

/* ====================================================================================================================================================== */
/* Footer */
footer{
  
  /* Dimenssions */
  width: 100%;
  padding: 1%;
  margin: 2% -1% -3%;
  
  /* Text */
  text-align: center;
  color: rgba(255, 255, 255, 0.832);
    
  /* Backgrouns */
  background-color: var(--backgroundColor3);

  /* Position */
  position: relative;
  bottom: 0;

  
}
/* Footer photos */
footer img{
  
  /* Dimenssions */
  width: 2rem;
  height: 2rem;
  padding: 0.5%;

}
/* Footer links */
footer a{
  
  /* Text */
  color: aliceblue;

}
/* Footer links hover */
footer a:hover{

  color: blue;

}
/* Social Media icons */
.social{
    
  /* Dimenssions */
  margin: 3%;

  /* Text */
  font-size: 1.1rem;

}