/* styled by j. schere in june of 2026, with many thanks to michael gira (for existing, not because he has anything to do with code) */
/* fonts from the googler!! */
@import url('https://fonts.googleapis.com/css2?family=Pliant:ital,wght@0,100..900;1,100..900&display=swap');
:root {
    /* using color variables makes changing things way easier! */
    --main-background: #e29c5f;
    --text-accent: #e2de5f;
    --text-secondary: #864a17;

    /*
        this neat little value affects how much the lightness of the background
        changes between the broader page and its body! check the code under the 
        #main-body selector for more details B) 
    */
    --background-variation: 15; 
}
/* prevent overflow so that the separator doesn't cause horizontal scroll bars */
body {
    background-color: var(--main-background);
    overflow-x: hidden;
}

#main-title {
    text-shadow: var(--text-accent) 2px 0px;
}

#main-title, #subtitle, #attribution {
    text-align: center;
}

#attribution {
    font-style: italic;
    text-shadow: #b2863a 2px 2px;
}

#submit-button {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

#logo-img {
    display: block;
    margin: 0 auto;
}
/* position and offset the boxes to either side of the logo */
#leftside-boxes, #rightside-boxes {
    display: flex;
    flex-direction: column;
    width: fit-content;
    position: absolute;
    top: 23%;
}

#rightside-boxes {
    right: 1%;
}

#firstbox-left, #thirdbox-right {
    translate: -50px 0;
}

#thirdbox-left, #firstbox-right {
    translate: 50px 0;
}

#whale-one, #whale-two {
    position: absolute;
    scale: 20%;
}

#whale-one {
    top: 2%;
    left: 2%;
    transform: scaleX(-1); /* horizontal flip */
}

#whale-two {
    top: 30%;
    right: 11%;
}

#separator {
    width: 120%;
    min-height: 109px;
    background-image: url("../assets/big box.png");
    background-repeat: repeat-x; 
    translate: -40px 0;
}

#main-body {
    margin: 5% 10%;
    padding: 0 10px 5px 10px;
    /* neat little CSS trick - synthesize a lighter version of the background on the fly */
    background-color:hsl(from var(--main-background) h s calc(l + var(--background-variation)));
    border-radius: 5%;
    border: var(--text-secondary) 4px solid;
}

#main-body h2 {
    color: var(--text-secondary);
    letter-spacing: 2px;
    font-size: 40px;
    margin-bottom: 5px;
}

#main-body h2::before {
    content: "";
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    translate: 0 10px; /* vertically center before element */
    background: url("../assets/moving-day-icon.ico") center / contain no-repeat;
}

#main-body p {
    font-family: 'Pliant', sans-serif;
}

#main-body p i {
    color: cornflowerblue;
}