@charset "UTF-8";
/* universal selector (body)

background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed; (no moving while scrolling)
background-position: top;
background: url("IMG/brick bg.jpg") repeat fixed top; (shortcut)
*/
body {
	background-color: azure;
	font-family: "Funnel Display", sans-serif;
	color: #38368A;
	background: url("IMG/brick bg.jpg") repeat-x top;
}

/*auto margin lets the box stay in middle 'margin: auto;'*/
.box {
	padding: 50px;
	box-sizing: border-box;
	border: 1px solid #323B5B;
	margin: 10px;
	width: 600px;
	height: 400px;
	border-radius: 15px;
	background-color: lightsteelblue;
	color: azure;
	background-image: url("IMG/black sand bg.jpg");
}


.navi {
	display: flex;
	flex-direction: row;
	gap: 170px;
	margin: auto;
	align-content: center;
	padding: 40px;
	box-sizing: border-box;
	border-radius: 500px;
	width: 800px;
	height: 10px;
	align-items: center;
	background-color: aliceblue;
	
	
}
/*flex-end, for right, space-arund/between for justify or center*/
.row {
	display: flex;
	flex-direction: row;
	gap: 20px;
	justify-content: center;
	margin: 20px 0;
}


.col img {
	width: 100%;
	height: auto;
	border-radius: 15px;
	
}


/*padding: 20px;
box-sizing: border-box; for more space for text within the box*/
.col {
	width: 350px;
	border: 1px solid #4184E9;
	background-color: navajowhite;
	border-radius: 15px;
	padding: 20px;
	box-sizing: border-box;

}

/*for .col h3 only*/
.col h3 {
	text-align: center;
}

form {
	width: 350px;
	border: 1px solid #CDF1CA;
	background-color: #CDF1CA;
	border-radius: 15px;
	box-sizing: border-box;
	align-items: center;
	
}

.column {
	display: flex;
	flex-direction: column;
	gap: 20px;
	justify-content: space-around;
	width: 300px;
	margin: auto;
	align-items: center;
	padding: 20px;

}


#main-title {
	font-family: "Knewave", system-ui;
	color: #0C0F36;
}
#sub-section {
	font-family: "Knewave", system-ui;
	color: #0C0F36;
}

/* class selector: pseudo class selector*/
.nav-link:link {
	text-decoration: none;
	color: darkslategray;
	font-family: "Knewave", system-ui;
	text-align: center;
}

.nav-link:hover {
	color:lightpink;
	text-decoration: underline;
	text-align: center;
}

a:link, a:visited {
	color: mediumslateblue;
	text-decoration: none;
}

/* a:link first before a:hover(highlight)*/
a:hover {
	color: lightpink;
	text-decoration: underline;
	text-transform: uppercase;
}

/* pseudo element selector
section=descendent selector-not affect copyright p*/

section p::first-letter {
	font-size: 1.75em;
	font-weight: bold;
}

/* descendent selector*/
nav ul {
	list-style: none;
}

footer p {
	font-size: 0.75em;
	color: lightpink;
	text-align: right;
}

/* attribute selector*/
input[type="text"] {
	background-color: aliceblue;
    color:cornflowerblue;
	width: 200px;
	height: 25px;
	padding: 5px;
	border-radius: 5px;
	border:1px medium transparent;
	cursor: pointer;
}

button[type="submit"] {
	background-color: #31AF7F;
	color: ghostwhite;
	width: 200px;
	height: 50px;
	padding: 5px;
	border-radius: 5px;
	border:1px medium transparent;
	cursor: pointer;
}

button[type="reset"] {
		background-color: darkkhaki;
		color: ghostwhite;
	    width: 200px;
	    height: 50px;
	    padding: 5px;
	    border-radius: 5px;
	    border:1px medium transparent;
	    cursor: pointer;
}

button:hover {
	color:aliceblue;
	font-weight: bold;
	text-decoration: underline;
	text-transform: uppercase;
}