$theme-color-1: #f15a24;
$theme-color-2: #f7931e;
$theme-color-3: #0071bc;
$theme-color-4: #662d91;
$background-color: #000000;

$feature-color-1: rgb(245, 245, 245);
$feature-color-2: rgb(131, 4, 4);

$room-color-1: black; 
$room-color-2: 	rgb(243, 179, 35);
$room-color-3: 	rgb(131, 4, 4);
$room-color-4: rgb(224, 219, 219);
$room-color-5: rgb(224, 219, 219);
$room-color-6: rgb(245, 245, 245);

@font-face { 
    font-family: LemonMilk; 
    src: url(fonts/LEMONMILK-Regular.otf);
}


body {
    font-family: 'Epilogue', sans-serif;
    font-family: "Raleway", sans-serif;
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}
.navbar {
    background: $background-color !important;
    text-align: right;
    font-family: "LemonMilk";
    padding: 2% !important;
    z-index: 1;
}

.navbar-nav {
    width: 100%;
    justify-content: right;
}

.navbar-brand {
    font-weight: 800;
    font-family: "LemonMilk";
    color: $theme-color-1;
}
.nav-link { 
    font-size: 20px;
    margin-left: 6%;
}

#hero-section {
    background: white;
    margin: 0;
    padding: 0;
    border: 1px solid $background-color;
    align-items: space-around;
    color: black;

}

#intro_sec {
    margin: 0;
    padding: 0;
    border: 1px solid $background-color;
    align-items: space-around;
    color: white;
    background-image: url("./photos/money_back.jpg");
    background-size: cover;

}

#hero-container {
    margin: 50px;
    justify-content: space-evenly;
    align-items: center;
    // border: 1px solid green;
}

#intro_cont {
    margin: 50px;
    background-color: rgba(0, 0, 0, .8);
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    // border: 1px solid green;
    img {
        width: 20%;
        aspect-ratio: 1/1;
    }
}

// Apply styles starting from medium devices and up to extra large devices


$block-width: min(calc(500px / 4), calc((100vw - 180px) / 4));


#hero-text1 {
    padding: 0;
    
    padding-top: 50px;
    display: inline-block;
    @media (min-width: 1100px) {
        padding: 50px;
    }

    
    // border: 1px solid blue;
    h1 {
        font-size: 30px;
        font-family: "LemonMilk";
        b {
            color: $theme-color-1;
            font-weight: 800;
            font-size: 60px;
            line-height: 1em;
            @media (min-width: 1100px) {
                font-size: 70px;
            }
        }
    }

    p {
        font-family: 'Epilogue', sans-serif;
        font-weight: 500;
        font-size: 30px;
        margin-top: 20px;
        line-height: 1.4em;
    }

    button {
        background: $theme-color-1;
        color: white;
        border-radius: 5px;
        border: none;
        padding: 10px 40px;
        font-family: inherit;
        font-weight: 800;
        margin-top: 5px;
        font-size: 22px;
        width: 100%;
        @media (min-width: 576px) {
            width: auto;
        }
        @media (min-width: 1100px) {
            margin-top: 10px;
        }
    }

    @media (min-width: 1100px) {
        width: calc((100vw - 100px) * 7/15);
    }
    @media (max-width: 1100px) {
        align-self: center;
        max-width: calc($block-width * 4);
        display: inline-block;
        // border: 1px solid red;
    }

}


#hero-text {
    padding: 0;
    padding-top: 50px;
    display: inline-block;
    @media (min-width: 1100px) {
        padding: 50px;
    }

    
    // border: 1px solid blue;
    h1 {
        font-size: 30px;
        font-family: "LemonMilk";
        b {
            color: $theme-color-1;
            font-weight: 800;
            font-size: 60px;
            line-height: 1em;
            @media (min-width: 1100px) {
                font-size: 70px;
            }
        }
    }

    p {
        font-family: 'Epilogue', sans-serif;
        font-weight: 500;
        font-size: 30px;
        margin-top: 20px;
        line-height: 1.4em;
    }

    button {
        background: $theme-color-1;
        color: white;
        border-radius: 5px;
        border: none;
        padding: 10px 40px;
        font-family: inherit;
        font-weight: 800;
        margin-top: 5px;
        font-size: 22px;
        width: 100%;
        @media (min-width: 576px) {
            width: auto;
        }
        @media (min-width: 1100px) {
            margin-top: 10px;
        }
    }

    @media (min-width: 1100px) {
        width: calc((100vw - 100px) * 1 / 2);
    }
    @media (max-width: 1100px) {
        align-self: center;
        max-width: calc($block-width * 4);
        display: inline-block;
        // border: 1px solid red;
    }

}




