/* Fonts */

@font-face {
    font-family: "Gilmer";
    src: url("../fonts/Gilmer-Regular.otf");
}

@font-face {
    font-family: "Gilmer Bold";
    src: url("../fonts/Gilmer-Bold.ttf");
}

/* General */

html {
	scroll-behavior: smooth;
}

body {
	background-color:  rgb(221, 240, 255);

}

.regular-font {
	font-family: "Gilmer";
}

.bold-font {
	font-family: "Gilmer Bold";
}

.dark-blue-font {
	color: rgb(0, 30, 107);
}

.container {
    margin-left: 15%;
	display: flex;
	margin-right: 0;
}
@keyframes bounce { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } }

#cloud-img {
	width: 300px;
	height: 300px;
	padding: 0;
	margin-top: 4em;
	float: right;
	position: absolute;
    margin-left: 45em;
    margin-bottom: 3em;
    animation: bounce 2s infinite alternate;
}
.dark-blue-font {
	padding: 0;
	margin: 0;
}

:root {
	--dark-blue: rgb(0, 30, 107);
	--light-blue:  rgb(221, 240, 255);
}
/* Nav bar */

nav {
    top: 0;

}

ul {
    list-style-type: none;
    overflow: hidden;
    padding-right: 1.5em; 
}

li {
    display: inline;
}


li a {
    padding: 1em;
    text-decoration: none;
    font-size: 1.3em;
    color: black;
    font-family: "Gilmer Bold";
}

#ss-logo {
	margin-top: -0.7em;
    margin-left: 1.5em;
    float: left;
	width: 140px;
    height: 140px;
}

#nav-options {
    float: right;    
}

/* Home */



#home-title {
	font-family: "Gilmer Bold";
	font-size: 6em;
	margin-top: 2em;
    margin-bottom: 0;
}

#home-subtitle {
	font-family: "Gilmer";
	font-size: 1.7em;
	margin-bottom: 2em;
}

#browse-button {
	font-family: "Gilmer Bold";
	color: white;
	background-color: var(--dark-blue);
	border-color: var(--dark-blue);
	font-size: 1.3em;
	text-decoration: none;
	padding: 13px;
	border-radius: 10px;
	border-style: solid;
	border-width: 3px;
	transition: 0.15s ease-in;
	z-index: 2;
	position: absolute;
}

#browse-button:hover {
	background-color: var(--light-blue);
	border-color: var(--dark-blue);
	color: var(--dark-blue);

}

#fbg {
	width: 110%;
	height: 70%;
	margin-top: -10em;
	margin-left: -2em;
	margin-right: -2em;
	z-index: 1;
	position:relative;
}

#nbg {
	width: 100%;
	height: 70%;
	margin-top: -30em;

}


/* About page */
#about-title {
	font-family: "Gilmer Bold";
	font-size: 6em;
	margin-top: 2em;
    margin-bottom: 0;
}
#about-subtitle {
	font-family: "Gilmer";
	font-size: 1.7em;
	margin-bottom: 2em;
}

/* Mission */

#mission-section {
	background-color: var(--light-blue);
}
#mission {
	text-align: center;
	justify-content: center;
	background-color: white;
	margin-left: 15%;
	margin-right: 15%;
	margin-top: -20em;
	padding: 10px;
	border-radius: 20px;
	transition: box-shadow .3s ease;
	box-shadow: 0 2px 4px 0 rgb(43, 49, 56), 0 3px 10px 0 rgb(93, 126, 217);
	z-index: 3;
	position: relative;
}

#mission:hover {
	box-shadow: 0px 0px 20px rgb(51, 176, 222);
}

#mission-title {
	font-family: "Gilmer Bold";
	font-size: 4em;
	margin-top: 0.2em;
	color: var(--dark-blue);
}

#mission-subtitle {
	font-family: "Gilmer";
	font-size: 1.5em;
}

#how {
	margin-top: 3em;
	text-align: center;
	font-family: "Gilmer Bold";
	font-size: 3.4em;
}

#how-it-works {
	margin-left: 25%; 
	margin-right: 20%; 

}

.how-block {
	display: flex;
}

.how-img {
	width: 200px;
	height: 200px;
	margin-right: 3em;
}

.how-text h2 {
	font-family: "Gilmer Bold";
}

.how-text h3 {
	font-family: "Gilmer";

}