html{
  scroll-behavior: smooth;
  color: silver;
  font-family: "Times New Roman", serif;
}

body{
  margin:10px;
  padding:0;
  font-size:1.19em;
  line-height:1.12;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:15px;
}

header{
  height:20px;
  grid-column: 1 / 6;
  position:sticky; top:0;
  background:white; z-index:5;
  display:grid;
  grid-template-columns: repeat(5,1fr);
  gap:15px;
  padding:10px 0;
}

main{
  grid-column: 1 / 6;
  display:grid;
  grid-template-columns: repeat(5,1fr);
  gap:15px;
}

footer{
  grid-column: 1 / 6;
  display:grid;
  grid-template-columns: repeat(5,1fr);
  gap:15px;
  border-top:1px solid silver;
  padding:15px 0 25px;
}

img{
  width:100%;
  display:block;
  padding-bottom:3px;
}

a{
  color: silver;
  text-decoration: none;
  text-align: ;
}

a:hover{
  color: whitesmoke;
  background-size: 100%;
}

::selection {
 color: whitesmoke;
 background:silver;
 }

 @font-face {
  font-family: Linear;
  src: font/LINEAR/Linear-PositivA.woff;
  font-weight: Linear-PositivA;
}

.border{
  top:40px;
  border-top:1px solid silver;
  margin-bottom:7px;
  position:sticky;
  grid-column: 1/6;
  z-index: 100;
}


.project1,
.project2,
.project3,
.project4,
.project5 {
  position: relative;
  padding-bottom: 0px;
  display: block;
}

.project1 { grid-column: span 1; }
.project2 { grid-column: span 2; }
.project3 { grid-column: span 3; }
.project4 { grid-column: span 4; }
.project5 { grid-column: span 5; }

.text {
  display: grid;           
  align-items: start;
}


.text > * {
  grid-area: 1 / 1 / 2 / 2;
  width: 100%;
  transition: opacity .18s ease;
  text-align: left;
}

.text .info
{ opacity: 1;
  z-index: 2;
}

.text .desc{
  opacity: 0;
  z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
  .project1:hover .text .info,
  .project2:hover .text .info,
  .project3:hover .text .info,
  .project4:hover .text .info,
  .project5:hover .text .info {
    opacity: 0;
  }

  .project1:hover .text .desc,
  .project2:hover .text .desc,
  .project3:hover .text .desc,
  .project4:hover .text .desc,
  .project5:hover .text .desc {
    opacity: 1;
  }
}


.div1{
  grid-column: 1;
}

.div3{
  grid-column: 3;
}

.div3-6{
  grid-column: 3/6;
}

.div4{
  grid-column: 4;
}

.div5{
  grid-column: 5;
  text-align: right;
}

.typeface{
  position: i;
  grid-column: span 5;
  display:grid;
  grid-template-columns: repeat(5,1fr);
  gap:15px;

}

.download{
  color: white;
  background-color: silver;
  margin-top: 30px;
  padding: 7px;
  text-align: center;
  width: 200px;
  border-radius: 6px;
}

.download:hover{
  background-color: whitesmoke;
  color: silver;
}


@media (hover: none){
  .text .info { display: none; }
  .text .desc { display: block; opacity:1; }
}


@media screen and (max-width: 800px) {

  html, body {
    width: 98%;
    overflow-x: hidden;
  }

  body, main {
    grid-template-columns: 1fr;
  }

  header{
	grid-template-columns: 1fr;
  	height:55px;
  }



  .border{
  top:75px;
 }

 
  .project1,
  .project2,
  .project3,
  .project4,
  .project5 {
    grid-column: 1;
  }

   
  .div1,
  .div3,
  .div4,
  .div5 {
    grid-column: 1;
  }

}