/*
@font-face {
    font-family: 'bbfont';
    src: local("fonts/fa-regular-400.woff") format('woff');
}

@font-face {
    font-family: "Chubby";
    src: url("https://www.bloombusters.com/fonts/CHUBBY.woff") format("woff"), url("https://www.bloombusters.com/fonts/CHUBBY.TTF") format("truetype");
    font-weight: 300 800;
    font-style: normal;
}
    background-color: #332B00;
*/
@import url('https://fonts.googleapis.com/css2?family=Bubblegum+Sans&display=swap');
@font-face {
    font-family: 'ChubbyCheeks';
    src: url('fonts/ChubbyCheeksRegular.woff2') format('woff2'),
        url('fonts/ChubbyCheeksRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
/*    font-display: swap; */
}

body {
    background-image: url('images/grnd02.jpg');
    background-repeat: no-repeat;
	background-size: contain; 
	background-position: top center;
	background-attachment: fixed;
    background-color: #308b00;
	font-family: 'Bubblegum Sans', cursive;
    text-align: center;
    color: white;
    text-shadow: 3px 3px 5px black;
}

nav {
    font-size: 2.6vw;
/*  position: fixed;
    width: 90%;
    margin-right: 2em; */
}

ol {
    /* width: 100%; */
    display: flex;
    flex-flow: row wrap;
    flex-direction: row;
    justify-content: center;
    column-gap: 2%;
}

li {
    display: block;
    color: white;
}

h1 {
    margin: 3% 3%;
    font-size: 2vw;
    float: left;
    padding-left: 3%;
}

.basicnav:link, .basicnav:visited {
    background-color: #332B00;
    color: white;
    padding: 3% 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border: 3px solid white;
    border-radius: 12px;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
}

.basicnav:hover, .basicnav:active {
    background-color: red;
    transform: scale(1.15);
}

/* BASIC STYLES */

.titleimg {
    display: block;
    width: 40%;
    margin-left: auto;
    margin-right: auto;
}

@keyframes title_anim {
    0%   {transform: rotate(-20deg) scale(0.95);}
    100% {transform: rotate(-10deg) scale(1.05);}
}

.titlepic {
    margin-bottom: -4em;
    transform: rotate(-18deg);
    width: 50%;
    animation-name: title_anim;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

.descpar {
    font-size: 2.3vw;
    width: 80%;
    margin: auto;
}

.testdiv {
/*    font-size: clamp(2rem, 4vw + 1rem, 3rem); */
    font-size: 3.4vw;
    flex-grow: 0;
    width: 30%;
    text-align: right;
    color: yellow;
}

.container {
    display: flex;
    flex-direction: row;
    flex-flow: row wrap;
    align-items: flex-end;
    justify-content: center;
    column-gap: 10px;
}

.teamcontainer {
    display: flex;
    flex-direction: row;
    flex-flow: row wrap;
    align-items: flex-end;
    justify-content: center;
    column-gap: 10px;
}

.teamdiv {
    width: 15%;
    margin: 10px;
    text-align: center;
}

.teamimg {
    width: 100%;
    border-radius: 12px;
    display: block;
}

.basicimg {
    width: 100%;
}

.sectitle {
    font-size: 3vw;
    color: yellow;
}

.container_contact {
    display: flex;
    flex-direction: column;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
}

.contact_div {
    font-size: 2vw;
    flex-grow: 0;
    width: 60%;
    text-align: center;
}

.ubrothers_div {
    width: 40%;
}

.cpright {
    font-size: 3.0vw;
    margin-block-start: 0%;
    margin-block-end: 0%;
}

.emaillink {
    font-size: 3.0vw;
    margin-block-start: 0%;
    margin-block-end: 2%;
}

/* ANIMATED FEATURES */

@keyframes zoom_in_anim {
    0%   {transform: scale(0.05);}
    100% {transform: scale(1.0);}
}

.zoominanim {
    animation-name: zoom_in_anim;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

.featstitle {
    font-size: 2.0vw;
    flex-grow: 0;
    color: yellow;
}

.featstext {
    font-size: 1.8vw;
    flex-grow: 0;
}

.feats_mid {
    width: 30%;
}

.feats_left {
    width: 30%;
    text-align: right;
}

.feats_right {
    width: 30%;
    text-align: left;
}

/* VIDEO */

.vid_border {
    position: relative;
    height: 50%;
    width: 80%;
    border: 5px solid black;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    display: block;
    object-fit: contain;
}

.vid_content {
    width: 100%;
    height: 100%;
    display: block;
}

/* SCREENSHOT SLIDESHOW */

.slideshow-container {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    border: 5px solid black;
}

.mySlides {
    width: auto;
    height: auto;
    display: none;
}

.slideimg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ANIMATED HIDING MONSTERS */

.mmimg_base {
    display: block;
    position: fixed;
    animation-fill-mode: forwards;
    animation-iteration-count: 2;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

@keyframes mmimg1_anim {
    0%   {transform: translateX(50px);}
    66% {transform: translateX(0px);}
    100% {transform: translateX(0px);}
}

.mmimg1 {
    top: 0px;
    right: 0px;
    animation-name: mmimg1_anim;
    animation-duration: 1s;
}

@keyframes mmimg2_anim {
    0%   {transform: translateY(-70px);}
    58% {transform: translateY(0px);}
    100% {transform: translateY(0px);}
}

.mmimg2 {
    top: 0px;
    left: 0px;
    animation-name: mmimg2_anim;
    animation-duration: 0.7s;
}

@keyframes mmimg3_anim {
    0%   {transform: translateY(140px) translateX(-100px);}
    45% {transform: translateY(0px) translateX(0px);}
    100% {transform: translateY(0px) translateX(0px);}
}

.mmimg3 {
    bottom: 0px;
    left: 0px;
    animation-name: mmimg3_anim;
    animation-duration: 0.9s;
}

@keyframes mmimg4_anim {
    0%   {transform: translateY(140px) translateX(100px);}
    54% {transform: translateY(0px) translateX(0px);}
    100% {transform: translateY(0px) translateX(0px);}
}

.mmimg4 {
    bottom: 0px;
    right: 0px;
    animation-name: mmimg4_anim;
    animation-duration: 0.8s;
}

@keyframes mmimg5_anim {
    0%   {transform: translateX(-100px);}
    65% {transform: translateX(0px);}
    100% {transform: translateX(0px);}
}

.mmimg5 {
    top: 50%;
    left: 0px;
    animation-name: mmimg5_anim;
    animation-duration: 0.77s;
}

.mmimg6 {
    top: 30%;
    right: 0px;
    animation-name: mmimg1_anim;
    animation-duration: 0.7s;
}

@keyframes mmimg7_anim {
    0%   {transform: translateY(150px);}
    60% {transform: translateY(0px);}
    100% {transform: translateY(0px);}
}

.mmimg7 {
    bottom: 0px;
    left: 20%;
    animation-name: mmimg7_anim;
    animation-duration: 0.83s;
}