@charset "utf-8";
/* CSS Document */

body {
min-height: 100vh;
font-family: "Signika Negative", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400px;
  font-style: normal;
	
}

.macondo-regular {
  font-family: "Macondo", cursive;
  font-weight: 400;
  font-style: normal;
}


section.main { margin-top: 20px; padding: 0; height: 300px;}
section.main aside { width: 33%; float: left; text-align: center;}

section.main2 {
	padding-top: 70px; 
}

h1 {
	text-align: center; 
	padding: 50px; 
}


section.main .content { margn: 15px; background: no-repeat center top; background-size: px 150px; padding-top: 180px;}
section.main aside .content.wizardingworld { background-image: url("images/Frame 23.png")} /* source: https://www.amazon.com/Ultimate-Wizarding-World-History-Magic/dp/1956403493 */ 
section.main aside .content.hogwartshouses { background-image: url("images/Frame 24.png"); } /* source: https://www.logodesign.org/the-history-of-the-hogwarts-logo/
 */ 
section.main aside .content.funfacts { background-image: url("images/Frame 25.png"); } /* source: https://wallpapers.com/wallpapers/aesthetic-harry-potter-deathly-hallows-symbol-16goudz7ypd7uy41.html */ 

a:link {
	color: #FFFAF0; 
	text-decoration: none; 
}

a:visited {
	color: white; 
}

a:hover {
	text-decoration: underline; 
}

.button {
	background-color: black; 
	padding: 5px; 
	border: none; 
	border-radius: 5px; 
}

footer { 
	background-color: black; 
	height: 20px; 
	padding: 40px; 
	bottom: 0; 
	
}
.logo {
	float: left; 
}

.info {
	float: right; 
}

.left {
	display: flex;
    max-width: 100%;
    margin-top: 30px;
    margin-left: 150px;
    margin-bottom: 30px;
    align-items: center;
}

.leftinfo {
	float: left;
    padding-top: 10px;
    padding-bottom: 5px;
    padding-left: 50px;
    padding-right: 70px; 
}

.left2 {
	display: flex;
    max-width: 100%;
    margin-top: 30px;
    margin-left: 150px;
    margin-bottom: 30px;
    align-items: center;
}

.leftinfo2 {
	float: left;
    padding-top: 10px;
    padding-bottom: 5px;
    padding-left: 50px;
    padding-right: 70px; 
}


