html{
  font-family: 'Times New Roman', Times, serif;
  font-size: 16px;
}

body{
  margin: 0;
}

h1{
  font-size: 25px;
}

.grid
{
  display: grid;
  grid-template-columns: 1fr;
  gap:20px;
}
@media (min-width: 800px)
{
  .grid{ grid-template-columns: 1fr 1fr;}
}

@media (min-width: 1280px)
{
  .grid{ grid-template-columns: 1fr 1fr 1fr;}
}

.nav-link, .btn, .card
{
  transition: transform .2s ease-in-out;
}

.card{
  padding:16px;
  background-color: whitesmoke;
}

.card:hover
{
  transform: translateY(-3px);
}

.btn
{
  background-color: blue;
}

.nav-link, .btn
{
  outline: 3px solid transparent; 
  outline-offset: 2px;
}

.nav-link:focus-visible , .btn:focus-visible
{
  outline: 3px solid black;
}

.nav-link:hover
{
  background-color: grey;
}

.nav-link:active
{
  transform: translateY(1px);
}