*{
  box-sizing:border-box;
}

html,body,main{
  height:100%;
  width:100%;
}
.outer-container{
  width:100%;
  height:100%;
  border:1px solid black;
  padding:10px;

}
  
.navbar{
  width:100%;
  height:60px;
  display:flex;
  justify-content:space-between;
  border-bottom:2px solid rgb(182,176,176);
  padding:10px;
}
.rec{
  flex:1;
  height:100%;
  border:none;
  display:flex;
  justify-content:center;
  align-items:center;
}

.links{
  display:flex;
  justify-content:space-between;
  padding:10px 5px;
  gap:10px;
  border:none;
}
.highlight{
  color: rgb(224,127,156);
  text-decoration:underline;
}
.main-content{
  width:100%;
  height:calc(100%-60px);
  flex:1;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  padding:0px;
  }
.left-content{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
}
.left-content h1{
  font-size:40px;
  font-weight:bold;
}
.right-content{
  flex:1;
  background-color:#666;
  color:#fff;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:30px;
}
.text-box{
  max-width:400px;
}
.text-box h2{
  margin-bottom:20px; 
}
.text-box p{
  margin-bottom:20px;
  line-height:1.5;  
}


.key{
  color:#b3b7ff
}