*{
	box-sizing: border-box;
}

body {
	background-image: url("strawberrypattern.jpg");
	font-family: Arial, Helvetiva, sans-serif;
}

/*style the header */

header {
	background-image: url("jam.jpg"); 
    background-repeat: repeat-x;
    background-position: top left;
    background-size: auto 150px;
    height: 150px;
	padding: 15px;
	text-align: center ;
	font-size: 40px;
	color: white;
}

h3 {
  color:black;
    font-family: "Bungee Tint", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Container for flexboxes */
section {
	display: -webkit-flex;
	display: flex;
}

/* style the navigation menu*/
 nav {
	 -webkit-flex: 1;
	 -ms-flex:1;
	 flex:1;
	 background:none;
	 padding:20px;
	 height: 100px;
	 width: 1px;
	 text-align:center;
 }
	
 
 /*stlye the list inside the menu*/
 nav ul {
	 list-style-type:none;
	 padding:0;
 }
 
 
 /*style the content */
 article {
	 -webkit-flex: 3;
	 -ms-flex:3;
	 flex:3;
	 align-items:center;
	 background-image: url("articleapple.jpg");
	 background-size:cover;
	 color: white;
	 font-size: 21px;
	 left:30%;
	 top:200px;
	 color:black;
	 width: 560px;
	 height: auto;
	 text-align: center;
	 font-family: "Indie Flower", cursive;
  font-weight: 400;
  font-style: normal;
  z-index: 50;
 }
 
 .articles {
    display: grid;
    grid-template-columns: repeat(2, 600px);
    gap: 20px;
    justify-content: right;
    overflow-y: auto;
    height:3000px;
    }
    
.articles::-webkit-scrollbar {
    width: 15px;
   
}

/* The background/track */
.articles::-webkit-scrollbar-track {
    background: white;
    border-radius: 10px;
}

/* The thing you drag */
.articles::-webkit-scrollbar-thumb {
    background: red;
    border-radius: 10px;
    min-height:100px;
}

.postit {
    background-image: url("postit.png");
    background-repeat: no-repeat;
    background-size: contain;

    position: absolute;
    left: 100px;
    top: 20px;

    width: 500px;
    height: 510px;  
    z-index: 900;
    pointer-events:none;
}
 /*Paragraph 1 properties*/
 p {
	 color: black;
	 margin: 1em;
 }
 
.scrolldown {
    margin-top: 20px;
    height: 150px;
    overflow-y: auto;
    scrollbar-color: red white;
}

.allofusstrangersimg {
  height: 150px;
  width:auto;
}
 
 h1 {
	 color: white;
 }
 
 h3 {
    margin: 0 0 5px 0;
    color:white;
}

*{ box-sizing: border-box;
}

/*two columns*/
.column {
	float:left;
	width: 50%;
	padding: 10px;
}

/* clear floats*/
.row:after {
	content: "";
	display: table;
	clear:both;
}

/*responsive layout*/
@media (max-width: 600px) {
	section {
		-webkit-flex-direction: column;
		flex-direction: row-reverse;}
	}

.Container {
	display: flex;
	flex-direction: row-reverse;
}

.about {
	display:flex;
	align-items:center;
	flex-direction:row-reverse;
	gap: 10px;
}


.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 100px;
   background-image: url("applefooter.jpg");
   background-repeat: repeat-x;
   background-size:contain;
   z-index: 60;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #FF0033;
}

li a {
  display: block;
  color: white;
  padding: 8px 16px;
  text-decoration: none;
}

/* Change the link and background color on hover */
li a:hover {
  background-color: white;
  color: #FF0033;
}

.henny-penny-regular {
  font-family: "Henny Penny", system-ui;
  font-weight: 400;
  font-style: normal;
}

.indie-flower-regular {
  font-family: "Indie Flower", cursive;
  font-weight: 400;
  font-style: normal;
}

.bungee-tint-regular {
  font-family: "Bungee Tint", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.dropdown {
    position: relative;
    display: inline-block;
	  flex: 0 0 auto; 
	
}

/* The letter */
.dropbtn {
    padding: 1px;
    text-decoration: none;
    font-weight: bold;
    color: black;
    background-color:white;
    border-radius: 50px;
    font-family: "Bungee Tint", sans-serif;
  font-weight: 400;
  font-style: normal;
    font-size:20px;
    right:50px;
    top:50px;
}

.swing {
    display: inline-block;          /* Important! */
    transform-origin: center center;   /* Pivot from the top */
    animation: tilt 1s infinite steps(1, end);
}

@keyframes tilt {
    0%, 49% {
        transform: rotate(20deg);
    }

    50%, 100% {
        transform: rotate(-20deg);
    }
}

.alphabet {
	display:flex;
    justify-content:flex-end;
    gap:15px;
	margin-right: 30px;
	position: sticky;
  top: 50px;
  z-index: 1000;
}



.applecd  {
  position:absolute; width:200px;left:50px; top:700px;
}

.straw {
  position:absolute; width:210px;left:50px;top:2600px; z-index: 500;
}
.asuka {position:absolute; width:200px; left:50px; top:2630px;z-index:501;
  
}

.applebutton {position:absolute; width:200px;left:50px;top:900px;
}
.lovely {position:absolute; width:250px; top:80px;left:500px;}
.teapot {
  position:absolute; width:200px;left:50px;top:1100px;
}

.strawberrycd {
  position:absolute; width:200px;left:50px;top:2300px; z-index: 7;
}
.applebox {
  position:absolute; width:200px;left:50px;top:1300px;
}

.mushroom {
  position: absolute; width:200px;left:50px; top:3000px;
}
.edward { position:absolute; width:200px; left:500px;}
.redguy { height:500px; position:absolute;}

.wow { position:absolute; width: 500px; left: 40px; top:3200px;}

.applepeel {
  position: absolute; width:200px;left:50px;top:1500px;
}
.tomato  {
  position: absolute; width:200px;left:50px;top:1800px;
}
.redbow {
  position:absolute; width:150px;left:600px;top:1950px; transform:rotate(-45deg);
}


.apple {
  position: absolute; width:200px; left:50px;top:2000px;
}

.mooshroom{
  width:200px; height:auto;  position:absolute;  z-index:2; top:400px; left:50px; pointer-events:none;
}