/*
*
*   NOTES
*   The base colors are adjusted versions of those on the main website
*   Some derivative colors were made with Material Design color tool, then adjusted after
*   Most CSS rules were generated by the Figma wireframe tool
*
*/

/* General */

html {
    color: #222222;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

a, a:hover {
    color: inherit;
    text-decoration: none;
}

/* Logos and Background Images */

.yd-logo {
    background: url("../images/yanke_designs.png");
}

.yd-logo-dark {
    background: url("../images/yanke-designs_dark-text.png");
}

.yd-splash {
    background-image: url("../images/better_background.png");
    background-attachment: fixed;
    background-position: center top;
}

/* Buttons */

.btn:hover, .btn:focus {
    box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.20) !important;
}

.yd-btn-circle {
    /* Combine with rounded-circle */
    border: none;
    width: 64px;
    min-width: 64px;
    height: 64px;
    min-height: 64px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.yd-btn-circle:focus {
    outline: none;
}

.yd-btn-rect, .yd-btn-rect-delete, .yd-btn-rect-disabled {
    font-family: 'Red Hat Display', sans-serif;
    font-size: 2rem;
    font-weight: 700;
}

.yd-btn-rect, .yd-btn-circle, .yd-btn-rect-delete, .yd-btn-rect-disabled {
    box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.20);
    text-align: center;
    transition: all 0.33s linear;
}

.yd-btn-rect, .yd-btn-circle {
    background-color: #FFCB08;
}
.yd-btn-rect-disabled {
    background-color: #BFBFBF;
}

.yd-btn-rect:hover, .yd-btn-circle:hover {
    background-color: #ffd94a;
}
.yd-btn-rect-delete:hover {
    background-color: #BFBFBF;
}

.yd-btn-rect-delete {
    background-color: #ff4a5f;
}

.yd-btn-rect-delete:hover {
    background-color: #de6f7c;
}

/* Cards */

.yd-card {
    background: #DDE3E9;
    filter: drop-shadow(0px 0px 10px #BFBFBF);
}

.yd-card-light {
    background: #E9ECEF;
    filter: drop-shadow(0px 0px 10px rgba(154, 154, 154, 0.33));
}

.yd-card:hover {
    background: #d0d5d9;
}

.yd-card-light:hover {
    background: #dde0e5;
}

.yd-card, .yd-card-light {
    transition: background 0.27s linear;
}

.yd-card-img {
    width: auto;
    height: 10rem;
}
.card-img-top {
    width: 100%;

}
/* Backgrounds */
.yd-bg {
    background: #DDE3E9;
}

.yd-bg-light {
    background: #E9ECEF;
}

.yd-bg-dark {
    background: #485563
}

.yd-bg-jumbotron {
    background: rgba(60, 90, 120, 0.62);
    box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.33);
}

/* Shadows */

.yd-shadow {
    filter: drop-shadow(0px 0px 10px #BFBFBF);
}

.yd-shadow-light {
    filter: drop-shadow(0px 0px 10px rgba(154, 154, 154, 0.33));
}

/* Icons */

.yd-fa-icon {
    font-family: 'Font Awesome 5 Free';
    font-size: 36px;
    font-weight: 900;
    color: initial;
}

.yd-fa-icon-lg {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 7rem;
    color: initial;
}

.yd-color-accent {
    color: #FFCB08;
}

/* Text */

.yd-txt {
    font-family: 'Red Hat Text', sans-serif;
    font-size: 1.66rem;
}

.yd-txt-sm {
    font-family: 'Red Hat Text', sans-serif;
    font-size: 1.3rem;
}

.yd-txt-heading {
    font-family: 'Red Hat Display', sans-serif;
    font-size: 3rem;
    font-weight: 700;
}

.yd-txt-heading-sm {
    font-family: 'Red Hat Display', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    font-style: normal;
}

.yd-txt-category {
    font-family: 'Red Hat Display', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    font-style: normal;
}

.yd-txt-footer {
    font-family: 'Red Hat Text', sans-serif;
    font-size: 1.5rem;
    color: #FFFFFF;
}

/* Links */
.yd-link, .yd-link-light {
    transition: all 0.25s linear;
}

.yd-link-underline, .yd-link-underline:hover {
    text-decoration: underline !important;
}

.yd-link:hover {
    filter: brightness(3.75);
}

.yd-link-light:hover {
    filter: brightness(0.7);
}

/* Upload buttons */
.upload-btn {
    padding: 0.175rem 0.75rem;
    padding-left: 0.175rem;
}

/*Info Page*/
.socials-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-right: auto;
    margin-left: auto;
}

.social-items {
    margin-right: auto;
    margin-left: auto;
}

.social-items-icons {
    display: flex;
    font-size: 1.5em;
    margin-right: auto;
    margin-left: auto;
    justify-content: space-evenly;
    width: 100%;
    flex-wrap: wrap;
}

.socials-container ul {
    list-style-type: none;
    margin-right: auto;
    margin-left: auto;
    padding: 0px;
}
/*End Info Page*/