#home {
 width: 100%;
 height: 100vh;
 padding: 20vh 10% 10%;
 display: grid;
 grid-template-columns: 0.5fr 2.5fr;
 color: #fff;
 box-sizing: border-box;
}

.links {
 display: grid;
 box-sizing: border-box;
 padding: 10%;
}

#home .links a {
 width: 100%;
 height: 100%;
 padding: 10%;
 box-sizing: border-box;
 color: rgb(235, 190, 153);
 font-size: 3rem;
}
#home .links a:hover {
 color: rgb(194, 150, 114);
}

#home .info {
 text-align: right;
 font-size: 3rem;
 cursor: pointer;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: end;
}
#home .info h1 {
 margin-top: 15px;
 color: #f6f6f6;
}

#home .info span,
#home .info h5 {
 margin: 0;
 color: #ebbe99;
}

#home .info span:hover,
#home .info h5:hover {
 color: #c29672;
}
#home .typing {
 position: relative;
 font-weight: 600;
 color: #ebbe99;
 height: 3rem;
}
#home .typing::before {
 content: "";
 width: 5px;
 height: 100%;
 background-color: #ebbe99;
 position: absolute;
 top: 50%;
 transform: translateY(-40%);
 right: -10px;
 animation: blink 0.7s infinite;
}
@keyframes blink {
 50% {
  opacity: 0;
 }
}

@media only screen and (max-width: 1200px) {
 #home .typing {
  height: 2rem;
 }
  #home .info h1,
  #home .info {
  font-size: 2rem;
 }
}
@media only screen and (max-width: 600px) {
 #home {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 90vh;
 }
 #home .links {
  display: flex;
  justify-content: center;
 }
 #home .links a {
  font-size: 1.5rem;
 }
 #home .info h1,
 #home .info {
  align-items: center;
  text-align: center;
  font-size: 1.5rem;
 }
 #home .typing { 
  height: 1.5rem;
 }
}
@media only screen and (max-width: 300px) {
 #home .links a {
  font-size: 1.2rem;
 }
 #home .typing {
  height: 1rem;
 }
 #home .info h1,
 #home .info {
  font-size: 1rem;
 }
}