/* a font face is just a way of saying
"load this specific font file!" */
@font-face {
  font-family: "inconsolata"
  src: url("./inconsolata.woff") format("woff");
}

/* root is the absolute base  of our webpage
you can think of it as the place were we set defaults */
:root {
  --color-persil-orange: #f3933c;
  color: white;                            
  font-family: "inconsolata", monospace;    
  font-size: 0.8rem;                        
  background-image: url("./images/background2.png");
  background-size: cover;
}

/* parent is a <div> element I am using to make the layout
of the webpage, using somthing called grid 
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid */
#parent {
  max-width: 72rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-areas:
    "div-1 div-2 div-3"
    "div-4 div-4 div-4";
  background-color: black;
  margin-inline: auto;
  justify-content: center;
}

/* this is the image of persil */
#profile-image {
  width:  20rem;
  height: 22rem;
}

/* this is any banner image (e.g. css is awesome) */
.banner-image {
  width: 5rem;
  height: 2rem;
}

/* these are the images at the very bottom that are greyscaled
out, we set a filter on them to do this! */
.mosaic-image {
  width: 15rem;
  height: 15rem;
	filter:
	  brightness(1.12)
	  contrast(30%)
	  hue-rotate(285deg)
	  invert(9%)
	  opacity(103%)
	  saturate(0%)
	  sepia(0%)
	;
	transition: 0.3s;
}
/* this is a condition of the above, that occurs when the mouse
hovers over one of these images, in that case, we remove the filter
returning the original colour */
.mosaic-image:hover{
  filter: none;
  opacity: 1;
  transition: 0.8s;
}

/* this is some common styling between all of the grid divs
bellow. Each one also gets a #div<num> id so we can style them
individually too! */
.grid-div {
  overflow: hidden;
  display: grid;
  padding: 0.25rem;
  background-image: url("./images/background.png");
}
#div1 {
  grid-area: div-1;
  border: solid var(--color-persil-orange);
  border-width: 2px 0px 2px 2px;
  border-top-left-radius: 12px;
  place-items: center;
}
#div2 {
  grid-area: div-2;
  border: solid var(--color-persil-orange);
  border-width: 2px 2px 2px 0px;
}
#div3 {
  grid-area: div-3;
  border: solid var(--color-persil-orange);
  border-width: 2px 2px 2px 2px;
  border-top-right-radius: 12px;
}
#div4 {
  grid-area: div-4;
  border: solid var(--color-persil-orange);
  border-width: 2px 2px 2px 2px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
/* content is the div inside each of the grid
divs. we style them seperately to seperate content from
its containers */
.content {
   justify-self: center;
    align-self: center;
}