div {
float: left;
clear: both;
}


/*This is the backround for my blog, it will hold everything I write*/
#container {
	background-color: #D767AD;
	width: 94%;
	margin-top: 1%;
	margin-bottom: 1%;
	margin-left: 3%;
	height: 95vh;
}
/*this is the menu for my blog that holds the buttons that will tak eyou around my blog*/
.topmenu{
	float: both;
	clear: both;
	background-color: #CF9FFF;
	width: 90%;
	padding-top: 3%;
	margin-top: 1%;
	margin-left: 1.5%;
	height: 6vw;
	position: fixed;
}
/*All 4 buttons below will eventually take you to tother parts of my blog*/

.menubutton{
	font-size: 2.3vw;
	color: black;
	/*This is the transition property, it makes it so if I have the button do somthing it takes .3 second to do it*/
	transition: transform 0.3s ease;
	background-color: lightskyblue;
	margin: 1vh;
	margin-left: 2.5%;
	padding: 1vh;
}

/*This is where my informative writting goes, and also all the things my writing has to be like how big and where*/
#intro {
	float: both;
	clear: both;
	background-color: lightskyblue;
	font-size: 1.5vw;
	color: black;
	width: 80%;
	height: 70;
	margin-top: 10%;
	margin-bottom: 1%;
	margin-left: 5%;
	padding: 5%;
}

iframe {
	clear: both;
    display: block;
    padding-top: 40%;
    border: none;
}

/*All this hover and transform things make it so my button grow when you hover over them, this is what I use dthe transition property for earlier*/
.button1:hover {
    transform: scale(1.1);
}

.button2:hover {
    transform: scale(1.1);
}

.button3:hover {
    transform: scale(1.1);
}

.button4:hover {
    transform: scale(1.1);
}

.button1, .button2, .button3, .button4 {
	display: block;
	text-decoration: none;
}