/**
 * General CSS File
 *
 * This file contains the general styles for the Codehills Kickstarter theme. It includes
 * CSS variables, styles for the html and body elements, container styles, and global styles.
 *
 * @since 2.0.0
 * @package WordPress
 * @subpackage Codehills Kickstarter Theme
 */

/**************** General styles ******************** *
 *  1. CSS variables
 *  2. html, body
 *  3. Containers
 *  4. Global styles
****************************************************/

/***************** 1. CSS variables  ***************** */

:root {
    /* Fonts */
    --kickstarter-font-primary: "Poppins", sans-serif;
    --kickstarter-font-secondary: "Arial", sans-serif;

    /* Colors */
    --kickstarter-dark-blue: #003B5C;
    --kickstarter-green: #009B77;
    --kickstarter-pink: #EF4A81;
    --kickstarter-light-gray: #F8F8F8;
    --kickstarter-gray: #5F6567;
    --kickstarter-dark-gray: #1F242E;
    --kickstarter-border: #ddd;
    --kickstarter-nav: #7C7C7C;
}

/******************* 2. html, body ****************** */

html, body {
    background: #fff;
    overflow-x: hidden;
    min-height: 100vh;
}

/******************* 3. Containers ****************** */

.uk-container {
    max-width: 1230px;
    position: relative;
}

/***************** 4. Global styles ***************** */

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
a,
button,
.transition {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.transition-slow {
    -webkit-transition-duration: 1.5s;
    -moz-transition-duration: 1.5s;
    -o-transition-duration: 1.5s;
    transition-duration: 1.5s;
}
.no-transition {
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
}
*:focus {
    outline: none !important;
}

/**** 4. Misc ****/

/**** Preloader ****/

html.preloader-active::before {
    content: "";
    display: block;
    top: 50%;
    left: 50%;
    position: absolute;
    width: 50px;
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 3px;
    background: radial-gradient(farthest-side, var(--kickstarter-secondary-color) 95%, #0000) 50% 0/12px 12px no-repeat, radial-gradient(farthest-side, #0000 calc(100% - 5px), var(--kickstarter-secondary-color) calc(100% - 4px)) content-box;
    animation: preloader 2s infinite ;
    margin-top: -25px;
    margin-left: -25px;
    z-index: -1;
}
@keyframes preloader {
    to {
        transform: rotate(1turn)
    }
}

/**** Overwrite .uk-light ****/

.uk-light,
.uk-section-primary:not(.uk-preserve-color),
.uk-section-secondary:not(.uk-preserve-color),
.uk-tile-primary:not(.uk-preserve-color),
.uk-tile-secondary:not(.uk-preserve-color),
.uk-card-primary.uk-card-body,
.uk-card-primary > :not([class*="uk-card-media"]),
.uk-card-secondary.uk-card-body,
.uk-card-secondary > :not([class*="uk-card-media"]),
.uk-overlay-primary,
.uk-offcanvas-bar {
    color: rgba(255, 255, 255, 1);
}

/**** Background fixed overlay ****/

/* UI Properties */

.uk-background-fixed-overlay {
    background: var(--kickstarter-dark-gray) 0% 0% no-repeat padding-box;
    mix-blend-mode: multiply;
    opacity: 0.7;
    width: 100vw;
    left: 0;
    top: 0;
}

/**** Post and Pages WordPress default styling ****/

.alignright {
    float: right;
    margin: 0 0 1em 1em;
}
.alignleft {
    float: left;
    margin: 0 1em 1em 0;
}
.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}