/* ------------------------ COLOR VARIABLES AND FONTS ------------------------ */
:root {
  --frosted_mint: #e8fccf;
  --light_green: #96e072;
  --medium_jungle: #3da35d;
  --india_green: #3e8914;
  --black_forest: #134611;
}

@font-face {
  font-family: stack_sans_text;
  src: url(StackSansText-VariableFont_wght.ttf);
}


body {
  background-color: var(--frosted_mint);
  font-family: stack_sans_text;
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------- HTML AND BODY DESIGN -------------------------- */

/* ---- link color attributes ---- */
a {
  color: var(--india_green);
}

/* ---- emphasis ---- */
i {
  color: var(--black_forest);
}

mark {
  background-color: var(--india_green);
  color: var(--frosted_mint);
}

.india_green {
  color: var(--india_green);
}

hr {
    color: var(--frosted_mint);
}

/* ---- DIVS ---- */

.div1 {
    position: relative;
    background-color: var(--medium_jungle);
    filter: drop-shadow(8px 8px var(--black_forest));
    padding: 15px;
    width: 900px;
    border: 0px;
    margin: 50px 20px 20px 20px;
    float: left;
}

.div2 {
    position: relative;
    margin: 50px 20px 20px 20px;
    float: left;
}

.div_gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.div_gallery-item {
    margin: 5px;
    border: 2px solid var(--frosted_mint);
    width: 200px;
    background-color: var(--frosted_mint);
    filter: drop-shadow(4px 5px var(--black_forest));
}

.div_gallery-item:hover {
    cursor: pointer;
    border: 2px solid var(--black_forest);
    background-color: var(--black_forest);
    color: var(--black_forest);
    filter: drop-shadow(4px 5px var(--light_green));
}

.div_gallery-item img {
    width: 100%;
    height: auto;
}

.div_gallery-item-desc {
    padding: 15px;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    color: var(--black_forest);
}

.div_gallery-item-desc:hover {
    color: var(--frosted_mint);
}


/* ---- HEADING AND PARAGRAPH ---- */

p {
    color: var(--frosted_mint);
    font-size: 16px;
    font-optical-sizing: auto;
    margin: 0px;
    line-height: 120%;
}

h1 {
    color: var(--frosted_mint);
    font-size: 48px;
    font-weight: 700;
    font-optical-sizing: auto;
    line-height: 10%;
}

h2 {
    color: var(--frosted_mint);
    font-size: 24px;
    font-weight: 500;
    font-optical-sizing: auto;
}

.c {
    color: var(--frosted_mint);
    font-size: 12px;
}

/* ---- OTHER CLASSES ---- */
.links {
  padding: 5px;
  margin: 20px;
}

.previewcontainer {
  text-align: center;
}

.previewimg {
  padding: 3px;
}

.bulbax {
    filter: drop-shadow(15px 3px var(--frosted_mint));
    width: 400px;
}

.bulbax2 {
    filter: drop-shadow(15px 5px var(--frosted_mint));
    width: 400px;
    margin: 20px;
}

.button_round {
    background-color: var(--light_green);
    color: var(--black_forest);
    border: 0;
    filter: drop-shadow(4px 5px var(--black_forest));
    border-radius: 5px;
    padding: 7px;
    text-align: center;
    text-transform: lowercase;
    font-size: 15px;
    font-weight: bold;
}

.button_round:hover {
    background-color: var(--black_forest);
    color: var(--frosted_mint);
    fill: var(--frosted_mint);
    filter: drop-shadow(4px 5px var(--frosted_mint));
    cursor:pointer;
}

.icon {
    width: 20px;
    margin: 0px 0px -4px;
    fill: var(--black_forest)
}


.left {
    float: left;
    width: 50%;
}

.right {
    float: right;
    width: 50%;
}