#hero-animation-web {

    display: grid;
    grid-template-columns: $block-width $block-width $block-width $block-width;
    grid-template-rows: $block-width $block-width $block-width;
    align-items: center;
    justify-items: center;
    grid-gap: 20px;
    
    // border: 1px solid red;

    .movingBlock {
        width: $block-width;
        height: $block-width;


    }
    #movingCircle {
        background: $theme-color-4;
        border-radius: 50%;
    }
    #movingBlock1 {background: $theme-color-1;}
    #movingBlock2 {background: $theme-color-2;}
    #movingBlock3 {background: $theme-color-3;}
    #movingBlock4 {background: $theme-color-4;}
    #movingBlock5 {background: $theme-color-2;}
    #movingBlock6 {background: $theme-color-1;}
    #movingBlock7 {background: $theme-color-3;}
    #movingBlock8 {background: $theme-color-4;}
    #movingBlock9 {background: $theme-color-1;}
    #movingBlock10 {background: $theme-color-2;}
}

#mission-section {
    font-family: 'Epilogue', sans-serif;
    padding: 50px 50px;
    text-align: center;

    @media (min-height: 700px) {
        padding: 130px 50px;
    }
    h2 {
        font-weight: 800;
        color: $theme-color-1;
        font-size: 60px;
    }
    h3 {
        font-weight: 400;
    }
    p {
        font-weight: 300;
        font-size: 22px;
        margin-top: 20px;
        line-height: 1.4em;
        display: inline-block;
        margin-top: 40px;
        @media (min-width: 992px) {
            max-width: 66vw;
        }
    }
}


#featured-section {

    font-family: "Raleway";
    padding: 50px 20px;
    text-align: center;
    font-size: 20px;
    @media (min-height: 400px) {
        padding: 80px 50px;
    }

    background: $background-color;


    #featured-box {
        color: black;
        background-color: $feature-color-1;
        padding-top: 50px;
        padding: 20px;
        display: inline-block;
        $featured-box-width: max(55vh, calc(70vh - 150px));
        min-height: $featured-box-width;
        min-width: 100%;
        box-shadow: 10px 10px 0 0 $feature-color-2;

        display: flex;
        align-items: center;
        height: 100%;

        h2 {
            font-weight: 800;
            font-family: "LemonMilk";
            font-size: 40px;
            margin-bottom: 20px;
            margin-top: 0;
            @media (min-height: 700px) {
                font-size: 50px;
            }
            
        }

        #featured-image { 
            max-width: 100%;
        }

        #featured-buttons {
            display: flex;
            justify-items: center;
            align-items: center;
            flex-direction: column;
            margin-top: 50px;

            button {
                width: 100%;
                
                padding: 10px 32px;
                border-radius: 5px;

                @media (min-height: 700px) {
                    width: 250px;
                }

                &#featured-game-btn {
                    background: black;
                    border: none;
                    color: $feature-color-1;
                    font-weight: 800;
                    margin-bottom: 10px;
                }

                &#featured-browse-rooms-btn {
                    border: 3px solid black;
                    background: $feature-color-1;
                    color: black;
                    font-weight: 300;
                }
            }
        }
        #description-label {
            font-family: "LemonMilk";
        }
        #featured-description {
            font-family: "Epilogue", sans-serif; 
            font-size: 22px;
        }
        @media (min-height: 400px) {
            padding: 30px;
        }
        @media (min-height: 900px) {
            padding: 90px;
        }
        .col-md-4 { 
            display: flex; 
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
    }
}


