styles.css

/* my Disney Palette picked from the background image
CSS HEX */
:root{

--dark-slate-blue: #393E8F;
--upsdell-red: #B12228;
--crayolas-orange-yellow: #F3CC64;
--medium-champagne:#FEECAE;
--oxford-blue: #12194A;
}

/*
Disney website 50th anniversary banner gradient colors
linear-gradient(95deg, #5c5c8a 3%, #9a6e8d 35%, #bc865c 65%, #7f847b 85%, #5c5c8a 96%)
*/

body{
    text-align: center;
    font-family: 'Happy Monkey', cursive;
    color: white;
    margin: 0px;
}
#hero{
    /*top section picture and titles*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;

    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("https://www.disneyfoodblog.com/wp-content/uploads/2020/12/2020-WDW-Entrance-Sign-Gateway-Construction-Painting-Completed-2.jpg"),linear-gradient(95deg, #5c5c8a 3%, #9a6e8d 35%, #bc865c 65%, #7f847b 85%, #5c5c8a 96%);

}
.hero-title{
    margin: 30px;
    background: var(--dark-slate-blue);
    padding: 4px 40px;
    border-radius: 14px;
}
.hero-subtitle{
    margin: 100px 0 40px 0;
    background: var(--crayolas-orange-yellow);
    padding: 4px 12px;
    border-radius: 14px;
}

#activities{
   /*middle section pictures of activities with descriptions
   need this so that a background color shows beyond the 
   box constraining the activities*/
    background: var(--medium-champagne);
}
.activities-box{
    /*this box constrains the activity columns to match
    the width of the hero section*/
    display: flex;
    justify-content: space-around;
    align-items: start;
/*keep same width as banner picture*/
    width: 900px;
    margin:auto;
    padding: 60px 0px;
    background: var(--medium-champagne);
    color: var(--oxford-blue);
}
.activity{
    /*each activity picture and description section*/
    width: 200px;
}
.activity-img{
    /*individual activity image designed to be in a round circle*/
    border-radius: 50%;
    width: 150px;
}

#yourguide{
    /*displays one or more 'card's introducing people*/
    padding: 60px 0px;
    background-color: whitesmoke;
}
.guide-card{
    /* creates the framing 'card' on which the guide contents sits*/
    width: 425px;
    margin: 30px  auto;
    padding: 15px;

    display: flex;/*allows the img and text to sit side by side*/
    justify-content: space-around;

    background: var(--dark-slate-blue);
    border-bottom: 10px solid var(--upsdell-red);
    border-radius: 6px;
}
.guide-img{
    /*the guide picture*/
    width: 180px;
    height: min-content;
    border-radius: 6px;
    margin: 25px 15px 25px 0px;

}
.guideinfo{
    /*the guide's info and descriptive text*/
    display: flex;
    flex-direction: column;
    width: 300px;
}

#bonus{
    color:var(--oxford-blue);
    background:whitesmoke;
}
.bonus-banner{
    background-image: linear-gradient(95deg, #5c5c8a 3%, #9a6e8d 35%, #bc865c 65%, #7f847b 85%, #5c5c8a 96%)    ;
    height: 75px;
}
.bonus-banner h1{
    margin: auto 0px;
    padding: 20px;
    text-shadow: 0 0 3px white;
}
.bonus-info{
    width: 500px;
    margin: auto;
}

#before-after-img{
    background: url("images/before-castle.jpg");
    height: 745px;
    margin: 0 auto; /*centers the img with the larger wrapper */
    padding-bottom: 30px;
    width: 555px;
    border: 3px dashed var(--dark-slate-blue);
    background-position: center;
    background-repeat: no-repeat;
}
#before-after-img:hover{
    background: url("images/after-castle.jpg");
    height: 745px;
    background-position: center;
    background-repeat: no-repeat;
}