* { box-sizing: border-box; } .header,body { margin: 0; background-image: url("http://www.sparefoot.com/self-storage/blog/wp-content/uploads/2018/02/recordcollection.jpg"); background-attachment: fixed; background-position: center; background-repeat: repeat-y; background-size: cover; min-height: 100%; } /* Style the header */ .header { color: white; font-size: 25px; text-align: center; margin-bottom: 0px; text-shadow: 2px 2px 4px red } .header h1{ background-size: auto; text-align: center; font-size: 100px; margin-top: 0; margin-bottom: 0; } .bg { } /* Style the top navigation bar */ .topnav { overflow: hidden; background-color: beige; border: 10px black; border-style: double; margin-top: 0px; } /* Style the topnav links */ .topnav a { float: left; display: block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; width: 16.66%; } /* Change color on hover */ .topnav a:hover { background-color: black; color: white; } /* Create three equal columns that floats next to each other */ .column { float: left; width: 33.33%; padding: 15px; color: white; } .column h1{ text-shadow: 0 0 3px #ff0000; text-align: center; color: beige; border-bottom: 5px dashed; margin-top: 0; } .column h2{ text-align: center; font-size: 50px; color: white; padding: 0px; margin-bottom: 0px; margin-top: 0px; } .column img{ border-radius: 20px; margin-left: 100px; margin-top: 200px; height: auto; width: auto; } #first { background-color: black; margin-top: 5px; border-radius: 10px; margin-left: 200px; margin-top: 100px; } #firstLesson { background-color: black; margin-top: 5px; border-radius: 10px; margin-left: 500px; margin-top: 100px; } #second{ background-color: black; text-align: center; color: beige; border: 5px solid; margin-left: 200px; margin-top: 100px; } #third{ box-shadow: 10px 10px 5px grey; } #fourth{ box-shadow: 10px 10px 5px white; border-radius: 50%; background-position: middle; margin-top: 0px; z-index: -1; } #contactbox{ background-color: black; margin-top: 5px; border-radius: 10px; margin-left: 200px; margin-top: 100px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */ @media screen and (max-width:600px) { .column { width: 100%; } } input[type=text], select, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; } input[type=submit] { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } .container { border-radius: 5px; background-color: #f2f2f2; padding: 10px; color:black; } .footer { width: 100%; position: fixed; bottom: 0; background-color: #f1f1f1; padding: 10px; text-align: center; color: black; }