@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");


/* google font */
h1 {
	font-family: "Roboto Mono", monospace;
	font-optical-sizing: auto;
	font-style: normal;
}

/* image background */
body {
	background-image: url("../images/BlueBackground.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
}

/* https://www.w3schools.com/howto/howto_js_topnav.asp */
/* Add a black background color to the top navigation */
.topnav {
	background-color: #333333;
	overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
	float: left;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
	background-color: #ddd;
	color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
	background-color: #04AA6D;
	color: white;
}

body {
	font-family: 'Roboto Mono', monospace;
	/* color: #24b50b; */
}

/* Style the list inside the menu */
nav ul {
	list-style-type: none;
	padding: 0;
}

/* Style the links inside the list
(only for demonstration. should be removed) */
/* article {
    float: left;
    padding: 20px;
    width: 70%;
    height: 300px;
} */

/* Clear floats after the columns */
section::after {
	content: "";
	display: table;
	clear: both;
}

.card .btn {
	margin-left: 5px;
}

.btn-close-red {
	background-color: red;
	background-position: center;
	background-repeat: no-repeat;
}


/* Footer style */
footer {
	background-color: #343a40;
	color: #fff;
	padding: 1px 0;
	position: fixed;
	bottom: 0;
	width: 100%;
	text-align: center;
}

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {

	nav,
	article {
		width: 100%;
		height: auto;
	}
}