*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  height:100vh;
  margin:0;
  overflow:hidden;
}

.border {
  animation:colors 10s infinite;
  background-color:blue;
  color:yellow;
  height:100vh;
  overflow:hidden;
  position:relative;
}

.border:before,
.border:after {
  background-image:repeating-linear-gradient(
      transparent,
      transparent 3vh,
      yellow 1vh,
      yellow 4vh
    );  
  content:"";
  height:200%;
  left:0;
  position:absolute;
  top:-100%;
  width:100vw;
}

.border:before {
  animation:downwards 8s ease-in infinite;
}

.border:after {
  animation:downwards 5s ease-out infinite reverse;
}

.screen {
  background-color:#fff;
  height:80vh;
  left:10vw;
  position:fixed;
  top:10vh;
  width:80vw;
  border: 1px solid red;
}

.screen:after {
  bottom:4vh;
  content:"\"Thanks for having me in this Hackathon\"";
  font-family:'Courier New', monospace;
  font-size:4vmin;
  left:4vw;
  position:absolute;
}

@keyframes colors {
  0%, 20% {
    filter:hue-rotate(90deg);
    transform:scale(2);
  }
  20.01%, 100% {
    filter:hue-rotate(0);
    transform:scale(1);
  }
}

@keyframes downwards {
  0% {
    transform:translate(0);
  }
  100% {
    transform:translate(0, 100vh) scale(1.5);
  }
}
.text-typing {
  padding:20px 30px;
  background:#f5f5f5;
  font-size:35px;
  font-family:monospace;
  border-radius:50px;
}
.text-typing p {
  margin:0px;
  white-space:nowrap;
  overflow:hidden;
  animation:typing 4s steps(38,end) forwards,
            blink 1s infinite;
}
@keyframes typing {
  0% { width:0% }
  100% { width:91% }
}
@keyframes blink {
  0%,100% {
    border-right:2px solid transparent;
  }
  50% {
    border-right:2px solid #222;
  }
}
.ima{
  height: 80%;
  width: 99%;
  padding-left: 5px;
  opacity: 0.7;
  padding-right: 5px;
}

.hom{
  height: 100vh;
  background-color: rgb(3, 124, 180);
}
nav{
  background-color: black;
  height: 10vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.titl{
  color: red; 
  font-weight: 900; 
   font-size: xx-large; 
   
}
a{
  text-decoration: none;
  
}
.house{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1em;
  margin-top: 1em;
}
.house > div{
  max-height: 45vh;
  
}
.house > div:nth-child(1){
  grid-column: 1/3;
}
.house div{
  overflow: hidden;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.house div a{
  display: flex;
  align-items: center;
  justify-content: center;
  
}
.house div a img{
height: 100%; 
width: 100%; 
}