@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400..700;1,400..700&display=swap');

html {
    font-family: "Archivo Narrow", sans-serif;
}

body {
	margin: auto;
	padding: 0;
	background-position: center top;
}

.column {
    width: 960px;
    margin: auto;
}

header { 
    margin: 0;
    text-align: center;
    padding-top: 99px;
    padding-bottom: 162px;
}

section {
    padding-bottom: 40px;
}


h1{
    font-size: 80px;
    margin-bottom: 0;
}

h2 {
    margin-top: 0;
    font-size: 30px;
    line-height: 1.1;
}

h3 {
    font-size: 40px;
    text-align: center;
    padding: 40px 0 32px;
    margin: 0;
}

h4 {
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 8px;
    padding: 0;
}

p {
    font-size: 18px;
    line-height: 25px;
    margin: 0;
    padding: 0 0 17px 0;
}

img {
    overflow: clip;
    overflow-clip-margin: content-box;
}

#wrap {
    float:right;
    margin: 0 0 30px 40px;
    height: 300px;
    width: 400px;
    object-fit: cover;
}

#s2 {
    padding: 1px 0;
    padding-bottom: 63px;
}

#s2 p, h4 {
    padding-left: 212px;
}

ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0;
    list-style-type: none;
    row-gap: 22px;
    margin: 0;
}

ul img{
    width:200px;
    height:150px;
    object-fit: cover;
    display: inline;
    float: left;
}

ul div {
    width: 450px;
    
}

li {
    width: 50%;
}

#s3 {
    padding: 0 0 105px;
}

#s3 p{
    font-size: 26px;
    line-height: 35.5px;
    padding: 0 120px;
    text-align: center;
}


footer {
    padding: 40px 0 20px;
}

/* bkgd */

header {
    background-image: url("img/mountain.jpg");
    background-position: top - 200px;
    background-size: cover;
    color: rgb(21, 32, 29);
}

#s1 {
    background-color:rgb(201, 235, 224);
    color:rgb(51, 63, 59);
    
}

#s2 {
    background-color:rgb(162, 176, 215);
    color:rgb(37, 38, 50);
}

#s3 {
    background-color: rgb(208, 199, 217);
    color:rgb(68, 33, 101);
}