#subscribe-section {
    font-family: "Raleway";
    padding: 50px 40px;
    text-align: center;

    @media (min-height: 700px) {
        padding: 80px 50px;
    }
    h2 {
        font-weight: 800;
        color: $theme-color-1;
        font-family: "LemonMilk";
        font-size: 60px;
    }

    p {
        font-family: DM Sans;
        font-weight: 100;
        font-size: 22px;
        margin-top: 20px;
        line-height: 1.4em;
        display: inline-block;
        margin-top: 40px;
        @media (min-width: 992px) {
            max-width: 66vw;
        }
    }

    #subscribe_inputs {
        margin-top: 40px;

        #mce-EMAIL {
            border: 3px solid black;
            color: black;
            padding: 10px 20px;
            font-size: 15px;
            width: 20vw;
            text-align: center;
        }

        #subscribe {
            background: black;
            color: white;
            padding: 10px 13px;
            border: 3px solid black;
        }
    }
    
}

#footer {
    height: 10vh;
    background: #222;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

//  COMMAND LINE: sass /Users/elenawilliams/Documents/escape_it_v_2_0/input.scss /Users/elenawilliams/Documents/escape_it_v_2_0/style.css


#roomsPage {

    background: white;
    
    h1 {
        margin: 50px;
        font-weight: 800;
        text-align: center;
        font-family: "LemonMilk";
        color: #222;
        font-size: 50px;
        line-height: 1em;
    }
        
    #donating {
        margin: 50px;
        text-align: center;
        font-family: "Raleway";
        color: red;
        font-size: 30px;
        line-height: 1em;
    }

    .rooms {
        margin: 20px;
        padding: 30px;
        border-radius: 10px;
        font-family: "Raleway", sans-serif;
        width: 96%;
        @media (min-height: 700px) {
            margin: 2%;
            padding: 2;
        }
        h2 {
            font-weight: 800;
            font-size: 40px;
            font-family: "LemonMilk";
            @media (min-height: 700px) {
                font-size: 50px;
            }
        }

        .roomButtonWrapper {
            display: flex;
            justify-content: center;
        }

        .roomImage img { 
            width: max(40%, 150px);
        }
        .roomImage { 
            text-align: center;
        }
        .roomDetails { 
            text-align: center; 
            font-size: 20px;
            font-family: "LemonMilk";
        }

        .roomDescription {
            text-align: justify;
            font-size: 20px;
        }
        button {
            padding: 10px 20px;
            margin-top: 20px;
            width: 100%;
            font-weight: 800;
            @media (min-height: 700px) {
                width: 250px;
            }
            align-self: center;
            border-radius: 5px;
        }
    }

    #room1 {
        background: $room-color-1;
        color: white;
        border-color: black;
        border-style: solid;
        button {
            background: white;
            color: $room-color-1;
            border: none;
        }
    }

    #room2 {
        background: $room-color-2;
        color: black;
        button {
            background: white;
            color: $room-color-2;
            border: none;
        }
    }

    #room3 {
        background: $room-color-3;
        color: white;
        button {
            background: white;
            color: $room-color-3;
            border: none;
        }
    }

    #room4 { 
        background: $room-color-4;
        color: black; 
        button { 
            background: black; 
            color: $room-color-4;
            border: none;
        }
    }

    #room5 { 
        background: #f8bfc6;
        color: black; 
        button { 
            background: black; 
            color: $room-color-4;
            border: none;
        }
    }
    #room6 { 
        background: white;
        border-color: black;
        border-width: 2;
        border-style: solid;
        color: black; 
        button { 
            background: black; 
            color: $room-color-6;
            border: none;
        }
    }


}

