//$color1: rgba(31, 42, 38, 1);
$color1: rgba(0, 0, 0, 1);
$color2: rgba(223, 219, 244, 1);
$color3: rgba(232, 227, 33, 1);
$color4: rgba(61, 140, 208, 1);
$color5: rgba(173, 35, 101, 1);

$break-width: 600px;
$mobile: "screen and (max-width: #{$break-width})";
$desktop: "screen and (min-width: #{$break-width})";

.hero {
    //height: 115vh;
    color: $color2;
    background-color: $color1;
    text-align: center;
    @media #{$desktop} { padding: 5em; }
    @media #{$mobile} { padding: 1em; }
}

* {
    box-sizing: border-box;
    // TODO: find what's causing weird top belt
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: $color1;
}

main {
    @media #{$desktop} { width: 60%; }
    @media #{$mobile} { width: 90%; }
    margin: 0 auto;
}

// TODO: Maybe some fun with how text is laid

section.starter {
    border: none !important;
    @media #{$desktop} { padding: 1em; }
    @media #{$mobile} { padding: 0em; }
}

section.starter img {
    width: 100%
}

section {
    color: $color2;
    //background-color: transparent;
    // TODO: have some fun with transparency :D
    background-color: $color1;
    padding-bottom: 5em;
    word-wrap: break-word;

    p {
        margin: 1em;
    }

    h2 {
        display: inline-block;
        margin: 1em 1em 1em 0em;
        padding: .5em;
    }

    @media #{$mobile} {
        margin-bottom: 1em;
    }

    @media #{$desktop} {
        padding: 3em;

        // TODO: generate this shit
        &:nth-child(2) {
            margin: 0em 1em 0em -2em;
        }

        &:nth-child(3) {
            margin: -3em -1em 3em 1em;
        }

        &:nth-child(4) {
            margin: -6em -3em 6em 4em;
        }

        &:nth-child(5) {
            margin: -9em -5em 9em 7em;
        }

        &:nth-child(6) {
            margin: -12em -7em 12em 10em;
        }

        &:nth-child(7) {
            margin: -15em -9em 15em 13em;
        }
    }
}

section:nth-child(even) {
    h2 {
        background-color: $color5;
    }


    a {
        color: $color5;

        &:hover {
            color: $color4;
        }
    }

    border: 8px solid $color5;
}

section:nth-child(odd) {
    h2 {
        background-color: $color4;
    }

    a {
        color: $color4;

        &:hover {
            color: $color5;
        }
    }

    border: 8px solid $color4;
}

// testing area
.acc0 {
    color: $color4;
}

.acc1 {
    color: $color3;
}

.acc2 {
    color: $color5;
}

.hotel-pic
{
    width: 50%;
    display: block;
    margin: .5em auto;
    @media #{$desktop} { width: 50%; }
    @media #{$mobile} { width: 100%; }
}