/*just in case you forget this is how you make comments in css files*/

body {
  background-image: url("scattered-clouds.jpg")
}

h1 {
  font-size: 55px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

h2 {
  font-size: 45px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

h3 {
  font-size: 35px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

h4 {
  font-size: 25px;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

p {
  font-size: 22.5px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

ul {
  font-size: 22.5px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

ol {
  font-size: 22.5px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

/*everything underneath is specific functions that i've outlined myself and/or are not basic states of text like paragraphs or headers*/

button {
  background-color: white;
  border: outset;
  font-family: times;
  transition-duration: 0.2 s;
}

.main-box {
  border-style: solid;
  background-color: white;
  max-width: 800px;
  margin: 0 auto;
}

.action-bar {
  border-style: solid;
  background-color: white;
  max-width: 425px;
  margin: 0 auto;
}