#contactPage {
    text-align: center;

    background: white;

    #faq {
        margin-bottom: 10vh;
        align-items: flex-start;

        h1 {
            font-family: "LemonMilk";
            margin: 50px;
            margin-bottom: 20px;
            font-weight: 800;
            text-align: center;
            color: #222;
            font-size: 50px;
            line-height: 1em;
            align-self: "center";
        }
        .question {
            font-family: "LemonMilk", sans-serif;
            font-weight: 300;
            display: inline-block;
            font-size: 25px;
            text-align: center;
            margin: 0 20px;
            width: 60%;
        }
        b {
            color:rgb(205, 0, 0);
        }
        .answer {
            font-family: "LemonMilk", sans-serif;
            font-weight: 300;
            display: inline-block;
            font-size: 25px;
            text-align: center;
            margin: 0 20px;
            width: 60%;
        }
    }

    #contact { 
        margin-top: 3vh;
        h1 {
            font-family: "LemonMilk";
            margin: 50px;
            margin-bottom: 20px;
            font-weight: 800;
            text-align: center;
            color: #222;
            font-size: 50px;
            line-height: 1em;
        }
        p {
            font-family: "Raleway", sans-serif;
            font-weight: 300;
            display: inline-block;
            font-size: 25px;
            margin: 0 20px;
            width: 60%;
        }
        iframe {
            margin-top: 4
            0px;
            height: 70vh;
            margin-bottom: 40px;
        }
    }
    #donate { 
        text-align: center;
        h1 {
            font-family: "LemonMilk";
            margin: 50px;
            margin-bottom: 20px;
            font-weight: 800;
            text-align: center;
            color: #222;
            font-size: 50px;
            line-height: 1em;
        }
        p {
            font-family: "Raleway", sans-serif;
            font-weight: 300;
            display: inline-block;
            margin: 0 20px 20px;
            font-size:25px;
            @media (min-width: 700px) {
                width: 80vw;
            }
        }
        .buttons {
            text-align: center;
        }

        button { 
            background-color: black;
            color: white;
            padding: 1.2%;
            margin: 2%;
            font-family: "LemonMilk";
            border-radius: 10px;
        }

        ul { 
            margin-left: 30vw;
            width: 35vw;
            text-align: left; 
            font-family: "LemonMilk"; 
            list-style-type: none;
        }
        li { 
            margin-top: 1%;
            font-size: 18px;
        }

    }
}

#team {
    text-align: center; 

    #about { 
        h1 { 
            font-family: "LemonMilk"; 
            margin: 1rem;
        }
        p { 
            font-family: "Raleway", sans-serif;
            padding: 1%;
            margin-left: 15vw;
            width: 70vw;
            font-size: 19px;
            font-weight: 350;
        }
    }
    #members { 
        h1, h2, h3 { 
            font-family: "LemonMilk"; 
        }
        p { 
            font-family: "Raleway", sans-serif;
        }
        #founders { 
        display: inline-flex;
        justify-content: space-evenly;
        .person { 
            padding: 4%;
            padding-top: 1%;
            margin-top: 1%;
            margin: 2%;
            width: 40vw;
            img { 
                border-radius: 50%;
                height: calc(.8*25vh);
                width: calc(.8*25vh);
         
            }
            p { 
                font-weight: 450;
                font-size: 17px;
            }
        }
        }
    }
}

#customPage { 
        text-align: center;
    
        background: white;
    
        #custom { 
            margin-top: 3vh;
            h1 {
                font-family: "LemonMilk";
                margin: 50px;
                margin-bottom: 20px;
                font-weight: 800;
                text-align: center;
                color: #222;
                font-size: 50px;
                line-height: 1em;
                color: rgb(205, 0, 0);
            }
            h3 {
                text-decoration: underline;
            }
            #examples { 
                margin: 4%;

                .carousel-control-prev-icon { 
                    filter: invert(1);
                }
                .carousel-control-next-icon { 
                    filter: invert(1);
                }
            }

            .testimonials { 
                margin-bottom: 3%;
            }

            p {
                font-family: "Raleway", sans-serif;
                font-weight: 300;
                display: inline-block;
                font-size: 25px;
                width: 100%;
                color: black;
            }
            iframe {
                margin-top: 4
                0px;
                height: 70vh;
                margin-bottom: 40px;
            }
            li { 
                list-style-type: none;
                font-family: "LemonMilk"; 
                font-size: 15px;
                margin-top: 1vh;
                color: rgb(206, 0, 0);
                align-items: left;
            }
        }
        
}