:root
{
  --text: black;
  --background: hsl(200, 50%, 90%);

  --primary: hsl(200, 70%, 80%);
  --secondary: hsl(10, 20%, 30%);
  --accent: hsl(200, 50%, 90%);

  --info: hsl(200, 70%, 80%);
  --invitation: hsl(200, 50%, 50%);
  --guest-info: hsl(200, 70%, 80%);
  --guests: hsl(200, 50%, 60%);
}

head,
body,
article
{
  height: 700px;
}

article
{
  padding: 5rem;
}

body
{
  font-size: 24px;
  color: var(--text);
  background-color: var(--background);
}

article
{
  display: grid;
  grid-auto-rows: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 5px;
}

section{
  background-color: var(--primary);
  box-shadow: 5px 5px var(--secondary);
  border-radius: 10px;
  margin: .2rem;
}

.info
{
  background-color: var(--info);
  grid-row: 1 / 2;
  grid-column: 1 / 4;
}

.invitation
{
  background-color: var(--invitation);
  grid-row: 1 / 2;
  grid-column: 4 / 5;
  text-align: center;
}

.guest-info
{
  background-color: var(--guest-info);
  grid-row: 2 / 5;
  grid-column: 1 / 2;
}

.table
{
  background-color: var(--guests);
  grid-row: 2 / 5;
  grid-column: 2 / 5;
  overflow-y: scroll;
  overflow-x: hidden;
  
}


h1,
h2
{
  text-align: center;
  color: var(--secondary);
}

p
{
  padding: 1rem;
  text-align: center;
}

a
{
  color: var(--accent);
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: none;
  padding-block-end: 1rem;
}

table
{
  width: 100%;
  padding: 1rem;
  border-collapse: collapse;
}

th
{
  text-align: left;
  background-color: var(--primary);
}

th,
td
{
  padding-inline: .3rem;
  padding-block: .5rem;
}

td
{
  border: 2px solid var(--primary);
  word-break: break-word;
}

@media(max-width: 850px)
{
  article
  {
    padding: 0px;
  }

  .table
  {
    overflow-y: scroll;
  }

  th
  {
    display: none;
  }

  td::before
  {
    content: attr(data-cell);
    text-transform: capitalize;
    font-weight: bold;
    background-color: var(--primary);
    margin-inline-end: .5rem;
    padding: .3rem;
  }

  td
  {
    display: grid;
    grid-template-columns: 12ch auto;
    border: none; 
    padding: 0px;
  }

  td:last-child
  {
    border-bottom: 2px solid var(--primary);
    padding-block-end: .6rem;
    margin-block-end: .3rem;
  }

  tr:last-child td
  {

    border-bottom: none;
    padding-block-end: 0px;
    margin-block-end: 0px;
    
  }
}