@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500i,900,900i&display=swap');
@import url('https://fonts.googleapis.com/css?family=Dancing+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barrio&family=Finger+Paint&display=swap');

:root {
    --avocado: hsla(83, 66%, 30%, 1);
    --avocado-2: hsla(81, 74%, 28%, 1);
    --avocado-3: hsla(81, 72%, 25%, 1);
    --apple-green: hsla(82, 52%, 45%, 1);
    --apple-green_trans: hsla(82, 52%, 45%, .5);
    --avocado-4: hsla(84, 58%, 34%, 1);
    --apple-green-2: hsla(81, 59%, 40%, 1);
    --avocado-5: hsla(79, 86%, 26%, 1);
    --asparagus: hsla(83, 59%, 38%, 1);
    --asparagus-2: hsla(86, 49%, 41%, 1);
    --avocado-6: hsla(81, 65%, 36%, 1);
}
body {
    width: 100%;
    height: 100%;
    /*background: url("../images/green_bg_paster.jpeg") no-repeat center center fixed;*/
    background: url("../images/green_brick_bg.jpeg") no-repeat center center fixed;
    background-color: transparent !important;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
    z-index: 2;
}

.text_montserrat{
    font-family: Montserrat;
}

.text_dancing{
    font-family: "Dancing Script";
}

.text_finger{
    font-family: "Finger Paint";
}

.navbar {
    /*background-color: var(--verdigris);*/
    background-color: var(--apple-green);
}

#about-section{
    background-color: var(--razzle-dazzle-rose_trans);
}

#media-section{
    background-color: var(--apple-green);
}

.card_background{
    background-color: var(--apple-green_trans);
}

.trans_bg{
    background-color: transparent; !important;
}

.header_bg{
    background-color: transparent;
    border-radius: 10px;
    transform: rotate(-10deg);
}

.container-audio {
    width: 66%;
    height: auto;
    padding: 20px;
    border-radius: 5px;
    background-color: var(--avocado);
    color: #444;
    margin: 20px auto;
    overflow: hidden;
}