:root { /* --yellow: #ffc600; */ --mustard: #f2ae2e; --yellow: steelblue; --black: #272727; --blue: #5f9ea0; --fontsaufhg: var(--DeepCocoaBrown); --box: #fff6; /* --box: var(--SoftOlive); */ --green: #FDE5B4; --WarmSunlight:#FDE5B4; --GoldenOchre: #E4A54D; --OliveGreen: #7A8C52; --TerracottaRed: #C85C5C; --DeepCocoaBrown: #5A3E36; --textvariant: "amatic-sc"; } html { /* border-box box model allows us to add padding and border to our elements without increasing their size */ box-sizing: border-box; /* A system font stack so things load nice and quick! */ font-family: pelago, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* font-weight: 900; */ font-weight: 400; font-size: 10px; color: var(--DeepCocoaBrown); color: var(--DeepEspresso); } /* WAT IS THIS?! We inherit box-sizing: border-box; from our selector Apparently this is a bit better than applying box-sizing: border-box; directly to the * selector */ *, *:before, *:after { box-sizing: inherit; } body { /* background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAJ0lEQVQIW2NkwA4kGbGISwLFnqNLgAVBipEl4ILIEiiCMAkMQZAEADf0BSAVgBNTAAAAAElFTkSuQmCC), linear-gradient(110deg, rgb(128, 185, 121), whitesmoke); */ background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAJ0lEQVQIW2NkwA4kGbGISwLFnqNLgAVBipEl4ILIEiiCMAkMQZAEADf0BSAVgBNTAAAAAElFTkSuQmCC), linear-gradient(110deg, var(--WarmSunlight),var(--WarmSunlight)); /* background-image: url("./images/topography.svg"), linear-gradient(110deg, steelblue, whitesmoke); background-size: 340px, auto; */ min-height: calc(100vh - 100px); margin: 50px; /* background: white; */ background-attachment: fixed; /* background: var(--SoftSand); */ } p { max-width: 50em; line-height: 120%; /* letter-spacing: 110%; */ } h1, h2, h3, h4, h5, h6 { /* text-shadow: 0 2px 0 rgba(0, 0, 0, 0.07); */ margin: 0 0 5px 0; font-family: fertigo-pro, serif; font-weight: 700; font-style: normal; /* color: var(--SoftOlive); */ color: var(--fontsaufhg); } h2 {font-size: 1.8em;} /* h3 {color: var(--OliveGreen);} */ .einmitten { padding-left: 30px; } .hero { /* color: whitesmoke; */ color: var(--fontsaufhg); } .aufhg { color: var(--fontsaufhg); } /* Each item in our grid will contain numbers */ .item { /* We center the contents of these items. You can also do this with flexbox too! */ display: grid; justify-content: center; align-items: center; border: 5px solid rgba(0, 0, 0, 0.03); border-radius: 3px; font-size: 35px; background-color: var(--yellow); /* best colour */ } .item p { margin: 0 0 5px 0; } body { font-size: 16px; /* transform: rotate(358deg); */ margin-top: 1em; /* max-width: 30em; */ font-size: clamp(1em, 2.8vw, 1.2em); font-size: 1.9em; /* background: #bada55; */ /* background: var(--blue); */ /* background: steelblue, lightslategray, whitesmoke; */ /* background: lightslategray; */ max-width: 1280px; margin: 20px auto 0; } /* .wrapper */ .wrapper { display: grid; grid-gap: 20px; } .top { display: grid; grid-gap: 20px; /* grid-template-columns: 1fr; */ grid-template-areas: "hero" "cta1" "cta2" "cta3" "cta4" "cta5" "cta6" } .hero { grid-area: hero; min-height: 200px; /* background: white url(images/taco.jpg); */ background-size: cover; background-position: bottom right; padding: 50px; display: flex; flex-direction: column; align-items: start; /* justify-content: center; */ justify-content: start; } /* .hero > * { background: var(--yellow); padding: 20px; } */ /* Features! */ .features { display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .feature { background: var(--box); padding: 10px; /* border: 1px solid white; */ text-align: center; box-shadow: 0 0 4px rgba(0,0,0,0.1); } .icon { font-size: 50px; /* display: none; */ } .feature p { color: rgba(0,0,0,0.5); } /* About Section */ .about { background: var(--box); padding:50px; /* display: grid; grid-template-columns: 1fr 1fr; */ align-items: center; } .about p { /* color: rgba(0,0,0,0.5); */ } /* Gallery! */ .gallery { background: white; padding:50px; } .gallery h2{ grid-column: 1 / span 2; } .bigIcon { font-size: 38px; padding-left: 20px; align-self: end; margin-bottom: 0; } img { max-width: 100%; border-radius: 1rem; /* object-fit: cover; */ } footer { background-color: white; height: 40px; text-align: center; padding: 10px; font-size: 12px; } footer a:link {color: black;} footer a {color: black;} @media (min-width: 700px) { html { font-weight: 300; } .top { grid-template-areas: "hero cta1" "hero cta2" "hero cta3" "hero cta4" "hero cta5" "hero cta6" } footer { text-align: right; background-color: transparent; } .hero { padding-top: 150px; } } /* hack */ @media all and (-ms-high-contrast:none) { .icon { display: none; } /* IE10 */ *::-ms-backdrop, .icon { display: none; } /* IE11 */ } @supports (-ms-ime-align:auto) { .icon { display: none; } /* EDGE */ }