/* styles.css */

/* reset defaults */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
  background-color: #ffffff; /* change as desired */
}

/* shared stripe styling */
.stripe {
  position: fixed;
  z-index: 1;
}

/* horizontal stripes: full width, 50px tall */
.horizontal {
  width: 100%;
  height: 15px;
}
.horizontal.top {
  top: 114px;     /* inset down 50px */
  left: 0;
  background-color: #4ad19f; /* change as desired */
}
.horizontal.top2 {
  top: 134px;  /* inset up 50px */
  left: 0;
  background-color: #febbc2; /* change as desired */
}

/* vertical stripes: full height, 50px wide */
.vertical {
  width: 15px;
  height: 100%;
}
.vertical.left {
  top: 0;
  left: 180px;    /* inset in 50px */
  background-color: #febbc2; /* change as desired */
}
.vertical.left2{
  top: 0;
  left: 200px;   /* inset in 50px */
  background-color: #4ad19f; /* change as desired */
}

.logo {
  position: fixed;
  z-index: 2;
  top:25px;
  left: 80px;
  cursor:pointer;

}

.buttons {
  position: fixed;
  z-index: 2;
  left: 375px;

}

.button {

   cursor:pointer;
}

.maintext {
  position: absolute;           /* or relative, depending on your layout needs */
  top: 200px;                     /* center vertically */
  left: 375px;                    /* center horizontally */
  /*transform: translate(-50%, -50%);*/
  z-index: 2;                   /* higher than your stripes’ z-index */
  
  padding: 1rem;

width:55%;




}

.paragraph {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  color: #99453d;         
   padding: 1rem;        
}