/**/
html {
  height: 100%;
  width: 100%;
}

/*12 grid*/
.layout {
  border: 2px solid black;
  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: #180ae6ff;
}

.span6 {
  grid-area: span6;
  background-color: #180ae6ff;
}

.span3 {
  grid-area: span3;
  background-color: #180ae6ff;
}

.span1 {
  grid-area: span1;
  background-color: #180ae6ff;
}

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

.x3 {
  background-color: #e6e02d;
  border: 2px solid #e98716;
}

/*Holy grail*/
.layout3 {
  border: 2px solid black;
  width: 99%;
  height: 300px;
  display: grid;
  grid:
    "header2 header2 header2" auto "leftSide body rightSide" 1fr "footer2 footer2 footer2" auto / auto 1fr auto;
  gap: 5px;
}

.header2 {
  grid-area: header2;
  background-color: #57d912ff;
}

.leftSide {
  grid-area: leftSide;
  background-color: #9fdb9eff;
}

.rightSide {
  grid-area: rightSide;
  background-color: #31d3c0ff;
}

.body {
  grid-area: body;
  background-color: #e114daff;
}

.footer2 {
  grid-area: footer2;
  background-color: #e60f4fff;
}

/*Sidebar*/
.layout4 {
  border: 2px solid black;
  width: 99%;
  height: 300px;
  display: grid;
  grid:
    "sidebar body1" 1fr / auto 1fr;
  gap: 5px;
}

.sidebar {
  grid-area: sidebar;
  background-color: #e45011ff;
}

.body1 {
  grid-area: body1;
  background-color: #9d8ed2ff;
}

/*Header Main footer*/
.layout5 {
  border: 2px solid black;
  width: 99%;
  height: 300px;
  display: grid;
  grid:
    "header1" auto "main" 1fr "footer1" auto / 1fr;
  gap: 5px;
}

.header1 {
  grid-area: header1;
  background-color: #14cc17;
}

.main {
  grid-area: main;
  background-color: #cce193;
}

.footer1 {
  grid-area: footer1;
  background-color: #bbf7c5;
}

/*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 soild #8a1919;
  background-color: #cd88a6;
}

/*Infinite Rows with areas*/
.layout7 {
  border: 2px solid black;
  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 Rows*/
.layout8 {
  border: 2px solid #1406db;
  background-color: #10eac5ff;
  display: flex;
  gap: 10px;
}

/*Flexbox Row Wrap*/
.layout9 {
  border: 2px solid #bb99d6;
  background-color: #830ae6ff;
  width: 100%;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/*Flexbox Fill Space*/
.layout10 {
  border: 2px solid black;
  background-color: #eb420aff;
  display: flex;
  gap: 10px;
}

.grow1 {
  flex-grow: 1;
}

/*Flexbox Fill remaining space*/
.layout11 {
  border: 2px solid black;
  background-color: #0fe633ff;
  display: flex;
  gap: 10px;
}

/*Flexbox Seperate*/
.layout12 {
  border: 2px solid black;
  background-color: #d4ed12ff;
  display: flex;
  gap: 10px;
}

.marginLeft {
  margin-left: auto;
}

/*Your Own*/
.layout13 {
  border: 2px solid black;
  background-color: #0a06eaff;
  width: 99%;
  height: 200px;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(1, 1fr);
  gap: 5px;
}


/*Animations*/
/* 2 D animation X and Y axis */
#twoD {
  border: 3px dashed #0aeba7ff;
  background-color: #13863fff;
}

/* Translate Method*/
.trans:hover {
  transform: translate(50px, 100px);
}

/* Translate X Method*/
.trans:hover {
  transform: translate(50px);
}

/* Translate Y Method*/
.trans:hover {
  transform: translate(100px);
}

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

/* Rotate  X Method*/
#rotateX:hover {
  transform: rotate(180deg);
}

/* Rotate  Y Method*/
#rotateY:hover {
  transform: rotate(180deg);
}

/* Scale Method*/
#scale:hover {
  transform: scale(2, 3);
}

/* Scale X Method*/
#scaleX:hover {
  transform: scale(2);
}

/* Scale Y Method*/
#scaleY:hover {
  transform: scale(3);
}

/* Skew Method */
#skew:hover {
  transform: skew(20deg, 20deg);
}

/* Skew X Method */
#skewX:hover {
  transform: skewX(20deg);
}

/* Skew Y Method */
#skewY:hover {
  transform: skewY(20deg);
}

/* Matrix Method */
/* matrix(scaleX, skewY, skewX, scaleY, transleX, translateY*/
#matrix:hover {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

#matrix2:hover {
  transform: matrix(1, 0, 0.5, 1, 150, 0);
}
#YouOwnMatrix3:hover{
  transform: matrix(1, 0, 4.5, 1, 160, 0);
}
#threeD{
  border: 3px dotted #e8f07fff;
  background-color: #fd7608ff;
}
/* rotate 3D method*/
#trans3D:hover{
  transform: translate3D(50px, 10px, 150px);
}
/* rotate 3D method*/
#rotateZ:hover{
  transform: rotateZ(90deg);
}
/*
transition
transition-delay
transition-duraion
transition-property
transition-timing function
*/
#transittions{
  border:3px solid #b608d9ff;
  background-color: #db06beff;
}
.box1{
  width: 50px;
  height: 50px;
  background-color: #230ae6ff;
  border: 1px solid #0fe694ff;
  transition: width 2s, height 2s, backgroud-color 2s, border 2s;
}

#transittion:hover{
  width: 100px;
  height: 100px;
  background-color: #e6b70fff;
}
#delay{
  transition: width 2s;
  transition-delay: 1s;
}
#delay:hover{
  width: 100px;
}
#duration{
  transition: width 2s;
  transition-duration: 4s;
}
#duration:hover{
  width: 100px;
}
#propert{
  transition-property:  width;
}
#propert:hover{
  width: 100px;
}
#timing{
  transition-timing-function: linear ;
}
#timing:hover{
  width: 100px;
}

#animations{
  background-color: #00eeff;
  border: 3px dashed #023be3ff;
}
#animate{
  animation-name: example;
  animation-duration: 10s;
}
@keyframes example{
  from{background-color: #0fb1bdff;}
  to{background-color: #0feb29ff;}
}
#animate2{
  animation-name: sample;
  animation-duration: 10s;

}
@keyframes sample{
  0%{background-color: #747690ff;}
  25%{background-color: #ce92c3ff;}
  50%{background-color: #8db0b4ff;}
  75%{background-color: #9174b4ff;}
  100%{background-color: #a9c096ff;}
}

#animate3{
  position: relative;
  animation-name: allOver;
  animation-duration: 2s;
  animation-iteration-count:20;
}
@keyframes allOver{
  0%{background-color: #ff1414ff;  left: 0px; top: 0px;}
  25%{background-color: #4603e2ff; left: 200px; top: 0px;}
  50%{background-color: #fff700ff; left: 200px; top: 200px;}
  75%{background-color: #ff14c0ff; left: 0px; top: 200px;}
  100%{background-color: #29ff5eff;left: 0px; top: 0px;}
}
/* prespective Method*/
/* Matrix 3D method*/
/* */
/* */