div{
    float: left;
    clear: both;
}


#container{
	background-color: lightskyblue;
	height: 80%;
	margin-bottom: 40px;
	width: 80%;
	margin-left: 10%;
}



/*true menus*/
#menuholder {
    margin-top: 2%;
    background-color: lightgreen;
    clear: none;
/* cant exceed 100%*/
width: 15vh;
margin-left: 3%;
height: 32vh;
border-radius: 10px;
max-width: 10%;
}



/*this is for the button inside the green contianer*/

.graybuttons {
    margin-left: 20%;
    margin-top: 22%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: whitesmoke;
    font: monospace;
    padding: 10%;
    border-radius: 10px;
    height: 2.68vh;
    font-size: 2vh;
    width: 3vw ;
    max-height: 30%;
    max-width: 50%;
    margin-top: 2vh;

}

/*true content */
.content {
    width: 70%;
    margin-left: 15%;
    background-color: whitesmoke;
    height: 1300px;
    clear: none;
    margin-top: 2%;
    font-size: 9vh;
margin-bottom: 100px;
    border-radius: 8px;
    text-align: center;
}





.YodaWave img{
 width: 115vw;
 height: 40vw;
 border-radius: 60px; 
 max-width: 75%;
 max-height: 70%;
}

/* The yoda gif is in the container and is seperate from wow gif*/

.Wowgif img{

    margin-left: 50px;
    margin-top: 420px;
    border-radius: 1000px;
    width: 41vh;
    height: 40vh;
    max-height: 30%;
    max-width: 85%;
}

/* Just create a class div for the images and add. >name > img */ 


#Paragraph1 {

    margin-left: 100px;
    margin-right: 100px;
    font-size: 3vh;
}

/* use divs to modify paragraphs with css m*/