/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 600px) {
  .left, .main, .right {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}
/* Use a media query to add a breakpoint at 800px: */
@media screen and (min-width: 601px) {
  .left, .main, .right {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}
  :root{
  --triangle1-color: coral;
  --triangle2-color: wheat;
  }
  .darkmode{
  --triangle1-color: rgb(0,128,175);
  --triangle2-color: rgb(10,33,76);
  }
body{



/* Background "decor" */
.triangles_1{
  position: absolute;
}
    /* Triangle 1 */

.triangle1 {
	position: absolute;
	background-color: var(--triangle1-color);
	text-align: left;
  z-index: -1;
}
.triangle1:before,
.triangle1:after {
	content: '';
	position: absolute;
	background-color: inherit;
}
.triangle1,
.triangle1:before,
.triangle1:after {
	width:  10em;
	height: 10em;
	border-top-right-radius: 30%;
}

.triangle1 {
  /* change first rotate to rotate shape */
	transform: rotate(30deg) skewX(-30deg) scale(1,.866);
}
.triangle1:before {
	transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.triangle1:after {
	transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}
    /* Triangle 1 */

     /* Triangle 2 */
.triangle2 {
	position: absolute;
	background-color: var(--triangle2-color);
	text-align: left;
  margin-top: 100px;
  z-index: -2;
}
.triangle2:before,
.triangle2:after {
	content: '';
	position: absolute;
	background-color: inherit;
}
.triangle2,
.triangle2:before,
.triangle2:after {
	width:  10em;
	height: 10em;
	border-top-right-radius: 30%;
}

.triangle2 {
  /* change first rotate to rotate shape */
	transform: rotate(30deg) skewX(-30deg) scale(1,.866);
}
.triangle2:before {
	transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.triangle2:after {
	transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}
     /* Triangle 2 */

          /* Triangle 3 */
.triangle3 {
	position: absolute;
	background-color: var(--triangle1-color);
	text-align: left;
  margin-top: 200px;
  z-index: -3;
}
.triangle3:before,
.triangle3:after {
	content: '';
	position: absolute;
	background-color: inherit;
}
.triangle3,
.triangle3:before,
.triangle3:after {
	width:  10em;
	height: 10em;
	border-top-right-radius: 30%;
}

.triangle3 {
  /* change first rotate to rotate shape */
	transform: rotate(30deg) skewX(-30deg) scale(1,.866);
}
.triangle3:before {
	transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.triangle3:after {
	transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}

     /* Triangle 3 */

          /* Triangle 4 */
.triangle4 {
	position: absolute;
	background-color: var(--triangle2-color);
	text-align: left;
  margin-top: 300px;
  z-index: -4;
}
.triangle4:before,
.triangle4:after {
	content: '';
	position: absolute;
	background-color: inherit;
}
.triangle4,
.triangle4:before,
.triangle4:after {
	width:  10em;
	height: 10em;
	border-top-right-radius: 30%;
}

.triangle4 {
  /* change first rotate to rotate shape */
	transform: rotate(30deg) skewX(-30deg) scale(1,.866);
}
.triangle4:before {
	transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.triangle4:after {
	transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}

     /* Triangle 4 */

          /* Triangle 5 */
.triangle5 {
	position: absolute;
	background-color: var(--triangle1-color);
	text-align: left;
  margin-top: 400px;
  z-index: -5;
}
.triangle5:before,
.triangle5:after {
	content: '';
	position: absolute;
	background-color: inherit;
}
.triangle5,
.triangle5:before,
.triangle5:after {
	width:  10em;
	height: 10em;
	border-top-right-radius: 30%;
}

.triangle5 {
  /* change first rotate to rotate shape */
	transform: rotate(30deg) skewX(-30deg) scale(1,.866);
}
.triangle5:before {
	transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.triangle5:after {
	transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}

     /* Triangle 5 */

          /* Triangle 6 */
.triangle6 {
	position: absolute;
	background-color: var(--triangle2-color);
	text-align: left;
  margin-top: 500px;
  z-index: -6;
}
.triangle6:before,
.triangle6:after {
	content: '';
	position: absolute;
	background-color: inherit;
}
.triangle6,
.triangle6:before,
.triangle6:after {
	width:  10em;
	height: 10em;
	border-top-right-radius: 30%;
}

.triangle6 {
  /* change first rotate to rotate shape */
	transform: rotate(30deg) skewX(-30deg) scale(1,.866);
}
.triangle6:before {
	transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.triangle6:after {
	transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}

     /* Triangle 6 */

.triangles_2{
  position: absolute;
  margin-top: -50px;
  margin-left: 1400px;
}
    /* Triangle 7 */

.triangle7 {
	position: absolute;
	background-color: var(--triangle1-color);
	text-align: left;
  z-index: -1;
}
.triangle7:before,
.triangle7:after {
	content: '';
	position: absolute;
	background-color: inherit;
}
.triangle7,
.triangle7:before,
.triangle7:after {
	width:  10em;
	height: 10em;
	border-top-right-radius: 30%;
}

.triangle7 {
  /* change first rotate to rotate shape */
	transform: rotate(-30deg) skewX(-30deg) scale(1,.866);
}
.triangle7:before {
	transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.triangle7:after {
	transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}
    /* Triangle 7 */

     /* Triangle 8 */
.triangle8 {
	position: absolute;
	background-color: var(--triangle2-color);
	text-align: left;
  margin-top: 100px;
  z-index: -2;
}
.triangle8:before,
.triangle8:after {
	content: '';
	position: absolute;
	background-color: inherit;
}
.triangle8,
.triangle8:before,
.triangle8:after {
	width:  10em;
	height: 10em;
	border-top-right-radius: 30%;
}

.triangle8 {
  /* change first rotate to rotate shape */
	transform: rotate(-30deg) skewX(-30deg) scale(1,.866);
}
.triangle8:before {
	transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.triangle8:after {
	transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}
     /* Triangle 8 */

          /* Triangle 9 */
.triangle9 {
	position: absolute;
	background-color: var(--triangle1-color);
	text-align: left;
  margin-top: 200px;
  z-index: -3;
}
.triangle9:before,
.triangle9:after {
	content: '';
	position: absolute;
	background-color: inherit;
}
.triangle9,
.triangle9:before,
.triangle9:after {
	width:  10em;
	height: 10em;
	border-top-right-radius: 30%;
}

.triangle9 {
  /* change first rotate to rotate shape */
	transform: rotate(-30deg) skewX(-30deg) scale(1,.866);
}
.triangle9:before {
	transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.triangle9:after {
	transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}

     /* Triangle 9 */

          /* Triangle 10 */
.triangle10 {
	position: absolute;
	background-color: var(--triangle2-color);
	text-align: left;
  margin-top: 300px;
  z-index: -4;
}
.triangle10:before,
.triangle10:after {
	content: '';
	position: absolute;
	background-color: inherit;
}
.triangle10,
.triangle10:before,
.triangle10:after {
	width:  10em;
	height: 10em;
	border-top-right-radius: 30%;
}

.triangle10 {
  /* change first rotate to rotate shape */
	transform: rotate(-30deg) skewX(-30deg) scale(1,.866);
}
.triangle10:before {
	transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.triangle10:after {
	transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}

     /* Triangle 10 */

          /* Triangle 11 */
.triangle11 {
	position: absolute;
	background-color: var(--triangle1-color);
	text-align: left;
  margin-top: 400px;
  z-index: -5;
}
.triangle11:before,
.triangle11:after {
	content: '';
	position: absolute;
	background-color: inherit;
}
.triangle11,
.triangle11:before,
.triangle11:after {
	width:  10em;
	height: 10em;
	border-top-right-radius: 30%;
}

.triangle11 {
  /* change first rotate to rotate shape */
	transform: rotate(-30deg) skewX(-30deg) scale(1,.866);
}
.triangle11:before {
	transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.triangle11:after {
	transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}

     /* Triangle 11 */

          /* Triangle 12 */
.triangle12 {
	position: absolute;
	background-color: var(--triangle2-color);
	text-align: left;
  margin-top: 500px;
  z-index: -6;
}
.triangle12:before,
.triangle12:after {
	content: '';
	position: absolute;
	background-color: inherit;
}
.triangle12,
.triangle12:before,
.triangle12:after {
	width:  10em;
	height: 10em;
	border-top-right-radius: 30%;
}

.triangle12{
  /* change first rotate to rotate shape */
	transform: rotate(-30deg) skewX(-30deg) scale(1,.866);
}
.triangle12:before {
	transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.triangle12:after {
	transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}

     /* Triangle 12 */

}