@import url('https://fonts.googleapis.com/css2?family=IBM+Flex&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

body {
	background-image: url('/background.jpg');
	background-size: cover;
	background-position: center;
	height: 100vh;
}

body, html {
	height: 100%;
	margin: 0;
	overflow: hidden;
}

body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: -1;
}

/* styling for logo */
#logo {
	position: absolute;
	top: 150px;
	left: 20px;
	width: 100px;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* styling for title */
h1 {
	text-align: center;
	margin-top: 210px;
	color: white;
	font-family: 'IBM Flex', sans-serif;
	margin-left: 100px;
	margin-right: 100px;
}

h2 {
	text-align: center;
	color: white;
	font-family: 'IBM Flex', sans-serif;
	font-size: 20px;
	margin-left: 100px;
	margin-right: 100px;
	font-size: 30px;
}

h3 {
	text-align: center;
	color: white;
	font-family: 'Roboto', sans-serif;
	font-size: 30px;
	margin-left: 100px;
	margin-right: 100px;

}

/* styling for text */
p {
	text-align: center;
	margin-top: 50px;
	color: white;
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
	margin-left: 20%;
	margin-right: 20%;
}

/* styling for button */
.btn {
	display: block;
	width: 200px;
	margin: 60px auto;
	text-align: center;
	text-decoration: none;
	background-color: #030303;
	color: white;
	padding: 14px 40px;
	border-radius: 10px;
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
}


.btn:hover{
	background-color: white;
	color: #030303;
	padding: 14px 40px;
	border-radius: 10px;
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
}


.footer{
	position: absolute;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	color: white;
	bottom: 10px;
    right: 10px;
	text-decoration: none;
}

.social-media {
	position: absolute;
	bottom: 50px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: space-between;
	width: 250px;
}

.social-media a {
	width: 40px;
	height: 40px;
	display: block;
	background-size: cover;
}

/* styling for specific social media icons */
.social-media a.facebook {
	background-image: url('https://cdn1.iconfinder.com/data/icons/social-media-2285/512/Colored_Facebook3_svg-512.png');
}

.social-media a.instagram {
	background-image: url('https://cdn4.iconfinder.com/data/icons/social-messaging-ui-color-shapes-2-free/128/social-instagram-new-square2-512.png');
}

.social-media a.linkedin {
	background-image: url('https://cdn1.iconfinder.com/data/icons/logotypes/32/square-linkedin-1024.png');
}

@media only screen and (max-width: 800px) {

	#logo{
		top: 100px;
	}

    h1 {
        font-size: 20px;
		margin-left: 20px;
		margin-right: 20px;
    }
	h2 {
        font-size: 15px;
		margin-left: 20px;
		margin-right: 20px;
    }
	h3 {
        font-size: 20px;
		margin-left: 20px;
		margin-right: 20px;
    }
    p {
        font-size: 15px;
    }
    .social-media a {
        width: 30px;
        height: 30px;
    }
	.footer {
		font-size: 15px;
	}
	.btn{
		width: 100px;
		font-size: 15px;
		margin: 30px auto;
	}
}