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

:root{
  --color-1: rgb(0, 191, 255);
  --color-2: rgb(0, 255, 195);
  --color-3: rgb(0, 255, 51);
}

html{
  font-size: 16px;
}

body{
  font-family: Verdana, sans-serif;
  background-color: rgba(218, 218, 218, 0.5);
  display: grid;
  grid-template-columns: 20% 1fr 20%;
}

main{
  padding: 10px 0px;
  grid-column: 2/3;
}

img{
  display: block;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  object-fit: contain;
  box-shadow: -5px 5px 20px 1px black;
}

img:hover, figcaption:hover, p:hover, li:hover, i:hover{
  transform: scale(110%);
}

figure{
  padding: 30px;
}

a{
  color: unset;
  text-decoration: unset;
}

figcaption{
  text-align: center;
  margin-bottom: 40px;
  font-family: fantasy;
  font-size: 3.5rem;
  text-decoration: underline;
  color: white;
  letter-spacing: 0.2px;
  text-shadow: 1px 1px 5px black;
}

p{
  margin-top: 40px;
  text-align: justify;
  font-size: 1.6rem;
  text-shadow: 1px 1px 1px rgb(132, 228, 223);
}

p::first-letter{
  font-size: 1.5rem;
  margin: 5px;
}

li{
  font-size: 1.5rem;
  text-decoration: underline;
  margin-top: 20px;
  text-align: center;
  color: blue;
}

.top-line-left{
  border-top: 20px solid var(--color-1);
  border-right: 35vw solid var(--color-1);
  border-left: 64vw solid var(--color-1);
  border-bottom: 200px solid transparent;
  grid-column: 1/-1;
}

.go-back{
  position: fixed;
  top: 10px;
  left: 10px;
  width: 33px;
  border: 1px solid white;
  padding: 3px;
  border-radius: 50%;
  background-color: white;
}

.go-back a i{
  font-size: 1.7rem;
  color: var(--color-1);
}

.bottom-line{
  grid-column: 1/-1;
  border-bottom: 30px solid var(--color-2);
  border-right: 35vw solid var(--color-2);
  border-left: 64vw solid var(--color-2);
  border-top: 200px solid transparent;
}

@media screen and (max-width: 1590px) {
  .top-line-left{
    border-left: 63vw solid var(--color-1);
  }
  .bottom-line{
    border-left: 63vw solid var(--color-2);
  }
}

@media (max-width: 1000px){
  figcaption{
    font-size: 2.3rem;
  }
  p,li{
    font-size: 1.2rem;
  }
  .top-line-left{
    border-bottom: 80px solid transparent;
  }
  .bottom-line{
    border-top: 80px solid transparent;
  }
}

@media (max-width: 800px){
  body{
    display: block;
  }
  img{
    max-width: 500px;
  }
  .top-line-left{
    border-left: 62vw solid var(--color-1);
  }
  .bottom-line{
    border-left: 62vw solid var(--color-2);
  }
}

@media screen and (max-width: 550px) {
  figcaption{
    font-size: 1.7rem;
  }
  p,li{
    font-size: 1.1rem;
  }
  img{
    max-width: 400px;
  }
  .top-line-left{
    border-left: 61vw solid var(--color-1);
  }
  .bottom-line{
    border-left: 61vw solid var(--color-2);
  }
  img:hover, figcaption:hover, p:hover, li:hover, i:hover{
    transform: scale(105%);
  }
}