@import url("colors.css");

:root {
    --coloraccent: #8b7a159c;
    --colorprimary: var(--colorgreen);;
    --colorprimarydark: #016d2e;
    --colorsecondary: var(--colorblue);
    --colorsecondarydark: var(--colorgray-dark);
    --colorbackground: var(--colorMatteBlack);
    --colorHover: var(--colorred);
    --coloraccentdark: rgb(26, 146, 201);

    --ff: "DM Sans", sans-serif;
    --h1: bold 54px/64px var(--ff);
    --h2: bold 48px/56px var(--ff);
    --h3: bold 40px/48px var(--ff);
    --h4: bold 32px/40px var(--ff);
    --h5: bold 24px/32px var(--ff);
    --h6: bold 16px/24px var(--ff);
    --h7: bold 12px/20px var(--ff);
    --links: bold 16px/24px var(--ff);
    --p: normal 16px/24px var(--ff);
    --p2: normal 14px/20px var(--ff);
    --p3: normal 12px/16px var(--ff);
    --p4: normal 10px/16px var(--ff);
    --p5: normal 8px/12px var(--ff);
    --p6: normal 6px/8px var(--ff);
    --p7: normal 4px/8px var(--ff);
    --p8: normal 2px/4px var(--ff);
    --subtext: 12px/20px var(--ff);
    --transition: 0.3s ease-in-out;
    --shadow: #00000030 0px 0px 10px 0px;
    --shadowdark: #00000030 0px 5px 10px 5px;
    --gradient-1: linear-gradient(145deg, hsl(350deg 100% 93%), hsl(47deg 100% 87%) 40%, hsl(47deg 100% 87%) 60%, hsl(47deg 100% 53%));
    --gradient-2: linear-gradient(135deg, hsl(47deg 100% 53%), hsl(350deg 100% 73%));
    --gradient-3: linear-gradient(145deg, hsl(47deg 100% 87%), var(--colors-black--100) 30%);
    --gradient-4: linear-gradient(180deg, transparent 30%, var(--colors-black--300));
    --gradient-webflow: linear-gradient(145deg, hsl(216deg 92% 52%), hsl(216deg 92% 92%) 50%);
    --btn-gradient: radial-gradient(100% 100% at 100% 0%, rgba(255, 255, 255, 0.37) 0%, rgba(255, 255, 255, 0) 100%);
}

header {
    background: var(--colorbackground);
    position: sticky;
    top: 0;
    color: var(--colorwhite);
    font: var(--h1);
    text-align: center;
    padding: 20px 0px;
}

body {
    background: var(--colorbackground);
}

h1 {
    text-align: center;
    /* background: var(--colorbackground);*/
    font: var(--h1);
    color: var(--colorprimary);
    margin: 40px auto 20px auto;
    padding: 0px 20px;
}

h2 {
    font: var(--h2);
    color: var(--colorsecondary);
    text-align: left;
    margin: 0;
}

h3 {
    font: var(--h3);
    color: var(--colorsecondary);
    text-align: left;
    margin: 0;
}

div {
    font: var(--p);
    color: var(--colorwhite);
    text-align: left;
    margin: 0 auto;
    padding: 0px 20px;
}

div.header {
    padding: 20px 0px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-width: 100%;
    min-height: 100px;
}

div.header h1 {
    font: var(--h1);
    color: var(--colorprimary);
    margin: 0;
}

div.logo {
    display: flex;
    position: absolute;
    justify-content: center;
    left: 0;
    width: 50;
    height: 50;
}

div.nav_bar {
    justify-content: center;
    align-items: center;
    text-align: center;
    min-width: 100px;
    min-height: 50px;
}

div.main {
    margin: 20px auto 0px auto;
    max-width: 1080px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*margin: 0 auto;*/
    gap: 20px;
    flex-wrap: wrap;
}

div.map {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-width: 100%;
    min-height: 500px;
    border: #000000 3px solid;
}

div.footer {
    font: var(--h7);
    text-align: center;
    margin: 50px 40px;
}

div.card {
    float: left;
    width: 100%;
    align-items: left;
    justify-content: left;
    justify-items: left;
}

a {
    text-decoration: none;
    color: var(--colorwhite);
    font: var(--links);
    transition: var(--transition);
}

a:hover {
    color: var(--colorHover);
    text-decoration: underline;
}

ul {
    /*list-style: georgian inside url("https://cdn-icons-png.flaticon.com/512/265/265922.png");*/
    list-style: square;
    padding: 0;
    margin: 0;
}

li {
    color: var(--colorwhite);
    text-align: left;
    margin: 0 auto;
    padding: 0px 20px;
}

ul.no_style {
    list-style: none;
    padding: 0;
    margin: 0;
}

.container {
    z-index: 1;
    max-width: var(--spacing-layout--container-max-width);
    width: var(--spacing-layout--container-width);
    flex-flow: column;
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: relative;
}

.btn {
    display: inline-block;
    border: none;
    padding: 2px 12px;
    background-color: var(--colorsecondary);
    color: var(--colorwhite);
    border-radius: 5px;
}

.btn:hover {
    background-color: var(--colorHover);
    color:var(--colorblack);
    box-shadow: var(--shadowdark);
    transition: var(--transition);
}

.btn:outline {
    display: inline-block;
    width: 100%;
    border: 2px solid var(--coloraccent);
    text-align: center;
    padding: 12px 0px;
    background-color: var(--colorsecondary);
    color: var(--coloraccent);
    border-radius: 5px;
    font: var(--links);
}