/**************
|  style.css  |
**************/

html {
  background: radial-gradient(aquamarine, seagreen);
}

body {
  font-family: sans-serif;
  box-sizing: border-box;
  text-align: center;
  padding: 0;
  margin: 0;
}

h1 {
  font-size: 200px;
  margin: 0 auto;
  color: #eee;
  padding: 0;
}

.container {
  text-align: center;
  margin: auto;
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

#top {
  margin-top: 25px;
}

.outline0 {
  text-shadow: -3px -3px #222, -3px 3px #222, 3px -3px #222, 3px 3px #222;
}

.outline1 {
  text-shadow: -3px -3px red, -3px 3px #222, 3px -3px #222, 3px 3px #222;
}

.outline2 {
  text-shadow: -3px -3px #222, -3px 3px red, 3px -3px #222, 3px 3px #222;
}

.outline3 {
  text-shadow: -3px -3px #222, -3px 3px #222, 3px -3px red, 3px 3px #222;
}

.outline4 {
  text-shadow: -3px -3px #222, -3px 3px #222, 3px -3px #222, 3px 3px red;
}

.outline5 {
  text-shadow: -1px -1px #222, -1px 1px #222, 1px -1px #222, 1px 1px #222;
}

.outline6 {
  text-shadow: -3px -3px 7px red, -1px 1px #222, 1px -1px #222, 1px 1px #222;
}

.outline7 {
  text-shadow: -1px -1px #222, -3px 3px 7px red, 1px -1px #222, 1px 1px #222;
}

.outline8 {
  text-shadow: -1px -1px #222, -1px 1px #222, 3px -3px 7px red, 1px 1px #222;
}

.outline9 {
  text-shadow: -1px -1px #222, -1px 1px #222, 1px -1px #222, 3px 3px 7px red;
}

ol {
  width: 45%;
  text-align: left;
  padding-left: 0;
  margin-left: 40px;
}

li {
  font-size: 20px;
  text-align: left;
  padding: 0;
  margin: 0;
}

p {
  font-size: 20px;
  text-align: left;
  padding: 10px;
  width:  45%;
  margin: 0;
}

@media screen and (max-width: 1440px) {
  ol, p {
    width: 55%;
  }
}

@media screen and (max-width: 1024px) {
  ol, p {
    width: 80%;
  }
}

@media screen and (max-width: 900px) {
  h1 {
    font-size: 175px;
  }
  ol, p {
    width: 90%;
  }
}

@media screen and (max-width: 768px) {
  h1 {
    font-size: 150px;
  }
}

@media screen and (max-width: 660px) {
  h1 {
    font-size: 125px;
  }
}