/* Google Fonts Import */
/* Raleway for headings, Cabin for standard text */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&display=swap');

* {
    padding: 0;
    margin: 0;
}

body {
    background-color: #FAF9F9;
    /* pushes any content to display below the navbar */
    margin-top: 70px;
}

/******************************************************************************* Navbar*/
.navbar {
    padding: 0;
}

.navbar-colour {
    background-color: #06585D;
}

/* Override bootstrap's default hover, focus, active and show styling */
.navbar-text,
.nav-link:focus,
.nav-link:hover,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: #FAF9F9;
}

/* Override bootstrap's dropdown nav link active class */
.dropdown-item.active,
.dropdown-item:active {
    color: #181720;
    background-color: #5AAFC2;
}

.heading {
    font-family: Raleway, sans-serif;
    font-weight: 600;
}

.paragraph {
    font-family: Cabin, sans-serif;
    font-size: 1.2rem;
}

.btn-text {
    font-family: Raleway, sans-serif;
}

/* Changes the colour of the icon supplied by boostrap */
/* Colour is changed to #FAF9F9 using rgba format */
/* This overrides the default colour set by bootstrap in the svg */
/* Code adapted from https://stackoverflow.com/questions/47122852/change-color-of-svg-background-image-bootstrap-4-carousel */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(250, 249, 249, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.btn-colour {
    background-color: #5AAFC2;
    color: #181720;
}

/* Specify own hover colours when used with buttons */
.btn-colour:hover {
    background-color: #181720;
    color: #FAF9F9;
}

.btn-margin {
    margin: 1rem 0;
}

/******************************************************************************* Footer */

.footer {
    background-color: #06585D;
    color: #FAF9F9;
}

/* style icons to be white colour and make bigger */
.social-links i {
    color: #FAF9F9;
    width: 32px;
    height: 32px;
    margin: 0;
    font-size: 2rem;
}

.social-links li {
    padding: 0 3% 1%;
}

/******************************************************************************* Sign In Page */

.auth-headings {
    padding-top: 1rem;
}

/******************************************************************************* Profile Page */

/* Add breathing room on the left of the text in each profile section */
.profile-text {
    padding-left: 5px;
}

/* Custom padding for email visibility card */
#email-vis-card {
    padding: 3px 5px;
    margin-bottom: 5px;
}

/* Hide the asterisk on the profile pic field */
.asteriskField {
    display: none;
}

/* Hides the 'Currently' field which displays the pic name */
/* As the pic name is not displaying due to using urls */
/* #div_id_profile_picture > label + div {
    display: none;
} */

/******************************************************************************* Detailed Post Page */
/* Make the weight of the heading bigger for more distinction */
.post-heading {
    font-weight: 600;
}

/* Hides the label from the comment form */
#comment-form label {
    display: none;
}

/******************************************************************************* Create Post Page */
/* Change colour of the input field that displays the name
to override the default 'disabled' styling.
As it's originally a text field but users should not be able to interact with it */
#image-name {
    background-color: white;
}

/* Make background of editor white to match other fields in post form */
.ql-editor {
    background-color: white;
}