html {
  height: 100%;
  width: 100%;
}
/*12 Span Grid*/
.layout{
  border: 2px blue solid;
  display: grid; 
  grid:
    "span12 span12 span12 span12 span12 span12 span12 span12 span12 span12 span12 span12 " 1fr
  "span6 span6 span6 span6 span6 span6 . . . . . ." 1fr
  ". . . . . span3 span3 spand3 . . . ." 1fr
  ". . . . span1 . . . . . . ." 1fr
  / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 8px;
}
.span12 {grid-area: span12; background-color: grey;}
.span6 {grid-area: span6; background-color: grey;}
.span3 {grid-area: span3; background-color: grey;}
.span1 {grid-area: span1; background-color: grey;}

/*3x3 Grid*/
.layout2 {
  width: 90%;
  height: 300px; 
  display: grid; 
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  gap: 8px; 
  border: 2px solid red;
}
.x3{
  border: 1px black solid;
  background-color: pink;
}

/*Holy Grail*/
.layout3{
  border: 2px solid green;
  width: 99%; 
  height: 300px;
  display: grid; 
  grid: 
    "header  header header" auto 
  "leftSide body rightSide" 1fr
  "footer footer footer" auto 
  / auto 1fr auto;
  gap: 8px;
}
.header{grid-area: header; background-color: #2e8444;}
.leftSide{grid-area: leftSide; background-color: #37ff00;}
.body{grid-area: body; background-color: #6edd90;}
.rightSide{grid-area: rightSide; background-color: #37ff00;}
.footer{grid-area: footer; background-color: #2e8444;} 

/*Sidebar*/
.layout4{
  border: 2px purple solid;
  width: 99%;
  height: 300px;
  display: grid;
  grid:
    "sidebar body1" 1fr
  / auto 1fr;
  gap: 8px; 
}
.sidebar{grid-area: sidebar; background-color: violet;}
.body1{grid-area: body1; background-color: darkviolet;}

/*Header Main Footer*/
.layout5{
  border: 2px solid blue;
  width: 99%; 
  height: 300px;
  display: grid; 
  grid: 
    "header1" auto 
  "main" 1fr
  "footer1" auto 
  /1fr;
  gap: 8px;
}
.header1{grid-area: header1; background-color: deepskyblue;}
.main{grid-area: main; background-color: skyblue;}
.footer1{grid-area: footer1; background-color: deepskyblue;}

/*Infinite Rows*/
.layout6{
  border: 2px solid gold;
  width: 99%;
  height: 300px; 
  display: grid;
  grid-template-rows: repeat(auto-fit, 1 fr);
  grid-template-columns: repeat(3, 1fr);
  gap: 8px; 
}
.infy{
  border: 1px solid black;
  background-color: lightyellow;
}

/*Infinite Rows with Areas*/
.layout7{
  border: 2px solid red;
  width: 100%;
  display: grid; 
  grid-template-rows: repeat(auto-fit, 1fr);
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.col1Last1{
  grid-column: 1 / -1;
  background-color: pink;
}

/*Flexbox Rows*/
.layout8{
  border: 2px solid green;
  display: flex; 
  gap: 16px;
}
.flRow{
  border: 1px solid darkgreen;
  background-color: #6edd90;
}

/*Flexbox ROW Wrap*/
.layout9{
  border: 2px solid darkviolet;
  display: flex; 
  gap: 16px; 
  flex-wrap: wrap; 
}

/*Flexbox Fitting the Space*/
.layout10{
  border: 2px solid blue;
  display: flex;
  gap: 16px;
}
.grow1{
  flex-grow: 1; 
  background-color: skyblue;
}

/*Flexbox Fit to Remaining Space*/
.layout11{
  border: 2px solid blue;
  display: flex; 
  gap: 16px;
}

/*Flexbox Seperate*/
.layout12{
  border: 2px solid blue;
  display: flex; 
  gap: 16px;
}
.marginLeft{
  margin-left: auto;
  background-color: violet;
  border: 1px solid black;
}

/*Layout 13*/
.layout13 {
  width: 99%;
  height: 300px; 
  display: grid; 
  grid: 
    "header13 header13 header13 header13" auto
  / auto;
  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: repeat(4, 1fr);
  gap: 8px; 
  border: 2px solid purple;
}
.l13{
  border: 1px black solid;
  background-color: violet;
}
.header13{grid-area: header13; background-color: deepskyblue;}
.x4header{
  text-align: center;
}



/*Animations*/
/*Translate*/
.translate{
  width: 300px; 
  height: 100px; 
  background-color: lightgreen;
  border: 1px solid black; 
  transform: translate(10px, 10px)
}

/*Background and border of div*/
.bg{
  width: 300px;
  height: 100px;
  background-color: lightgreen;
  border: 1px solid black; 
}

/*Rotate*/
#rotate{
  transform: rotate(20deg);
}

/*Scale*/
.scale{
  width: 300px;
  height: 100px; 
  background-color: lightgreen; 
  border: 1px solid black; 
  margin: 150px; 
  transform: scale(2, 3);
}

/*ScaleX*/
.scaleX{
  width: 300px;
  height: 100px; 
  background-color: lightgreen; 
  border: 1px solid black; 
  margin: 10px;
  transform: scaleX(2);
}

/*ScaleY*/
.scaleY{
  width: 300px;
  height: 100px; 
  background-color: lightgreen; 
  border: 1px solid black; 
  margin: 10px;
  transform: scaleY(2);
}

/*Skew*/
.skew{
  width: 300px;
  height: 100px;
  background-color: lightgreen;
  border: 1px solid black;
  transform: skew(10deg, 10deg);
}

/*SkewX*/
.skewX{
  width: 300px;
  height: 100px;
  background-color: lightgreen;
  border: 1px solid black;
  transform: skewX(10deg);
}

/*SkewY*/
.skewY{
  width: 300px;
  height: 100px;
  background-color: lightgreen;
  border: 1px solid black;
  transform: skewY(10deg);
}

/*Matrix*/
/*matrix(scaleX, skewY, skewX, scaleY, translateX, translateY)*/
#matrix{
  transform: matrix(1,-0.3,0,1,0,0)
}
#matrix2D{
  transform: matrix(1,0,0.5,1,150,0);
}

#twoD{
  border: 3px dashed lavender;
  background-color: lavenderblush;
}

/*Rotate in 3D X-axix*/
#rotate3DX{
  transform: rotateX(150deg);
}
/*Rotate in 3D Y-axix*/
#rotate3DY{
  transform: rotateY(150deg);
}
/*Rotate in 3D Z-axix*/
#rotate3DZ{
  transform: rotateZ(90deg);
}

