html{font-size: 16px;}

body {
  display: grid;
  grid-template-columns: 24rem minmax(24rem, 1fr) 24rem;
  font-family: 'Computer Modern Concrete', serif;
  background-color: #666;
  color: #ffeeee;
}

h1{font-size: 2rem;}
h2{font-size: 1.5rem;}
h3{font-size: 1rem;}

@media (max-width: 74rem) {body {grid-template-columns: 1fr 1fr;}}
@media (max-width: 60rem) {body {grid-template-columns: 1fr;}}

main {padding-left: 1rem;padding-right: 1rem;padding-top: 1rem;}

header {padding: 1rem;}
#logo {height:5rem;}

a {color: rgb(233, 225, 255);}
a:hover {color: #666;background-color: rgb(233, 225, 255);}

iframe {height:100vh; width:100%;border: none;}

p,h1,h1,h3,code{width:100%; max-width: 80ch;}
article img{width:100%; padding-top:1rem;padding-bottom: 1rem;}

ul,
li {
  list-style-position: outside;
  list-style-type: square;
  margin: 0;
  padding-left:1rem;
  padding-bottom: 0.5rem;
}

#services {display: grid;grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));gap: 1rem;}

footer {padding: 1rem;text-align: right;}

form {margin-top: 1rem;}

input,
textarea {
  font-family: monospace;
  width: 99%;
  height: 10rem;
}

.hidden {
  display: none;
}

button {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  font: inherit;
  font-size: 1.25rem;
  color: #000;
  background-color: rgb(214, 200, 255);
  border: 2px rgb(88, 77, 187) solid;
}

button:hover{
  border: 2px rgb(214, 127, 13) solid;
  cursor:pointer;
}