@import url('https://fonts.googleapis.com/css2?family=Calistoga&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Commissioner:wght@100..900&display=swap');

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

html, body {
  height: 100%;
  width: 100%;
}

body {
  background: rgba(58,34,125,1);
  background: radial-gradient(circle, rgba(133,100,200,1) 24%, rgba(105,75,172,1) 64%, rgba(58,34,125,1) 100%);
  color: #FEF8ED;
  text-align: center;
  font-family: "Commissioner", sans-serif;
  font-size: 20px;
  font-weight: 400;
  font-style: normal;
}

.container {
  background-image: url(clouds.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
}

h1 {
  color: #F6BB4A;
  font-size: 2em;
  font-family: "Calistoga", serif;
  text-transform: uppercase;
  font-kerning: none;
  margin-bottom: 24px;
}

h2{
  color: #FEF8ED;
  text-align: center;
  font-family: "Calistoga", serif;
  font-size: 2em;
  font-style: normal;
  font-weight: 500;
}

p {
  color: #FEF8ED;
  text-align: center;
  font-size: 1.2em;
  line-height: 1.3em;
  max-width: 640px;
  margin: 20px auto;
}

a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  width: 260px;
  height: 72px;
  padding: 10px 20px;
  background: #F6BB4A;
  background: linear-gradient(0deg, rgba(255,156,0,1) 0%, rgba(246,187,74,1) 100%);
  color: #23154C;
  text-align: center;
  font-size: 1.2em;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  text-decoration: none;
  margin: 20px auto;
  border: 1px solid rgba(246,187,74,1);
  border-radius: 20px;
  box-shadow: 0px 101px 28px 0px rgba(0, 0, 0, 0.01), 0px 65px 26px 0px rgba(0, 0, 0, 0.05), 0px 36px 22px 0px rgba(0, 0, 0, 0.18), 0px 16px 16px 0px rgba(0, 0, 0, 0.31), 0px 4px 9px 0px rgba(0, 0, 0, 0.36);
}

a:active {
  transform: scale(0.98); 
  box-shadow: 0px 7px 7px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(0, 0, 0, 0.18);
}

.story_container{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 32px auto;
}

.story {
  position: relative;
  max-width: 190px;
  font-weight: 500;
}

.story img {
  border-radius: 999px;
  width: 90%;
  margin-bottom: 0px;
}

.story p {
  margin-top: 10px;
}

@media (max-width: 300px) {
  .container {
    display: block;
    padding: 100px 40px;
    height: auto;
    background-size: contain;
    padding-bottom: 200px;
  }
  .story_container{
    flex-direction: column;
    padding: 0 40px;
  }
}