/*animate it
.bg:hover{
  transform: rotate3d(1,1,1,180deg);
  transform: translate3d(20px, 20px, 20px);
}*/

#threeD{
  border: 3px dashed skyblue;
  background-color: #d4ebf2;
}



/*To decorate any div*/
.perry{
  width: 100px;
  height: 100px;
  background-color: darkviolet;
  border: 1px solid black;
  transition: width 2s, height 1s, background-color 3s;
}
/*Transitions*/
#transition:hover{
  width: 200px;
  height: 200px;
  background-color: blue;
} 
/*Linear*/
#linear:hover{
  transition-timing-function: linear;
  width: 200px; 
  height: 100px;
  background-color: blue;
}
/*Ease*/
#ease:hover{
  transition-timing-function: ease;
  width: 200px;
  height: 100px;
  background-color: blue;
}
/*Ease In*/
#easeIn:hover{
  transition-timing-function: ease-in;
  width: 200px;
  height: 100px;
  background-color: blue;
}
/*Ease Out*/
#easeOut:hover{
  transition-timing-function: ease-out;
  width: 200px;
  height: 100px;
  background-color: blue;
}
/*Ease In Out*/
#easeInOut:hover{
  transition-timing-function: ease-in-out;
  width: 200px;
  height: 100px;
  background-color: blue;
  transition-delay: 1s;
}
#transitions{
  border: 3px dashed #00a800;
  background-color: #c7f5c7;
}


/*Animations*/
/*
@keyframes
animation-names
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation
*/

/*The animation name*/
@keyframes example{
  from{background-color: blue;}
  to{background-color: lawngreen;}
}
/*The Element to apply animaation to*/
.cheeseCake{
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-name: example;
  animation-duration: 8s;
}

.bgposition{
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-name: example;
  animation-duration: 8s;
}
#bgptn:hover{
  transition-timing-function: ease-in-out;
  width: 200px;
  height: 200px;
  background-color: lawngreen;
}

.boxDelay{
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-name: example;
  animation-duration: 8s;
  animation-delay: 2s;
}

.boxRep{
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-name: example;
  animation-duration: 5s;
  animation-iteration-count: 3;
}

.boxReverse{
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-name: example;
  animation-duration: 5s;
  animation-direction: reverse;
}

#curve1{
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
}
#curve2{
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: ease;
}
#curve3{
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: ease-in;
}
#curve4{
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: ease-out;
}
#curve5{
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
}

.fillForward{
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-name: example;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}

/*Shorthand property -> animation: [animation name] [animation duration] [animation timing function] [animation delay] [animation iteration count] [animation direction] [animation fill mode]*/
.shortHand{
  width: 100px;
  height: 100px;
  animation: example 5s linear 2s infinite reverse forwards;
}

#animations{
  border: 3px dashed #f58495;
  background-color: #fddde3;
}