@import url("colors.css");
@import url("buttons.css");
@import url("cards.css");
@import url("fonts.css");
@import url("header.css");
@import url("footer.css");
@import url("notices.css");
@import url("select.css");


:root {
    --scrim-bg: rgba(255, 255, 255, .7);
    --content-pad-x: 16px;
    --max-content-width: 1260px;

    /* animation durations */
    --dur-std: 300ms;
    --dur-dec: 250ms;
    --dur-acc: 200ms;
    /* animation ease */
    --ease-std: cubic-bezier(0.2, 0, 0, 1);
    --ease-dec: cubic-bezier(0, 0, 0, 1);
    --ease-acc: cubic-bezier(0.3, 0, 1, 1);
    /* standard transition (transform) */
    --enter-screen: transform var(--dur-dec) var(--ease-dec);
    --exit-screen: transform var(--dur-dec) var(--ease-dec);

    /* shadows */
    --card-shadow: rgba(0, 0, 0, 0.08) 0px 2px 2px;
    --menu-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
    --top-bar-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
    --btn-shadow: rgba(0, 0, 0, 0.16) 0px 1px 2px;
    /* old shadow
    --e1-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
    */

    /* borders */
    --border: 1px solid var(--input-border-color); 
    --subtle-border: 1px solid var(--subtle-border-color);
    --divider: 1px solid var(--color-outline-variant);
}

@media (min-width: 556px) {
    :root {
        --content-pad-x: 24px;
    }
}

@media (min-width: 1366px) {
    :root {
        --content-pad-x: 0;
    }
}

*, *:before, *:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, hgroup, menu, nav, section, main {
  display: block;
}

html {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

body {
    width: 100%;
    min-height: 100%;
    font-family: "Poppins";
    font-weight: 400;
    line-height: 1.5; 
}

main {
    width: 100%;
    min-height: 100vh;
    background-color: var(--main-bg-color);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
li,
button,
strong {
    color: var(--text-color);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    line-height: 1.2em;
    padding-top: 20px;
    padding-bottom:10px;
}

h1 {
    padding-bottom: 40px;
    line-height: 1.2;
}

h2 {
    padding-top: 25px;
}

h4 {
    padding-bottom: 5px;
}

p { 
    column-count: 1;
    margin-bottom:10px;
    line-height: 1.35;
}

/* Prevents sub and sup affecting line-height in all browsers */
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

a {
    color: var(--blue);
    text-decoration: none;
    font-weight: bold;
}

ul {
    list-style-position: inside;
    padding-left:16px;
    margin:10px 0;
}

input[type=text],
input[type=email],
input[type=password],
input[type=number] {
    height: 48px;
    width: 100%;
    border: var(--border);
    border-radius: 8px;
    padding: 0 16px;
    background-color: white;
    font-family: "Poppins";
    font-size: 14px;
    font-weight: 500;
}

input[type=text]::placeholder,
input[type=text]::moz-placeholder,
input[type=email]::placeholder,
input[type=email]::moz-placeholder,
input[type=password]::placeholder, 
input[type=password]::moz-placeholder {
    font-family: "Poppins";
    color: var(--grey-text-color);
}

.divider {
    background-color: var(--border-color);
    width: 100%;
    height: 1px;
}

[x-cloak] {
    display: none !important;
}

.visually-hidden {
    display: block;
    height: 1px;
    width: 1px;
    /* clip: (0 0 0 0); */
    clip-path: inset(50%);
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
}

.prevent-animation * {
    animation: none !important;
    transition: none !important;
}

.no-scroll {
    padding-right: var(--scrollbar-hide-padding);
    overflow-y: hidden;
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding: 0 var(--content-pad-x) 46px var(--content-pad-x);
    max-width: var(--max-content-width);
}

.centered-content {
    max-width: var(--max-content-width);
    width: 100%;
    min-height: 100%;
    margin: 0 auto;
    padding-left: var(--content-pad-x);
    padding-right: var(--content-pad-x);
}

@media (min-width: 1366px) {
    .centered-content {
        padding-left: 0;
        padding-right: 0;
    }
}

.blogpage {
    max-width: 800px;
    margin: auto;
}

.pageheading {
    text-align: center;
}

.pageheading h1 {
    color: white;
}

.group {
    padding-top: 40px;
}

.flex-container {
    display: flex;
}

.flex-container.col {
    flex-direction: column;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background-color: #eee;
}

::-webkit-scrollbar-thumb {
    background-color: var(--blue);
    border-radius: 8px;
}