/* reset rule */

* {
    margin: 0; padding: 0; border: 0; box-sizing: border-box;
}

body {
    background-color: thistle;
    font-family: "Times New Roman", Times, serif;
}

#topSection {
    /* border: 8px solid gold; */
    outline: 8px solid green;
    min-height: 100px;
    outline: 8px gray;
    margin: 50px;
    display: flex;
    /* makes the block a flex parent */
}

#textBox {
    background-color: seashell;
    min-height: 100px; width: 50%;
    transform: translate(100px,75px);
    margin-left: -100px;
    border: 8px solid purple;
    /* margin: 10px; */
    text-align: center;
}

#photoBox {
    background-color: gold;
    min-height: 300px; width: 50%;
    background-image: url(../images/cuskeel2.jpg);
    background-size: cover;
    border: 5px solid whitesmoke;
    border-radius: 20px;
}

#textBox h1 {
    text-align: center; font-weight:normal;
    margin: 12px 0px;
    /* top bottom, left right */
}

#textBox h1 + p {
    text-align: center; color: darkmagenta;
    margin: 0px 0px 0px 0px;
    /* top right bottom left */
    font-size: 1.3em;
}
/* descendant selector and adjacent selector */

#textBox p{
    font-size: 0.9em; line-height: 1.8;
    padding: 1.4em; 
    text-align: left;
}

.buttonLink {
    margin: 8px;
    border: 2px solid gold; 
    padding: 15px 24px;
    /* display: block; */
    color:darkmagenta;
    background-color: goldenrod;
    text-decoration: none;
    border-radius: 10px;
}

.buttonLink:hover {
    background-color: thistle;
}

#bottomSection {
    /* border: solid 5px seashell; */
    margin: 50px;
    display: flex; /* makes ection into flexbox parent */
    flex-flow: row wrap; /* responsive layouts trick */
    justify-content: center; /* centers kids */
}

#bottomSection div {
    border: 4px solid darkmagenta;
    margin: 10px;
    min-height: 100px;
    flex: 1 0 auto; /* grow shrink basis */
    min-width: 100px;
    position: relative;
    background-color: seashell;
    text-align: center;
    padding: 8px 0px 0px 0px;
    max-width: 250px;
}

#bottomSection .buttonLink {
    display: block; width: 120px; height: 35px;
    padding: 8px;
    position: relative; bottom: 0px; left: 50%;
    transform: translateX(-50%);
    text-align: center; /* centers text in blocky anchors */
}

/* CALL TO ACTION is a button thing */