@font-face { font-family: "f1";	src: url("data/Involve-Regular.otf");}
@font-face { font-family: "f2";	src: url("data/LTRemark-Regular.otf");}
@font-face { font-family: "f3";	src: url("data/LTSuperior-ExtraLight.otf");}

@keyframes zoomOut {
    0% {
        opacity: 0;
        scale: 0%;
    }
    25% {
        scale: 100%;
    }
    100% {

        opacity: 1;
        scale: 100%;
    }
}

@keyframes logoZoomOut {
    0% {
        opacity: 0;
        scale: 0%;
    }
    100% {

        opacity: 1;
        scale: 100%;
    }
}

button, input::file-selector-button, #container-preview a {
  background: #42bdff;
  border: 1px solid #4291ff;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: nunito,roboto,proxima-nova,"proxima nova",sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 16px;
  min-height: 30px;
  outline: 0;
  padding: 2px 14px;
  text-align: center;
  text-rendering: geometricprecision;
  text-transform: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  text-decoration: none !important;
}

button:hover,
button:active,
input::file-selector-button:hover,
input::file-selector-button:active,
#container-preview a:hover,
#container-preview a:active
{
  background-color: initial;
  background-position: 0 0;
  color: #4291ff;
}

button:active {
  opacity: .5;
}


*{font-family: "f3"!important;}

#container-logo {
  margin: 0 auto;
  display: block;
  position: relative;
  max-height: 80px;
  overflow: clip;
  box-shadow: 0px 50px 100px rgb(0, 38, 58);
  margin-bottom: 10px;
}

#container-logo a {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  max-height: inherit;
}

#container-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  margin: 0 auto;
  max-height: inherit;
  animation: logoZoomOut 0.75s;
  transform-origin: center bottom;
}

body {background: #001b2d; margin: 0 auto;}

.block{background-color: #fff; display: flow-root; position: relative; padding: 10px; border-radius: 10px; max-width: 1200px; margin: 0 auto; margin-bottom: 10px; box-shadow: -5px 5px 0px rgba(0, 0, 0, 0.2);overflow: clip; resize: none; text-align: center; }

h2 {
  text-align: center;
  padding: 10px;
  background-color: rgb(0, 124, 206);
  border-radius: 10px;
  box-shadow: -2px 3px 2px rgba(0, 0, 0, 0.36);
  /*color: rgb(0, 13, 85);*/
  color: rgb(255, 255, 255);
  margin-top: 0px;
}

#container-upload form {
  margin: 0 auto;
  position: relative;
  display: block;
  width: fit-content;
  background-color: rgb(235, 241, 255);
  padding: 5px;
  border-radius: 10px;
  color: rgb(0, 124, 206);
}

#embedCodeTextarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgb(0, 135, 255);
  overflow: clip;
  background-color: rgba(0, 76, 255, 0.08);
  box-shadow: inset -2px 2px 3px rgba(0, 11, 15, 0.11);
  color: rgb(0, 72, 119);
  text-align: center;
  box-sizing: border-box;
  padding: 5px 5px 0 5px;
}

#copyEmbedCode {float: right;}

#container-preview iframe, #container-preview video {  margin: 0 auto;  position: relative;  display: block; border-radius: 10px; width: 100%;  background-color: rgb(0, 0, 0);}
#container-preview iframe video {width: 100%!important;}
#container-preview a {
  width: fit-content;
  float: right;
  line-height: 25px !important;
}


#container-message {
    /*opacity: 0;
    scale: 0%;*/
    animation: zoomOut 1s; 
    transform-origin: center left;
    color: rgb(0, 124, 206);
}

.one-line {  display: flex;}
.one-line > * {  flex: 1 0;  margin: 2px;}
#copyUrl, #play-newtab {  max-width: fit-content;}
#urlInput {
  border-radius: 10px;
  border: 1px solid rgb(0, 135, 255);
  overflow: clip;
  background-color: rgba(0, 76, 255, 0.08);
  box-shadow: inset -2px 2px 3px rgba(0, 11, 15, 0.11);
  color: rgb(0, 72, 119);
  text-align: center;
  box-sizing: border-box;
}

.footer.center.block {
  background-color: rgb(3, 59, 105);
  color: white;
}


@media screen and (orientation: portrait) {
#container-ads .ads h6 
{
  margin: 0px!important;
}

#container-ads .ads tr {
  display: flex;
  flex-wrap: wrap;
}
#container-ads .ads td {
  width: 72px;
  flex: 1 0 auto;
}

#container-ads .ads .scale {
  max-width: 50px;
}
}