/* Main CSS For the Website Pages */
* {
    margin: var(--ZeroOut);
    padding: var(--ZeroOut);
}

body {
    font-family: 'Dosis', sans-serif;
    /* background-image: url(/Images/MyFamily.png); */
    margin: var(--ZeroOut);
    padding: var(--ZeroOut);
    background-color: var(--MainBackGroundColor);
    animation: all 2s ease-in-out;
}

/* *** The Background ** VIDEOS  &&  ** IMAGES ** */


.theBackgroundVideo_01 {
    position: fixed;
    top: 0%;
    display: flex;
    justify-content: center;
    height: 100%;
    width: 100vw;
    z-index: -1;

}

/*  *** The Main Tags and Links  DEFAULT *** */

a {
    text-decoration: none;
    text-align: center;
    color: var(--color-White);
    cursor: pointer;
    transition: all ease-in-out 0.2s;
}

a:hover {
    color: var(--color-Green);
}

button .menu,
.btn {
    border: none;
    border-radius: var(--Size-002);
    font-family: 'Dosis', sans-serif;
    cursor: pointer;
    transition: all ease-in-out 0.5s;
}

button:hover,
.btn:hover {
    background-color: var(--Brand-Color-001);
    cursor: pointer;

}

.PlixBox-001 {
    position: relative;
    z-index: 1;
    margin-bottom: 50vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    height: fit-content;
    box-shadow: 5px 5px 5px green;
    background-color: black;
    width: 100%;
    flex-wrap: wrap;
    overflow: hidden;
}

/* The Main Styles for ALL Contact Boxes */
.PlixBox-001 h1 {
    position: relative;
    align-items: center;
    text-align: center;
    justify-content: center;
    margin-top: var(--Size-002);
    margin-bottom: var(--Size-004);
    margin-left: var(--Size-004);
    font-size: var(--Size-009);
    color: var(--Brand-Color-003);
    font-family: 'Bruno Ace SC', cursive;
    text-transform: uppercase;
}

.PlixBox-001 {

    align-items: center;
    text-align: center;
    justify-content: center;
    color: white;
    background-color: black;
}

.PlixBox-001 h2 {
    text-align: left;
    color: var(--Brand-Color-003);
    font-size: var(--Size-004);
    margin-bottom: var(--Size-002);
    font-family: 'Dosis', sans-serif;
    text-transform: uppercase;
}

@keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }


/* Mobile Use  950px */
@media screen and (max-width: 950px) {

    .theBackgroundVideo_01 {
        visibility: hidden;
        display: none;
    }

    .theMobMainBackground_01 {
        z-index: -1;
        position: fixed;
        width: 100vw;
        height: 100vh;
        background-image: url("https: //cdn.pixabay.com/photo/2016/08/31/17/02/blue-1634110_1280.png");
        background-size: cover;
        background-position: fixed;
        background-repeat: no-repeat;
    }

    /* MOBILE 
    The Main Styles for ALL Contact Boxes */
    .PlixBox-001 {
        margin-top: 50vh;
    }

    .PlixBox-001 h1 {
        font-size: var(--Size-006);
    }
}