@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

:root {
	--main-color: blue;
}
html {
scroll-behavior: smooth;
}

body {
background-color: #d9d9d9;
color: white;
margin: 0
}

.blue {
	color: var(--main-color);
}

.pi {
	display: inline-block;
	padding: 4px;
	background-color: var(--main-color);
	color: white;
}

form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap:8px;
}

body,
button,
select,
input {
  font: 15.447px "calibri light";
/*   font: 16px "open sans"; */
  font-weight:700;
  color: #222
}


.container {
  padding:24px;
  font-size:x-large;
  text-align: center;
  background-color: var(--main-color);
  color: white;
  margin: 24px auto;
}

header {
  font-weight: 600;
/*   border-bottom: 1px solid #888; */
}

.content {
  max-width:65%;
background-color:white;
padding:16px;
  margin: auto;
}

@media only screen and (min-width:700px) {

header, 
.flex,
.hero {
display: flex
}

header {
justify-content: space-between;
align-items: center
}

.flex {
  display: flex;
  gap: 48px;
}

.flex > div {
  flex:1;
/*   opacity: 0;
  animation: show 5s */
}
.hero {
/*  margin: 48px auto; */
  display: flex;
  gap:48px;
  align-items:top
}

.hero p:first-child {
  margin: 0;
}

.hero > div {
  flex:1
}
form {
	display: grid;
	gridÃ-template-columns: 1fr 1fr;
	gridÃ-gap: 8px
}
}

.logo {
  font-size: xx-large;
}

.nav {
  width:45%;
  justify-content: space-between;
  display: flex;
}

.nav>a {
  text-decoration: none;
  color: #784125
}

select, 
input[type ~="email text"] {
  display: block;
  min-width:70%;
/*   background-color: pink */
}

section {
  padding:8px;
  background-color: black;
  text-align: center;
  font-size: x-large;
  margin: 32px auto;
  
}

.btn {
  padding: 8px;
  border:none;
  cursor: pointer;
  outline: 1px solid;
  background-color: var(--main-color);
  color: white;
  text-decoration: none;
}

footer {
  font-size: small;
  text-align: center;
  margin: 32px auto;
/*   border-top:1px dashed #999; */
}

.hero {
  margin: 48px auto;
}

.hero p:first-child {
  margin: 0;
}

.hero img {
  width:100%;
height: auto;
}