*{
  padding:0
}
html {
  height: 100%;
  width: 100%;
}
/*12 grid */
.layout{
  border: 2px solid #a880d0;
  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 span3. . . ." 1fr
  ". . . . span1 . . . . . . . " 1fr
  / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 5px
}
.span12{
  grid-area: span12; background-color: #b08fc1;
}
.span6{
  grid-area: span6; background-color: #b08fc1;
}
.span3{
  grid-area: span3; background-color: #b08fc1;
}
.span1{
  grid-area: span1; background-color: #b08fc1;
}


/*3x3 grid */
.layout2{
  border: 2px solid #a880d0;
  width: 99%;
  height: 300px;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.x3{
  background-color: lavender;
  border: 2px solid #a880d0;
}

/*Holy Grail */
.layout3{
  border: 2px solid #a880d0;
  width: 99%;
  height: 300px;
  display: grid;
  grid:
    "header header header" auto
  "leftSide body rightSide" 1fr
  "footer footer footer" auto
  / auto 1fr auto;
  gap: 5px;
}
.header{
  grid-area: header; background-color: pink;
}
.leftSide{
  grid-area: leftSide; background-color: #c889b1;
}
.rightSide{
  grid-area: rightSide; background-color: #efd7e6;
}
.body{
  grid-area: body; background-color: #e093e1;
}
.footer{
  grid-area: footer; background-color: #d963ae;
}
/* Sidebar */
.layout4{
  border: 2px solid #a880d0;
  width: 99%;
  height: 300px;
  display: grid;
  grid: 
    "sidebar body1" 1fr
  /auto 1fr;
  gap: 5px;
}
.sidebar{
  grid-area: sidebar; background-color: #c889b1;
}
.body1{
  grid-area: body1; background-color: #9d709e;
}

/* Header Main Footer */
.layout5{
  border: 2px solid #a880d0;
  width: 99%;
  height: 300px;
  display: grid;
  grid:
    "header1" auto
    "main" 1fr
    "footer1" auto
  /1fr;
  gap: 5px;
}
.header1{grid-area: header1; background-color: #c889b1;}
.main{grid-area: main; background-color: #9d709e;}
.footer1{grid-area: footer1; background-color: #d963ae;}

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

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

/* Flexbox Row */
.layout8{
  border: 2px solid #a880d0;
  display: flex;
  gap:10px;
  
}

/* Flexbox wrap*/
.layout9{
  border: 2px solid #a880d0;
  width: 100%;
  display: flex;
  gap:10px;
  flex-wrap: wrap;
}

/*Flexbox Fill Space*/
.layout10{
  border: 2px solid #a880d0;
  display: flex;
  gap:10px;
}
.grow1{
  flex-grow: 1;
}
/*Flexbox Fill remaining*/
.layout11{
  border: 2px solid #3b0e71;
 
  display: flex;
  gap: 10px;
}


/*Flexbox Fill Seperate*/
.layout12{
  border: 2px solid #a880d0;
  display: flex;
  gap:10px;
}
.marginLeft{
  margin-left: auto;
}

/*Your :placeholder-shown*/
.layout13{
  border: 2px solid #a880d0;
  display: flex;
  gap:10px;
}
.marginLeft{
  margin-left: auto;
}

/*ANIMATIONS*/
/*2D animation X and Y axis*/
#twoD{
  border: 2px solid #a880d0;
  background-color: lightpink;
}
/*Translate Method*/
.trans:hover{
  transform: translate(50px, 100px);
}
/*Translate X Method*/
.transX:hover{
  transform: translateX(50px);
}
/*Translate Y Method*/
.transY:hover{
  transform: translateY(100px);
}
/*Rotate Method*/
#rotate:hover{
  transform: rotate(20deg);
}
/*Rotate X Method*/
#rotateX:hover{
  transform: rotateX(180deg);
}
/*Rotate Y Method*/
#rotateY:hover{
  transform: rotateY(180deg);
}
/*Scale Method*/
#scale:hover{
  transform: scale(2, 3);
}
/*Scale X Method*/
#scaleX:hover{
  transform: scaleX(2);
}
/*Scale Y Method*/
#scaleY:hover{
  transform: scaleY(3);
}
/*Scew Method*/
#skew:hover{
  transform: skew(20deg, 20deg);
}
/*Scew X Method*/
#skewX:hover{
  transform: skewX(20deg);
}
/*Scew Y Method*/
#skewY:hover{
  transform: skewY(20deg);
}
/*Matrix Method*/
/*Matrix(scaleX, skewY, skewX, scaleY, translateX, translateY)*/
#matrix:hover{
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}
#matrix2:hover{
  transform: matrix(4, -0.8, 7, 2, 9, 4);
}
#yourOwnMatrix:hover{
 transform: matrix(3, -0.5, 2, 3, 1, 1);
}

#threeD{
  border: 3px dotted #a880d0;
  background-color: lightseagreen;
}
/*3D Animations X, Y, Z axis*/
#trans3D:hover{
  /*translate3d function need x, y, z parameters*/
  transform: translate3d(50px, 100px, 150px) 
}
/*Rotate Z Method*/
#rotateZ:hover{
  transform: rotateZ(90deg);
}

/*Transition*/
/*Transition-delay*/
/*Transition-duration*/
/*Transition-property*/
/* transition-timing-funvtion */
.box1{
  width: 50px;
  height: 50px;
  background-color: lightpink;
  border:1 px solid black
  transition: width 2s, height 2s, background-color 2s;
}
#transitions{
  border: blueviolet;
  background-color: lightblue;
}

#transition:hover{
  width: 100px;
  background-color: mediumvioletred;
}

#delay{
  transition: width 2s;
  transition-delay: 1s;
}

#delay:hover{
  width: 100px;
}

#duration{
  transition: background-color 2s;
  transition-duration: 4s;
}

#duration:hover{
  background-color: #b599d1;
}

#propert{
  transition-property: width;
}

#propert:hover{
  width: 100px;
}

#timing{
  transition-timing-function: linear;
}

#timing:hover{
  width: 100px;
}

#animations{
  background-color: red;
  border: 3px dashed dashed #08ff04;
}
#animate{
  animation-name: example;
  animation-duration: 10s;
}
@keyframes example{
  from{background-color: darkcyan;}
  to{background-color: darkred;}
}

#animate2{
  animation-name: sample;
  animation-duration: 10s;
}
@keyframes sample{
  0%{background-color: darkcyan;}
  25%{background-color: darkred;}
  50%{background-color: darkblue;}
  75%{background-color: darkgreen;}
  100%{background-color: darkmagenta;}
}

#animate3{
  position: relative;
  animation-name: allOver;
  animation-duration: 20s;
}
@keyframes allOver{
  0%{background-color: darkcyan; left: 0px; top: 0px;}
  25%{background-color: darkred; left: 200px; top: 0px;}
  50%{background-color: darkblue; left: 200px; top: 200px;}
  75%{background-color: darkgreen; left: 0px; top: 200px;}
  100%{background-color: darkmagenta; left: 0px; top: 0px;}
}
/*Translate 3D Method*/
/*Perspective Method*/
/*Matrix 3D Method*/