/*
Fonts  
---------------------------------------
*/

@font-face {
    font-family: 'Inter-Variable';
    src: url('fonts/Inter-VariableFont_slnt.ttf') format('truetype'),
    font-weight: normal;
    font-style: normal;

}

/*
Reset
---------------------------------------
*/

*, html, body { 
	margin:0; 
	padding:0; 
	}

fieldset, img { 
	border:0; 
}

h1, h2, h3, h5, h5, h6 { 
	font-size:100%; 
	}

ul { 
	list-style:none; 
}



/*
General Styling
---------------------------------------
*/

h1, h2, h3 {
	font-family: "Inter-Variable", sans-serif; 
	font-weight: 900; 
	font-style: normal; 
}


p {
	font-family: "Inter-Variable", sans-serif; 
	font-weight: 400; 
	font-style: normal; 
}


a {
	text-decoration: none;
}

.clear { 
	clear: both; 
}

body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background-color: #F9F7F8;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.logo img, .container img, .strapline img, .projects-container img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.container {
   margin: 0px auto; 
	width: auto;
	max-width: 1200px;
	height: auto;
	min-height:: 80%;
   background: transparent url("images/background.png") no-repeat 0 0;
	background-position: center;
	object-fit: contain;
	-webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}

.content {
    text-align: center;
}

.logo {
	width: 10%;
	height: auto;
	margin-left: 45%;
}

.strapline {
	width: 30%;
	height: auto;
	margin-left: 35%;
	margin-top: 30px;
	margin-bottom: 50px;
}

.content h1 {
    font-size: 3em;
    margin-bottom: 10px;
    color: #112F39;
}

.content p {
    font-size: 1.2em;
    color: #112F39;
    margin-bottom: 20px;
}

.content a {
    color: #112F39;
    margin-bottom: 20px;
}

.divider {
	width: 30%;
	height: 5px;
	background: #FEDC01;
	margin-left: 35%;
	margin-top: 30px;
	margin-bottom: 30px;
}

.introtext, .contacttext {
	width: 40%;
	margin-left: 30%;
	padding-bottom: 20px;
}

.contacttext {
	 padding-top: 40px;
	 padding-bottom: 10px;
}

.projects {
	width: 30%;
	margin-left: 35%;
}

.projects-container {
  display: grid;
  overflow: hidden;
	grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: center;
}

.contact-info {
    font-size: 1.2em;
    color: #112F39;
	 font-weight: 700;
    margin-bottom: 10px;
}

.contact-info a {
    color: #112F39;
	 font-weight: 700;
    text-decoration: none;
}

.social-icons {
    display: flex;
    justify-content: center;
}

.social-icons img {
    width: 30px; 
    margin: 0 5px;
}


/*
Responsive
---------------------------------------
*/


@media only screen and (max-device-width: 900px), screen and (max-width: 900px) {

.introtext, .contacttext {
    width: 60%;
    margin-left: 20%;
}

.projects {
    width: 60%;
    margin-left: 20%;
}


}


@media only screen and (max-device-width: 500px), screen and (max-width: 500px) {

.logo {
    width: 30%;
    height: auto;
    margin-left: 35%;
}

.strapline {
    width: 70%;
    height: auto;
    margin-left: 15%;
    margin-top: 30px;
    margin-bottom: 30px;
}

.content {
	width: 90%;
    margin-left: 5%;
}

.introtext, .contacttext, .projects {
    width: 100%;
    margin-left: 0;
}

.content p {
    font-size: 1em;
}

.divider {
    width: 40%;
    margin-left: 30%;
    margin-top: 30px;
    margin-bottom: 30px;
}


}