/* Grid Style Begins */

body {
    display: grid;
    grid-template: repeat(4, auto) / repeat(6, 16.666666%);
    font-family: Garamond;
}

header {
    grid-row: 1 / 2; /* Row 1 of the grid*/
    grid-column: 1 / span 6; /* From column 1 to column 6*/
}

.navbar {
    grid-row: 2 / 3; /* Row 2 of the grid */
    grid-column: 1 / span 6; /* From column 1 to column 6 */
}

#LeftColumn {
    grid-row: 3 / 4; /* Row 3 of the grid */
    grid-column: 1 / span 1; /* Column 1 to Column 2*/
    background-color: #FFD1A3;
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: center;
    margin-left: -10px;
    margin-bottom: -4px;
}

#LeftColumn a:link {
        text-decoration: none;
}

#LeftColumn a:hover {
        font-weight: bold;
}


#CenterColumn {
    grid-row: 3 / 4; /* Row 3 of the grid */
    grid-column: 2 / span 4; /* Column 2 to Column 5*/
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: purple;
    /* background-color: red; */ /* Test */
    /* justify-content: center; */
    /* align-items: flex-start; */
    text-align: center;
    font-family: Garamond;
}

#SignUp {
    clear: both;
}

#CenterColumn a:link {
    text-decoration: none;
}

#CenterColumn a:hover {
    font-weight: bold;
}

/* Center Column Flex Layout Begins */

#RightColumn {
    grid-row: 3 / 4; /* Row 3 of the grid */
    grid-column: 6 / span 1; /* Column 5 to Column 6*/
    background-color: #FFD1A3;
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: center;
    margin-right: -10px;
    margin-bottom: -4px;
}

#RightColumn a:link {
        text-decoration: none;
}

#RightColumn a:hover {
        font-weight: bold;
}

footer {
    grid-row: 4 / 5; /* Row 4 of the grid*/
    grid-column: 1 / span 6; /* From column 1 to column 6*/
}

/* Grid Style ends */

/* Navbar container */
.navbar {
	// overflow: hidden;
    background-color: #ff0000;
	font-family: Arial;
}

/* Links inside the navbar */
.navbar a {
	float: left;
	font-size: 16px;
    font-weight: bold;
    color: black;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}

/* Fix the Navbar at the top of the page*/
.navbar {
    position:fixed;
    top: 0;
    left: 0;
    right: 0;
}

/* The dropdown container */
.dropdown {
	float: left;
	overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
font-weight: bold;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
	background-color: red;
}

/*Dropdown content (hidden by default) */
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9F9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
	float: none;
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
	background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
	display: block;
}

/* Google Searchbox */
.searchbox {
    float: right;
    width: 25%;
    border: none;
    outline: none;
    color: white;
    padding-top: 10px;
    font-size: 14px;
    background-color: inherit;
    font-family: inherit; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
}


/* Bottom Navbar container */
.BottomNav {
    // overflow: hidden;
    /* background-color: #1C033A; */
    background-color: #A52A2A;
    font-family: Arial;
}

/* Fix the Bottom navbar at the bottom of the page*/
.BottomNav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

/* Links inside the navbar */
.BottomNav a {
        float: left;
        font-size: 14px;
        font-weight: bold;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
}

/* Add a red background color to navbar links on hover */
.BottomNav a:hover {
            background-color: DarkOrange;
            color: black;
}