html
{
  height:100%;
  width: 100%;
}
 
 
body {
  width: 100%;
  height: 100%;
}
 

h1 {
  font-family:'Inter', sans-serif; font-weight:600;letter-spacing: .5px;
}
p {
  font-family:'Inter', sans-serif; font-weight:300; color: white; font-size: 12px; line-height: 150%;
line-height: }


h2 {font-family:'Inter', sans-serif; font-weight:500;  color: white; font-size: 20px;
}

 
 
h3 {
  font-family:'Inter', sans-serif; font-weight:400; font-size: 15px
}
 
.hardrule {
  border-top: 1px solid; color: rgb(0, 0, 0);
}

.greygradient {
  background-image: linear-gradient(rgb(215, 213, 213), rgb(255, 255, 255)); height:5px; width:100%;
 
}

/* links*/
a {
font-family:'Inter', sans-serif; font-weight: 300; color:  rgb(92, 91, 91); text-decoration:none; font-size: 15px
}
 a:link
 {font-family:'Inter', sans-serif; font-weight: 400; 
}

 a:hover {
  color: red; text-decoration:underline;
} 

a:visited 
{color: #9900FF; font-weight: bold
}  
 
/* links end */



.row {
  display:flex; flex-direction: row; width:95%;
}

.column {
  display:flex; flex-direction: column; width:100%;
}



/* justification */


.center /* centered by height*/
{ display:flex; align-items: center;

}

.middle /* centered by width*/
{ display: flex; justify-content: center;}


.right  
{ display: flex; justify-content: flex-end;
  padding-right: 25px;
}

.left
{ display: flex; justify-content: flex-start;

}

.grey
{ background-color: rgb(92, 91, 91)
}

.bigpad { 
  box-sizing: border-box;
  padding: 7%;
}

.leftpad { 
  box-sizing: border-box;
   padding-left: 50px;
}
.tall {
  height: 90%;
}

.half
{
 width:50%;

}

.outer
{
  background: hsl(0, 3%, 51%);
}
.inner {  
  background-color: rgb(70, 68, 68);
  height:vh=50
}