@import url('https://fonts.googleapis.com/css2?family=Ysabeau+Office:ital,wght@0,1..1000;1,1..1000&display=swap');

@font-face {
    font-family: 'KiwiSoda';
    src: url('KiwiSoda.woff2') format('woff2'),
         url('KiwiSoda.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* when something goes wrong with the first font in font-family, there is a backup for it to be readible */


body{
  font-family:'KiwiSoda',Arial,sans-serif;
  font-size:20px;
  font-weight:bold;
  text-transform:capitalize;
  text-shadow:2px 2px 10px #111111;
  background-image: url('http://dl7.glitter-graphics.net/pub/2730/2730267baqumpdcd2.gif');
  background-attachment: fixed;
  background-repeat: repeat;
 }

.box{
  font-size:50px;
  text-align:center;
  width:300px; /*have width to center*/
  height:170px;
  border:5px solid pink;
  overflow: hidden;
  padding:30px 30px 20px 30px;
  margin: 20px 20px; /*center: auto for left/right*/
  display:inline-block;
  box-shadow: 5px 10px 5px pink;
  border-radius:150px 100px;
  position:relative;
  left:35%;
  right:35%;
  
}

/* background-color:#00000;
  background-color:rgb(200,5,25);
  background-color:hsb(100,64%,12%);
  background-color:rgba(174,0,255,0.5);
  different ways to color */

/* font-weight:bold;
  font-style:italic;
  text-transform:capitalize;
  text-decoration:underline;  text-decoration:underline wavy pink 1.5px;
  word-spacing:25px;
  line-height:50px;
  text-align:justify;
  text-ident:40px;
  letter-spacing:4px;
  text-shadow:2px 2px 7px #111111;
  different ways to style text */

/* .img;{
  width:200px;
  height:200px;
  background:transparent url("lemons.jpg") no-repeat 0 0;
  opacity:0.5;
  position:fixed;
 */


.flex-container {
	display:-webkit-flex;
	display:flex;
	width:100%;
	flex-direction:row; /* can also do column */
	flex-wrap:nowrap; /* the boxes don't go to the next line */
}

.flexed-item-25 {
	border:2px solid white;
	width:25%;
	background: white;
	border-radius: 15px;
	margin:auto;
	background-color: rgba(255, 255, 255, 0.5);
}

.flexed-item-50 {
	border:2px solid #000;
	width:50%;
}

.flexed-item-75 {
	border:2px solid white;
	width:75%;
	font-family:"Ysabeau Office", sans-serif, arial;
	font-size:75%;
	background: white;
	border-radius: 15px;
	background-color: rgba(255, 255, 255, 0.5);
}

.flexed-item-100 {
	border:2px solid #000;
	width:100%;
}

/* fit images to container */
.flex-container img {
  display: block;    /* Must be a block element for margin: auto to work */
  margin: 0 auto; 
  max-width: 70%;
  height: auto;
    
}


h1{
 color:#303F08;
 text-align:center;
}

p{
  opacity:0.75;
  text-align:left,justify;
  font-family:"Ysabeau Office", sans-serif;
}

p:first-letter{
  font-size:30px;
  color:#303F08;
}

p:first-line{
  color:#303F08;
  opacity:0.5;
}