@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.cdnfonts.com/css/adventure-time-logo');

html {
    color: white;
    font-size: clamp(12pt, 2.4vw, 18pt);
    line-height: 1.4em;
}

body { 
    margin: 0;
    background-color: rgb(255, 156, 164);
}

h2 {
    font-family: 'Adventure Time Logo', sans-serif;
    font-size: 2.5rem;
    line-height: 1.1em;
    text-align: center;
}

h3 {
    font-family: 'Adventure Time Logo', sans-serif;
    font-size: 2rem;
    line-height: 1.1em;
    text-align: center;
}

h4 {
    font-family: 'Montserrat', sans-serif;
    width: clamp(1.3rem, 1.15rem, 1.1rem);
    font-weight: 500;
}

p {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.9em, 1.2vw, 0.7em);
    font-weight: 400;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1px;
}

header img#home {
    height: clamp(40px, 10vw, 70px);
    width: auto;
    margin: 10px 0 0 20px;
}

nav {
    display: flex;
    justify-content: center;
}

nav ul {
    list-style-type: none;
    margin: 10px 20px 0 0;
}

nav ul li {
    float: left;
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

nav ul li a {
    position: relative;
    top: 0;
    transition: all .3s;
    text-decoration: none;
    color: white;
}

nav ul li a img {
    width: clamp(30px, 8vw, 50px);
    height: auto;
}

nav ul li a p {
    font-size: 9pt;
    transform: translateY(-12%);
    margin: 0;
    padding: none;
}

nav ul li a:not(#currentPage):hover, nav ul li:active a:not(#currentPage) {
    top: -5px;
    filter: drop-shadow(0px 8px 8px rgba(80,3,105,0.3));
}

nav ul li a#currentPage {
    opacity: .5;
}

nav ul li a#currentPage img {
    opacity: .5;
}

section#top {
    background-image: url(images/homeSplash.png);
    background-size: cover;
}

section#splash {
    padding: 40px 0 0 0;
    margin: auto;
    text-align: center;
}

section#splash img {
    width: clamp(300px, 70vw, 700px);
    filter: drop-shadow(0px 0px 40px rgba(255, 255, 255, 0.9));
}

section#splash h4 {
    margin: auto;
    width: clamp(350px, calc(100vw - 200px), 800px);
}

section#splashText {
    background-image: linear-gradient(0deg, rgba(255, 156, 164.4, .5) 20%, rgba(255, 156, 164.4,0.3) 70%, rgba(255, 156, 164.4,0) 100%);
    padding-bottom: clamp(50px, 7rem, 100px);
}

section#characterGallery {
    background-color: rgb(255, 121, 132);
    width: clamp(350px, 100vw, 1080px);
    margin: auto;
    padding: clamp(50px, 7rem, 100px) 0px 400px 0px;
    background-image: url("images/homeTreehouse.png");
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
}

section#characterGallery h3 {
    font-size: 14pt;
}

ul#grid {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    list-style-type: none;
    justify-content: center;
}

ul#grid li {
    display: block;
    list-style-type: none;
    padding: 10px 10px;
    position: relative;
    width: 260px;
    height: 350px;
}

ul#grid li a {
    font-size: 12pt;
    color: rgb(237, 128, 53);
    font-family: 'Adventure Time Logo', sans-serif;
    text-decoration: none;
    text-align: center;
    transition: all .3s;
}

ul#grid li img:first-child {
    position: absolute;
    bottom: 200px;
    left: 20px;
    z-index: 10;
    width: 170px;
    height: auto;
    transition: all .3s;
}

ul#grid li img:nth-child(2) {
    position: absolute;
    bottom: 213px;
    z-index: 30;
    width: 260px;
    height: auto;
    filter: drop-shadow(0px 8px 8px rgba(80,3,105,0.15));
}

ul#grid li img.boxy {
    width: 250px;
    height: 250px;
    object-fit: cover;
    border: solid 2px black;
    z-index: 20;
    position: absolute;
    bottom: 0px;
    left: 14px;
}

ul#grid li h3 {
    position: absolute;
    bottom: 212px;
    z-index: 40;
}

ul#grid li a:hover img:first-child {
    position: absolute;
    bottom: 210px;
    left: 20px;
    z-index: 10;
    width: 170px;
    height: auto;
}

footer {
    background-color: rgb(44, 120, 182);
    justify-content: center;
    text-align: center;
}

footer nav {
    background-color: rgb(85, 170, 239);
    padding: 20px;
}

footer p {
    font-size: 8pt;
    font-family: 'Montserrat', sans-serif;
    padding: 20px;
    margin: auto;
}

section.interiorBody {
    background-color: rgb(255, 255, 255, 1);
    width: clamp(350px, 100vw, 1080px);
    margin: auto;
    padding: 10px 0px 0 0px;
}

section.interiorBody img.fullWidth{
    width: 100%;
    margin: 0;
    padding: 0;
}

ul.adjacentContent {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    list-style-type: none;
    justify-content: center;
}

ul.adjacentContent li {
    display: block;
    list-style-type: none;
    padding: 0;
    margin: none;
    width: 50%;
    height: auto;
}

section.interiorBody p {
    padding: 0 7% 20px 7%;
}

section.interiorBody h3 {
    padding: 20px 7% 0 7%;
    text-align: left;
}

ul.adjacentContent li.chunkOfText {
   width: calc(43%);
}

ul.adjacentContent li.left {
    padding: 5% 0 0 7%;
}

ul.adjacentContent li.right {
    padding: 5% 7% 0 0;
}

ul.adjacentContent li.chunkOfText p, ul.adjacentContent li.chunkOfText h3 {
    margin: 20px 0 20px 0;
    text-align: left;
    padding: 0;
}

ul.adjacentContent li img {
    width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    ul.adjacentContent li {
        width: 100%;
    }
    
    ul.adjacentContent li.chunkOfText {
       width: calc(100%);
    }
    
    ul.adjacentContent li.left, ul.adjacentContent li.right {
        padding: 0 10% 0 10%;
    }

    nav ul {
        margin: 0 0 0 0;
        padding: 0;
    }

    nav p {
        margin: 0 0 0 0;
        padding: 10px 6px;
    }

    section.interiorBody p {
        padding: 0 10% 20px 10%;
    }
    
    section.interiorBody h3 {
        padding: 20px 10% 0 10%;
    }
}