*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {

  /*colors*/
  --blue1: #163573;
  --blue2: #2180A6;
  --blue3: #3B7D8C;
  --blue4: #8FD1D9;
  --cream: #F2EFBD;
  --brown: #8B5E3C;
  --accent: #E36D23;
}

body{
  font-family: 'Open Sans', sans-serif;
}

img {
  display: block;
  width: 100%;
  height: auto;
}
button{
  padding: .5em 1em;
  border-radius: 5px;
  font-weight: 500;
  width: fit-content;
}

h1, h2{
  text-align: center;
}

header {
  background-color: var(--blue4);
  display: flex;
  justify-content: center;
  padding: 1em;
}

.header__image {
  width: clamp(120px, 21.5vw ,180px);
}

main{
  background: var(--brown) url('../images/background-sm.jpeg') no-repeat center/cover;
  background-blend-mode: multiply;
  padding: 4rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2em;
}

.message{
  
  display: flex;
  justify-content: flex-start;
  color: #fff;
  padding: 1em;
}
.message__info{
  max-width: 60%;
  display: flex;
  flex-direction: column;
  gap: 1em;
  text-shadow: 1px 1px 2px black;
}

.message__heading{
  font-size: clamp(2rem, 5.75vw ,3rem);
  font-weight: 600;
 
}
.message__text{
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  }

.message__icons{
  align-self: flex-start;
  display: flex;
  justify-content: center;
  gap: 2rem;
  
}

.message__icons__image{
  width: 3rem;
}

 footer{
  background-color: var(--blue4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5em;
  padding: 1em;
  text-align: center;
 }

.privacy__btn{
  border: 1px solid black;
  background-color: transparent;
}

.modal{
  width: clamp(300px, 40vw, 500px);
  margin: 3em auto;
  padding: 1em;
  gap: 1em;
  background-color: #D1ECEF;
}

.modal::backdrop{
  background-color: rgba(0, 0, 0, .7);

}

.modal__title, .modal__info{
  margin-block: 1em;
}

.modal__list{
  padding-inline-start: 1em;
}
.modal__list>li{
  list-style-type: circle;
  margin-block: .5em;
}

.modal__link{
  color: black;
  text-underline-offset: .2em;
}
.modal__btn{
  background-color: transparent;
  font-size: 1.1rem;
  font-weight: 500;

}


@media (min-width:700px){
main{
  background-image: url('../images/background.jpeg');
}

 
}