*{padding:0;margin:0}html{font-size:62.5%;background-color:#fff;color:#000;font-family:Philosopher,sans-serif}body{max-width:100vw}:root{--tile-size: 4rem;--color-band: black;--color-village: black;--color-town: black;--color-background: #2d3436;--color-ocean-background: #0652DD;--color-control-panel: #34495e;--color-control-panel-light: #495969;--color-font-black: #000;--color-font-white: #fff;--shadow: rgb(61, 60, 60);--color-btn: #34495e;--color-btn-hover: #495969;--color-tropical: #009432;--color-dry: #eccc68;--color-temperate: #A3CB38;--color-continental: #12CBC4;--color-polar: #ced6e0;--color-water: #0652DD}.wrapper{max-width:80rem;margin:0 auto;padding:0 2rem}.map{width:100%;margin:auto}.map-separator{margin-bottom:2rem}.banner{position:relative;width:auto;height:100vh}.banner__title{position:absolute;font-size:4rem;top:10%;left:50%;transform:translate(-50%,-50%)}.banner__subtitle{position:absolute;font-size:2.2rem;top:85%;left:50%;transform:translate(-50%,-50%)}.banner__image{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50rem;height:auto}#banner-image-1,#banner-image-2,#banner-image-3{opacity:1;animation-duration:6s}#banner-image-1{animation-name:fadeIn-1}#banner-image-2{animation-name:fadeIn-2}#banner-image-3{animation-name:fadeIn-3}@keyframes fadeIn-1{0%{opacity:0}to{opacity:1}}@keyframes fadeIn-2{0%{opacity:0}33%{opacity:0}to{opacity:1}}@keyframes fadeIn-3{0%{opacity:0}66%{opacity:0}to{opacity:1}}.section-title{text-align:center;font-size:3rem;margin-top:6rem;margin-bottom:2rem;text-decoration:underline}.subsection-title{text-align:center;font-size:2.3rem;margin-top:3rem;margin-bottom:2rem}.paragraph{margin-bottom:2rem;font-size:1.8rem;line-height:1.6}a{text-decoration:none;color:#3498db;transition:all .4s}a:hover,a:active{color:#8e44ad}.key{list-style-type:none}.key__item{font-size:1.8rem;margin-bottom:2rem}.figure-container{text-align:center;width:100%;margin:0 auto 2rem}.figure-container .image{margin:auto;width:100%;height:auto}.quote-container{margin:0 auto 2rem}.quote-container__quote{font-size:2.1rem}.quote-container__attribution{font-size:1.9rem;margin-left:75%}.quote-container__attribution:before{content:"― "}.source-list{list-style-type:none;margin-bottom:6rem}.source-list__source{font-size:1.8rem;margin-bottom:2rem}.map-container{position:relative;display:flex;flex-direction:column;align-items:center;background-color:var(--color-background)}.title-data-container{display:flex;flex-direction:column;background-color:var(--color-background);width:100%;text-align:center}.map-title{margin:1rem;font-size:3rem;color:var(--color-font-white)}.data-container{width:100%;display:flex;flex-direction:row;justify-content:space-evenly}.data-container__data-point{padding:.5rem;color:var(--color-font-white);font-size:2rem}.tile-container{display:grid;grid-template-rows:repeat(12,2rem);grid-template-columns:repeat(12,2rem);grid-column-gap:0;grid-row-gap:0}@media (min-width: 800px){.tile-container{grid-template-rows:repeat(12,2.5rem);grid-template-columns:repeat(12,2.5rem)}}@media (min-width: 1024px){.tile-container{grid-template-rows:repeat(12,3rem);grid-template-columns:repeat(12,3rem)}}@media (min-width: 1280px){.tile-container{grid-template-rows:repeat(12,var(--tile-size));grid-template-columns:repeat(12,var(--tile-size))}}.control-panel{width:80%}.control-panel__button-container{padding:1rem;display:flex;flex-direction:row;justify-content:space-around;align-items:flex-end;margin-top:4%}.control-panel__forward-button-container{display:flex;flex-direction:row;align-items:flex-end}.control-panel__years-per-second-input{width:20%;height:30%;padding:.2rem}.control-panel__forward-label{color:var(--color-font-white);width:30%;padding:.2rem}.control-panel__btn{background-color:var(--color-btn);border:none;border-radius:1rem;box-shadow:0 3px var(--shadow);color:var(--color-font-white);padding:.8rem;text-decoration:none;cursor:pointer;outline:none;margin:auto;transition-duration:.4s}.control-panel__btn:hover{background-color:var(--color-btn-hover)}.control-panel__btn:active{background-color:var(--color-btn-hover);box-shadow:0 1px var(--shadow);transform:translateY(2px)}@media (min-width: 1280px){.control-panel__years-per-second-input{width:30%;height:40%;padding:.5rem}.control-panel__btn{padding:1.5rem}}.tile{position:relative;width:2rem;height:2rem}@media (min-width: 800px){.tile{width:2.5rem;height:2.5rem}}@media (min-width: 1024px){.tile{width:3rem;height:3rem}}@media (min-width: 1280px){.tile{width:var(--tile-size);height:var(--tile-size)}}.region-label{font-size:1rem;word-wrap:break-word;color:var(--color-font-white)}.tropical{background-color:var(--color-tropical)}.dry{background-color:var(--color-dry)}.temperate{background-color:var(--color-temperate)}.continental{background-color:var(--color-continental)}.polar{background-color:var(--color-polar)}.ocean{background-color:var(--color-water)}.tile:hover{cursor:pointer;background-color:gray}.icon-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.icon{padding:0;margin:0 .05rem 0 0}.band{font-size:.25rem;color:var(--color-band)}.village{font-size:.75rem;color:var(--color-village)}.town{font-size:.75rem;color:var(--color-town)}.forest{color:green}.north-river{position:absolute;top:0;height:1px;width:100%;background-color:var(--color-water)}.east-river{position:absolute;top:0;right:0;height:100%;width:1px;background-color:var(--color-water)}.south-river{position:absolute;bottom:0;height:1px;width:100%;background-color:var(--color-water)}.west-river{position:absolute;top:0;left:0;height:100%;width:1px;background-color:var(--color-water)}.selected{background-color:#e4d8d8}@media (max-width: 600px){.wrapper{padding:0 1rem}}