* {
            box-sizing: border-box;
        }

		/* image */
		img {
			max-width: 80%;
			height: auto;
			margin: 0;
		}

        /* Style the body */
        body {
            font-family: Courier;
            margin: 0;
			background: rgb(204,255,204);
        }
        /* Style typography */
        p {
            margin: 0;
			font-size: 20px;
        }
        h1 {
            margin-top: 30;
            margin-bottom: 20px;
			color: rgb(204,51,0);
			font-size: 30px;
        }
		h2 {
            margin-top: 15;
            margin-bottom: 15px;
			color: rgb(102,102,154);
			font-size: 24px;
        }
		a:link {
			color: red;
			font-size: 20px;
			text-decoration: none;
		}
		a:visited {
			color: red;
			font-size: 20px;
			text-decoration: none;
		}	
		a:hover {
			text-decoration: underline;
		}		

		#wrap { 
			width: 70%; 
			margin: 0 auto; 
		}


        /* nav bar */
        .navbar {
            display: flex;
            justify-content: center;
            margin-bottom: 0px;
			background: rgb(153,204,153);
			padding-top: 15px;
        }
		
		/* line image */
		#line
		{	
			background-repeat: repeat-x;
			background-image: url("../images/line.jpg");
			height: 16px;
		}
		
	
		/* clickable buttons */
		#home a{
			display: inline-block; 
			background-image: url("../images/ikon_small.jpg");
			height: 50px;
			width: 216px;
			margin: 0;
		}
		#home a:hover {
		background-image: url("../images/ikon_small_h.jpg");
		height: 50px;
		width: 216px;
		margin: 0;
		cursor: pointer;
		-o-transition: .5s;
		-ms-transition: .5s;
		-moz-transition: .5s;
		-webkit-transition: .5s;
		}
		
		#games a{
			display: inline-block; 
			background-image: url("../images/games.jpg");
			height: 50px;
			width: 150px;
			margin: 0;
		}
		#games a:hover {
		background-image: url("../images/games_h.jpg");
		height: 50px;
		width: 150px;
		margin: 0;
		cursor: pointer;
		-o-transition: .5s;
		-ms-transition: .5s;
		-moz-transition: .5s;
		-webkit-transition: .5s;
		}
		
		#lego a{
			display: inline-block; 
			background-image: url("../images/lego.jpg");
			height: 50px;
			width: 120px;
			margin: 0;
		}
		#lego a:hover {
		background-image: url("../images/lego_h.jpg");
		height: 50px;
		width: 120px;
		margin: 0;
		cursor: pointer;
		-o-transition: .5s;
		-ms-transition: .5s;
		-moz-transition: .5s;
		-webkit-transition: .5s;
		}
		
		#music a{
			display: inline-block; 
			background-image: url("../images/music.jpg");
			height: 50px;
			width: 131px;
			margin: 0;
		}
		#music a:hover {
		background-image: url("../images/music_h.jpg");
		height: 50px;
		width: 131px;
		margin: 0;
		cursor: pointer;
		-o-transition: .5s;
		-ms-transition: .5s;
		-moz-transition: .5s;
		-webkit-transition: .5s;
		}
		
		#photos a{
			display: inline-block; 
			background-image: url("../images/photos.jpg");
			height: 50px;
			width: 127px;
			margin: 0;
		}
		#photos a:hover {
		background-image: url("../images/photos_h.jpg");
		height: 50px;
		width: 127px;
		margin: 0;
		cursor: pointer;
		-o-transition: .5s;
		-ms-transition: .5s;
		-moz-transition: .5s;
		-webkit-transition: .5s;
		}
		
		#other a{
			display: inline-block; 
			background-image: url("../images/other.jpg");
			height: 50px;
			width: 118px;
			margin: 0;
		}
		#other a:hover {
		background-image: url("../images/other_h.jpg");
		height: 50px;
		width: 118px;
		margin: 0;
		cursor: pointer;
		-o-transition: .5s;
		-ms-transition: .5s;
		-moz-transition: .5s;
		-webkit-transition: .5s;
		}
		
		#contact a{
			display: inline-block; 
			background-image: url("../images/mail.jpg");
			height: 50px;
			width: 85px;
			margin: 0;
		}
		#contact a:hover {
		background-image: url("../images/mail_h.jpg");
		height: 50px;
		width: 85px;
		margin: 0;
		cursor: pointer;
		-o-transition: .5s;
		-ms-transition: .5s;
		-moz-transition: .5s;
		-webkit-transition: .5s;
		}
        /* row */
        .row {
            display: flex;
            flex-wrap: wrap;
        }
        /* Column */
        .col {
            flex: 33%;
            text-align: center;
            padding: 5px;
        }
        /* Column content container */
        .col-content {
            padding: 15px;
        }


        /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
        @media screen and (max-width: 950px) {
			#wrap { 
			width: 90%; 
			}           
			.row, .navbar, .col {
				flex-direction: column;
				align-items: center;
            }
        }