:root {
    --rowan-brown: #5B1300;
    --rowan-gold: #FFCF44;
    --rowan-green: #007b4b;
    --rowan-red: #ab1010;
    --rowan-blue: #41b6e6;
    --rowan-dark: #0f1319;
    --rowan-light: white;
}

html,
body {
    height: 100%;
    /* make body height the full browser height */
}

body {
    background-image: url('jimmies.png');
    color: var(--rowan-brown);
}

nav {
    background-color: var(--rowan-gold);
}

p {
    font-weight: bold;
}


.container {
    max-width: 40em;
    width: 100%;
}

/* Style the container holding the two buttons */
#idpSelectPreferredIdPTile {
    display: flex;
    justify-content: center;
    gap: 1rem; /* space between buttons */
    flex-wrap: wrap; /* wrap on smaller screens */
    margin-top: 1rem;
}

/* Style each button container */
.IdPSelectPreferredIdPButton {
    flex: 1 1 45%; /* responsive width */
    max-width: 18rem;
}

/* Make the entire button look like a Bootstrap button */
.IdPSelectPreferredIdPButton a {
    display: block;
    padding: 0.8rem;
    /* Default button appearance */
    background-color: #f0f0f0; /* Light gray background */
    color: var(--rowan-brown);   /* Dark text for contrast */
    border: 1px solid #ccc;     /* Subtle border */
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    border-radius: 0.375rem;
    transition: all 0.3s ease; /* Transition all properties */
    height: 100%;
}

div.IdPSelectPreferredIdPImg
{
/* max-width: 95%; */
    height: 60px; /* We need the absolute height to force all buttons to the same size */
    margin: 2px;
}

div.IdPSelectPreferredIdPButton img
{
    display: block;    /* Block display to allow auto centring */
/* max-width:  114px;*/ /* Specify max to allow scaling, percent does work */
    width: auto;
    max-height: 55px;  /* Specify max to allow scaling, percent doesn't work */
    margin-top: 3px ;
    margin-bottom: 3px ;
    border: solid 0px #000000;  /* Strip any embellishments the brower may give us */
    margin-left: auto; /* Auto centring */
    margin-right: auto;  /* Auto centring */

}

/* --- HOVER EFFECTS --- */

/* Rowan Button Hover */
.IdPSelectPreferredIdPButton[title="Rowan University Single Sign-On"]:hover a {
    background-color: var(--rowan-gold);
    color: var(--rowan-brown);
    border-color: var(--rowan-brown);
}

/* Cooper Button Hover */
.IdPSelectPreferredIdPButton[title^="http://adfs.cooperhealth.edu/adfs"]:hover a {
    background-color: #660000; /* Rowan red is a little too similar to the logo */
    color: var(--rowan-light);
    border-color: var(--rowan-dark);
}


/* hide dropdown/search */
#idpSelectIdPEntryTile {
    display: none;
}

/* format header (choose affiliation) */
.IdPSelectTextDiv:first-child {
    flex-basis: 100%; /*Forces this element to a new line */
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 0.5rem;
    margin-bottom: 1rem !important;
    white-space: nowrap;
}