:root {
    --offwhite: #FEFDFD;
    --cornell-red: #B41119;
    --dark-red: #8B0000;
    --lavender-blush: #F7E8E8;
    --tea-rose: #F0CFD0;
    --white: #FFFFFF; 
    --gunmetal: #2E3138;
    --rosy-brown: #CA907E;
    --background: #F5F5DCBA;
    --grey: #7A7D7D;
    --light-grey: #CCCCCC;
    --black: #000000; 
}

.content {
    flex: 1;
    /* Take up the available space */
}

footer {
    font-size: 12px;
    font-size: 0.75rem;
    margin-top: auto;
    min-height: 32px;
    min-height: 2rem;
    margin-bottom: 32px;
    margin-bottom: 0.75rem;
    color: var(--black);
}

.btn:focus,
.btn:active,
a:focus,
a:visited, .accordion-button:focus {
  outline: none !important;
  box-shadow: none;
}

/* Pages */
section#home {
    display: flex;
    flex-direction: column;
}

header.masthead {
    padding-top: 10rem;
    padding-bottom: calc(10rem - 72px);
    background-image: url("../img/bg-masthead.png");
    background-position: contain;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
    min-height: 100%;
    filter: blur(6px);
    transition-duration: 2s;
}

header.masthead:hover {
    opacity: 0.9;
    filter: blur(0px);
}

header.masthead h1 {
    font-size: 2.25rem;
}

header.masthead {
    height: 100vh;
    min-height: 40rem;
    padding-top: 72px;
    padding-bottom: 0;
}

header.masthead p {
    font-size: 1.15rem;
}

header.masthead h1 {
    font-size: 3rem;
}

@media (min-width: 1200px) {
    header.masthead h1 {
        font-size: 3.5rem;
    }
}

.btn-outline-danger {
    color: var(--cornell-red);
    border-color: var(--cornell-red);
}

.btn-outline-danger:hover {
    color: var(--offwhite);
    background-color: var(--cornell-red);
}

#card-landing {
    margin-top:-40rem;
    z-index: 10;
    opacity: 1 !important;
}

.card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: rgba(255, 255, 255, 0.8);
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
}

body {
    background-color: var(--white);
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

#sidenav {
    color: black;
    padding-bottom: 5rem;
    /*height: 100vh;*/
    background-color: var(--white);
}

#content {
    color: black;
    background-color: var(--offwhite);
}

#main {
    background-color: var(--offwhite);
    border-radius: 20px 20px 0 20px;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important;
}

#user-profile {
    border-radius: 50%;
    -webkit-box-shadow: 1px 2px 15px 0px rgba(0,0,0,0.33);
    -moz-box-shadow: 1px 2px 15px 0px rgba(0,0,0,0.33);
    box-shadow: 1px 2px 15px 0px rgba(0,0,0,0.33);
}

#user-name {
    color: var(--cornell-red);
}

.sidenav-btns {
    background-color: var(--grey);
    color: var(--offwhite);
    border-radius: 20px !important;
    margin-bottom: 18px;
    -webkit-box-shadow: 1px 2px 15px 0px rgba(0,0,0,0.33);
    -moz-box-shadow: 1px 2px 15px 0px rgba(0,0,0,0.33);
    box-shadow: 1px 2px 15px 0px rgba(0,0,0,0.33);
}

.sidenav-btns:hover, .sidenav-btns.active {
    background-color: var(--cornell-red);
    color: var(--offwhite);
}

.dash-btns {
    margin-left: 12px;
    height: 100px;
    width: 100px;
    font-size: 16px;
    color: var(--rosy-brown);
    background-color: var(--dark-red);
}

.dash-btns:hover {
    background-color: var(--rosy-brown);
    color: var(--dark-red);
}

#dash-group a {
    padding-top: 25px;
    margin-bottom: 24px;
}

#date {
    color: var(--grey);
}

.divider {
    color: var(--cornell-red);
}

.sect-hdr {
    color: var(--grey);
}

.sect-sub-hdr {
    color: var(--cornell-red);
    margin-top: -18px;
}

.bshadow {
    -webkit-box-shadow: 0 0 5px 0px rgba(0,0,0,0.33);
    -moz-box-shadow: 0 0 5px 0px rgba(0,0,0,0.33);
    box-shadow: 0 0 5px 0px rgba(0,0,0,0.33);
}
/* Profile */ 
#profile-form-left, #website-form {
    background-color: var(--bs-light);
    border-radius: 20px;
}

#profile-form-right {
    background-color: var(--dark-red);
    border-radius: 20px;
}

#user-form-right {
    background-color: var(--light-grey);
    border-radius: 20px;
}

#profile-image {
    width: 300px;
    height: auto;
    border-radius: 15px;
}

#prof-card-name {
    color: var(--lavender-blush);
}

#prof-card-role {
    color: var(--rosy-brown);
}

#prof-card-login {
    color: var(--tea-rose);
    font-style: italic;
}

.accordion-header {
    background-color: var(--bs-light);
}

.accordion-button.collapsed {
    background-color: var(--light-grey);
    color: var(--black);
    font-weight: bold;
}

.accordion-button:not(.collapsed){
    background-color: var(--rosy-brown);
    color: var(--dark-red);
    font-weight: bold;
}

/* Editor */
textarea {
    height: auto;
}

.form-text {
    margin-top: -6px;
    margin-bottom: 12px;
    color: var(--dark-red);
}

.img-form {
    border-radius: 5px;
}

.form-label {
    font-weight: bold;
    margin-top: 12px;
    margin-bottom: 3px;
    color: var(--cornell-red);
}

/* Users */ 
.user-delete {
    font-size: 0.7rem !important;
    padding: 0.2rem 0.5rem;
}

.user-delete:hover {
    background-color: var(--cornell-red);
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    .dash-btns {
        margin-left: 12px;
        height: 150px;
        width: 150px;
        font-size: 22px;
    }
    #dash-group a {
        padding-top: 45px;
        margin-bottom: 24px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .dash-btns {
        margin-left: 12px;
        height: 200px;
        width: 200px;
        font-size: 22px;
    }
    #dash-group a {
        padding-top: 75px;
        margin-bottom: 24px;
    }
    #sidenav {
        height: 100vh;
        padding-bottom: 0;
    }
    section#home {
        min-height: 100vh;
    }
    #main {
        border-radius: 20px 0 0 20px;
    }
}