article,aside,details,figcaption,figure,footer,header,hgroup,hr,menu,nav,section{display:block}a,hr{padding:0}abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}ins,mark{background-color:#ff9;color:#000}body{line-height:1}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;font-size:100%;vertical-align:baseline;background:0 0}ins{text-decoration:none}mark{font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{height:1px;border:0;border-top:1px solid #ccc;margin:1em 0}input,select{vertical-align:middle}


html {
	height: 100%;
	width: 100%;
	margin: 0;
}

body {
	height: 100%;
	width: 100%;
  display: flex;
}

h1{
	font-family: "helvetica";
	text-align: right;
  opacity: 0%;
  font-size: 16px;
  color: #c7cbd9;
}

.aboutText {
  font-family: "helvetica";
  text-align: right;
  opacity: 0%;
  color: #344737;
  float: right;
  font-weight: bold;
  font-size: 16px;
}

.workText {
  font-family: "helvetica";
  text-align: right;
  opacity: 0%;
  color: whitesmoke;
  float: right;
  font-weight: bold;
  font-size: 16px;
}

.linkText {
  color: #c7cbd9;
    opacity: 0%;
}

a:hover {
  color: red;
    opacity: 0%;
}

.linkit {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  z-index: 10;
}

.linkki {
  flex: 1;
}

.linkki:nth-child(1) {
  cursor:  w-resize;
}

.linkki:nth-child(2) {
  cursor:  e-resize;
}
/* ---------MENU -------*/
.navbar {
  overflow: hidden;
  font-family: "helvetica";
   margin: 0 auto;
}

.menu {
  float: left;
  overflow: hidden;
  text-align: right;
  width: 100%;
  height: 100%;
}

.menu .nappi {
  border: none;
  outline: none;
  background-color: inherit;
  display: block;
  color: blue;
    margin: 0;
    padding: 0px;
    width: 100%;
    height: 100%;
     display: flex;
    align-items: right;
    justify-content: right;
    font-weight: bold;
  font-size: 16px;
}

.navbar a:hover, .menu:hover .nappi {
  background-color: blue;
}

.nappiMenu {
  display: none;
  position: absolute;
  min-width: 25%;
  background-color: whitesmoke;
  opacity: 85%;
  z-index: 4;
  height: 20%;

}

.nappiMenu a {
  float: right;
  color: blue;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  display: block;
  text-align: right;
  padding: 0px 20px;
}

.nappiMenu a:hover {
  background-color: #ddd;
}

.menu:hover .nappiMenu {
  display: block;
}

.easy {
  color: blue;
}


/* -----------------POHJA KERROS-----------*/
.outer-outer-container {
	z-index: -2;
  position:absolute;
	height: 100%;
	width: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: stretch;
}

.row {
	height: 10%;
	width: 100%;
  color: white;
  display: flex;
}	

.row div {
  flex: 1;
}

.red {
  background: #ded5bf;
  order: 1;
}

.green {
  background: #c7cbd9;
  order: 2;
}

.blue {
  background: #ed4134;
  order: 3;
}

.purple {
  background: hotpink;
  order: 4;
}

.yellow {
	background: blue;
	order: 2;
}

.black {
	background: steelblue;
	order: 5;
}

.steel {
  background: #1b1c14;
  order: 5;
}
 
.animated {
  animation: hidas 4s ease 0.5s infinite alternate; forwards;
}

.animated2 {
  animation: tosiNopea 2s ease 3s infinite alternate; forwards;
}

.a3 {
	animation: nope 1s ease 3s infinite  forwards;
}

.a4 {
  animation: top 5s ease 1s infinite alternate; forwards;
}

@keyframes hidas {
  100% {
    order: 5;
  }
}

@keyframes tosiNopea {
  100% {
    order: 6;
  }
}

@keyframes nope {
  100% {
    order: 3;
  }
}

@keyframes top {
  100% {
    order: 4;
  }
}
 /* -----------------TOINEN KERROS-----------*/

.outer-outer-container2 {
  z-index: 3;
  position:absolute;
  height: 50%;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}

.row2 {
  height: 20%;
  width: 100%;
  color: white;
  display: flex;
} 

.row2 div {
  flex: 1;
}

.a {
 order: 1;
  background: black;
  opacity: 40%;
}

.b {
  order: 2;
}

.c {
  order: 3;
}

.d {
  order: 4;
}

.e {
  order: 5;
}

.f {
  order: 6;
}

.g {
  order: 7;
}

.h {
  order: 8;
}

.tyhjä {
  pointer-events: none;
}
/* -----------------GRID-----------*/
 


.grid {
	z-index: 1;
  position:relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr [xx] 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . . . . ."
    ". . . . . . . ."
    ". . . . . . . ."
    ". . . . . . . ."
    ". . . . . . . ."
    ". . about8 about7 about6 about5 . ."
    ". . about8 about7 about6 about5 . ."
    ". about0 about1 about2 about3 about4 . ."
    ". . . about2 . . . ."
    ". . . . . . . .";
}

.about0 {
  grid-area: about0;
  background: whitesmoke;
  opacity: 50%;
  visibility: hidden;
  animation: pois2A 7s linear 1; forwards;
}

.about1 {
  grid-area: about1;
  background: whitesmoke;
  opacity: 50%;
  visibility: hidden;
  animation: pois1A 8s linear infinite; forwards;
}

.about2 {
  grid-area: about2;
  background: whitesmoke;
  opacity: 50%;
  visibility: hidden;
  animation: pois1A 8s linear 1s infinite; forwards;
}

.about3 { 
  grid-area: about3;
  background: whitesmoke;
  visibility: hidden;
  animation: pois1A 8s linear 2s infinite; forwards;
}

.about4 { 
  grid-area: about4;
  background: whitesmoke;
  opacity: 70%;
  visibility: hidden;
  animation: pois1A 8s linear 3s infinite; forwards;
}

.about5 {
  grid-area: about5;
  background: whitesmoke;
  opacity: 50%;
  visibility: hidden;
  animation: pois1A 8s linear 4s infinite; forwards;
}

.about6 {
  grid-area: about6;
  background: whitesmoke;
  opacity: 80%;
  visibility: hidden;
  animation: pois1A 8s linear 5s infinite; forwards;
}

.about7 { 
  grid-area: about7;
  background: whitesmoke;
  visibility: hidden;
  animation: pois1A 8s linear 6s infinite; forwards;
}

.about8 { 
  grid-area: about8;
  background: whitesmoke;
  opacity: 70%;
  visibility: hidden;
  animation: pois1A 8s linear 7s infinite; forwards;
}

@keyframes pois1A {
  87% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }   
}

@keyframes pois2A {
  100% {
    visibility: hidden;
  }
  0% {
    visibility: visible;
  }   
}