/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 98vh;
  background: #FFD4B7;
  //background: linear-gradient(0deg, rgba(0,0,100,1) 0%, rgba(0,0,100,1) 100%);
  color: #;
  text-align: center;
  position: relative;
  padding-top: 2vh;
  font-family: 'Montserrat', sans-serif;
}

main { display: block; }

h1 { font-size: 2em; margin: 0.67em 0; }

hr { box-sizing: content-box; height: 0; overflow: visible; }

pre, code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }

a {
  position: relative;
  background-color: transparent;
  font-size: 3rem;
  color: #fff;
  transition: 0.2s all;
  z-index:5
}
a:hover { color: #fee8e3; }

b, strong { font-weight: bolder; }

small { font-size: 80%; }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub { bottom: -0.25em; }
sup { top: -0.5em; }

img { border-style: none; }

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  cursor: pointer;
}

button { padding: 10px 20px; }

button, input { overflow: visible; }

button, select { text-transform: none; }

button, [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset { padding: 0.35em 0.75em 0.625em; }

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress { vertical-align: baseline; }

textarea { 
  overflow: auto;
  width: 30%;
  background: rgba(255,255,255,.2);
  padding: 1%;
  border: 1px solid #8b4817;
  border-radius: 4px;
  position: relative;
  z-index: 2;
}

textarea::placeholder { color:black; }

[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }

::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }

details { display: block; }
summary { display: list-item; }
template { display: none; }
[hidden] { display: none; }

/* Fonts */
@font-face {
  font-family: 'Grinched-20';
  src: url('../fonts/Grinched-20.ttf.woff') format('woff'),
       url('../fonts/Grinched-20.ttf.svg#Grinched-20') format('svg'),
       url('../fonts/Grinched-20.ttf.eot'),
       url('../fonts/Grinched-20.ttf.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Grinched20.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'soyuzmultfilm';
  src: url('../fonts/WellwaitFree-Regular.otf');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'christmas-dream';
  src: url('../fonts/Christmas-Dream.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family: 'crafty-christmas';
    src: url('../fonts/CraftyChristmas-Regular.woff2') format('woff2'),
        url('../fonts/CraftyChristmas-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'candy-cane';
    src: url('../fonts/CandyCaneUnregistered.woff2') format('woff2'),
        url('../fonts/CandyCaneUnregistered.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Regular.eot');
  src: url('../fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Montserrat-Regular.woff2') format('woff2'),
       url('../fonts/Montserrat-Regular.woff') format('woff'),
       url('../fonts/Montserrat-Regular.svg#Montserrat-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Custom elements */
.vetochka {
  position: absolute;
  right: 0;
  top: 0;
  height: 239px;
  width: 239px;
  z-index: 0;
}

h1, h2, a {
  font-family: 'crafty-christmas';
  color: #8B4513;//#E0FFFF;
  font-weight: normal;
  font-style: normal;
}

h1 img{
   width:40%;
}


h1, h2 {
  font-size: 4rem;
  margin: 0;
  position: relative;
  z-index: 2;
}

h2 {
  font-size: 2rem;
  margin-bottom: 30px;
}

.girljanda {
  height: 6%;
  background: url('../gif/girljanda.gif') repeat-x 100%;
  width: 100%;
  position: absolute;
  top: 0;
}

select, button {
  background: #8b4817;
  color: #fee8e3;
  transition: .333s all;
}

button:hover { background: rgba(255,255,255,.2); color: #8b4817; }

#input_format { font-size: 1rem; }


#tree {
    position: absolute; 
    width: 20%;         
    margin-left: 40px;
    top: 50%;             /* центр по вертикали */
    transform: translateY(-50%); /* сдвигаем на половину собственной высоты */
}

#tree img {
    width: 100%;
    height: auto;
    display: block;       /* картинка задаёт высоту контейнера */
    position: relative;   /* остаётся в потоке */
}

#video-frame {
    position: absolute;   /* накладываем поверх картинки */
    top: 2.2%;
    left: 2.34%;
    width: 94.9%;
    height: auto;
    display: block;
}

#frame {
  position: relative;
  z-index: 3; /* картинка телефона выше видео */
  pointer-events: none; /* пропускает события */
}



#globe {
  position: fixed;
  right: -5%;
  bottom: -9%;
  width: 78vmin;
  height: 78vmin;
  transform-origin: 50% 60%;
  z-index: 2;
 }

#globe:before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../svg/globe.svg) center center / contain no-repeat;
  z-index: 2;
  pointer-events: none;
}

#globe canvas {
  pointer-events: auto;
}


#snowFlakes, #town{
 pointer-events: none;
}

canvas {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;

}

 #vet {
        position: absolute;
        right: 0px;
        top: 0px;
        z-index: -1;
    }

@import url('https://fonts.googleapis.com/css?family=Fascinate+Inline&display=swap');


#treat-button {
  font-family: 'crafty-christmas';
  font-weight: normal;
  font-style: normal;
  font-size: 2rem;
  appearance: none;
  #background: linear-gradient(to bottom, #F46001, #E14802); 
  #border: none;
  color: #fee8e3;
  border-radius: 2em;
  padding: .6em 0.5em;
  overflow: hidden;
  user-select: none;
  cursor: pointer;
  z-index: 1;
  #box-shadow: 0 0 1em rgba(white, .2);
  transition: transform .1s cubic-bezier(.5, 0, .5, 1),
    box-shadow .2s;
  
  &:hover {
    box-shadow: 0 0 2em rgba(white, .3); 
    color: #8b4817
  }

  outline: none;

  &:active {
    transform: scale(0.8) translateY(10%);
    transition-timing-function: cubic-bezier(.5, 0, .5, 1);
  }
}

.treat {
  --scale-x: 0;
  --scale-y: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: calc(50% - 0.5rem);
  border-radius: 50%;
  width: 1em;
  height: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5vmin;
  transform: 
    translate(calc(var(--x) * 1px), calc(var(--y) * 1px)) 
    translate(-50%, -50%);
  animation: 
    treat-enter 0.1s ease-in backwards, 
    treat-exit 300ms linear calc((var(--lifetime, 3000) * 1ms) - 300ms) forwards;
}

/* Появление */
@keyframes treat-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Исчезновение */
@keyframes treat-exit {
  to { opacity: 0; }
}

/* Вертящаяся "начинка" */
.treat .inner {
  animation: inner-rotate var(--spin-duration, 0.6s) linear infinite;
}

/* Полное вращение */
@keyframes inner-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(calc(360deg * var(--direction, 1))); }
} 
/* Мобильная адаптация */
@media only screen and (max-width: 768px) {
  
    textarea { width: 90%; margin: 10px; }

    h1, h2, {
        font-size: 2rem;
        margin: 0;
        z-index: 2;
        position: relative;
        text-align: center;
    }

    h2,A { font-size: 1.2rem; margin-bottom: 20px; }


    #tree {
        display:none;

    }

       #globe {
      position: relative;
      left: 50%;
      transform: translate(-50%, -5%);
      width: 78vmin;
      height: 78vmin;
      z-index: 2; 
  }
  #globe:before {
    content: "";
    display: block;
    position: absolute
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url(../svg/globe.svg) center center / contain no-repeat;
    z-index: 1;

  
       
}
#contest{
    width:95%;
    height:auto;
  }
     #vet {
        display:none;
    }
  
    #start, button, input, textarea, pre { z-index: 100; }
}

#treat-button {
}