main.scss

@import 'nav';
@import 'footer';
@import 'portfolio';
@import 'carousel';
$x-small: 768px;
$small: 769px;
$small-max: 992px;
$medium: 993px;
$medium-max: 1225px;
$large: 1226px;

body {
	margin:0 auto;
}

#home-body {
	height:90vh;
	h2 {
		font-weight:normal;
		font-size:22px;
		letter-spacing: 0px; 
	}
}

#about-content {
	padding:50px 0px 50px 50px;
	a {
		color:$bluegrey;
	}
	a:hover{
		color:saturate(lighten($cranberry, 30%),5%);
	}
}

#sunset {
	@media screen and (min-width: $small) and (max-width: $small-max) {
	height:375px;
	object-fit:cover;
	margin-bottom:-25px;
	}
	@media screen and (max-width: $x-small) {
	height:300px;
	object-fit:cover;
	margin-bottom:-25px;
	}
}

.button {
		background-color:$aqua;
		border-radius:40px;
		padding:2px 0px 2px 0px;
		margin-right:1px;
	a{
		color:black;
		padding:10px 7px 10px 7px;
		
	}
	a:hover {
		color:$aqua;
		border:1px solid $aqua;
		border-radius:40px;
		text-decoration:none;
	}
}

.button:hover {
	background-color:#27262f;
}
#h1 {
	font-size:70px;
	letter-spacing: 4px; 
	padding-top:100px;
	@media screen and (max-width: $x-small) {
    		font-size:45px;

  			}
}

h1, h2, h3 {
	color:$offwhite;
	font-family:'Raleway', sans-serif;
	font-spacing:2px;
}

h3 {
	font-size:20px;
	font-weight:normal;
}

p {
	color:$bluegrey;
	font-size:16px;
	font-family:'Arimo', sans-serif;
}

h2 {
	font-size:28px;
	letter-spacing: 1px; 
}


iframe {
	margin-top:50px;
	@media screen and (max-width: $x-small) {
    		width:80vw;
    		height:50vw;
  			}
	
}

#animation-content {
	h2 {
		margin-top:75px;
	}
	.space {
		margin-bottom:75px;
	}
}

#art-content {
	
	img {
	border-radius:40px;
	}
	img:hover {
	opacity:.5;
	}
	@media screen and (min-width: $medium) {
	margin: 75px 0px 100px 0px;
	#space-fix {
	margin: 50px 0px 0px 0px;
	}
	#space-fix-2 {
	margin: 65px 0px 0px 0px;
	}
	#space-fix-3 {
	margin: -10px 0px 0px 0px;
	}
	#space-fix-4 {
	margin: 65px 0px 0px 0px;
	}
	}
	@media screen and (max-width: $small-max) {
	margin: 75px 0px 50px 0px;
	img {
		margin-bottom:50px;
	}
	}
	p {
	margin-bottom:75px;
	}
	
}