:root {
  --fnt-face: Helvetica, sans-serif;
  --fnt-base-size: 1.2rem;
  --base-line-height: 1.5rem;

  --h1: bold 2.5rem/1.2em var(--fnt-face);
  --h2: normal 1.5rem/1.7em var(--fnt-face);

  --gray100: hsl(0, 0%, 100%);
  --gray80: hsl(0, 0%, 80%);
  --gray70: hsl(0, 0%, 70%);
  --gray20: hsl(0, 0%, 10%);

  --logo-color-blue: hsl(254, 64%, 15%);
  --logo-color-blue-border: hsl(254, 64%, 55%);
  --logo-color-red: hsl(6, 66%, 42%);
}


/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  text-rendering: optimizeSpeed;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/*****************************************/

body {
  min-height: 100vh;
  display: grid;
  place-content: center;
  font-family: var(--fnt-face);
  font-size: var(--fnt-base-size);
  color: var(--gray20);
  line-height: var(--base-line-height);
}

.grid-container{
  display: grid;
  gap: 1.5rem;
  padding-block: 2rem;
  width: min(95%, 60rem);
  margin-inline: auto;
}

.grid-element{
  /* padding: 1.8rem;
  border-radius: 0.5rem; */
}
  
.banner{
  text-align: center;
}

.banner h1{
  font: var(--h1);
  color: var(--gray20);
  display: inline;
}

.banner_img {
  object-fit: contain;
  max-width: min(25rem, 40%);
  margin-inline: auto;
  margin-bottom: 1rem;
  filter: drop-shadow(0rem 0.2rem 0.5rem hsla(0, 0%, 20%, 0.7));
}

.welcome p:not(:last-child){
  margin-bottom: 1.5rem;
}

.info, .contact {
  background-color: var(--logo-color-blue);
  color: var(--gray80);
}

.welcome, .info, .contact {
  padding: 1.8rem;
  border-radius: 0.5rem;
  box-shadow: 0rem 0.2rem 0.5rem hsla(0, 0%, 10%, 0.7);
}

.info h2, .contact h2{
  font: var(--h2);
  color: var(--gray100);
}

.day{
  text-align: left;
}

.time{
  float: right;
}

@media screen and (min-width: 40rem){
  .grid-container{
    grid-template-columns: 0.85fr 1.15fr;
  }

  .grid-col-span-2 {
    grid-column: span 2;
  }
}