/* roboto-regular - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local(''),
         url('../fonts/Roboto/Roboto.ttf') format('embedded-opentype');
}

/* roboto-condensed-regular - latin */
@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 400;
    src: local(''),
         url('../fonts/Roboto_Condensed/RobotoCondensed-Regular.ttf') format('embedded-opentype'); /* IE6-IE8 */
}

body { margin: 0; font-family: Arial; background: #6C8CFC; }
a, a:visited, a:hover { color: #3174f8; }
  
#welcome { position: fixed; z-index: 10; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; inset: 0px; background-image: url(../images/backgrounds/morning.png); background-position: 0px 0px; background-repeat: no-repeat; background-size: cover;}
#welcome > img { width: 100%; height: auto; }

#privacy-policy { position: absolute; right: 9px; bottom: 20px; z-index: 999; }
#privacy-policy-container { display: flex; flex-direction: column; }
#privacy-policy-container a { text-decoration: none; font-weight: bold; font-size: 20px; color: black;}
#privacy-policy-container a:hover { opacity: 0.7;}

#end { position: absolute; left: 0; top: 0; transition: all .8s ease-in-out; opacity: 0; z-index: -1; width: 100%; height: 100vh; background-color: black; color: #fff; font-family: 'Roboto', sans-serif; }
#end .inner { width: 80%; max-width: 800px; margin: 0 auto; padding: 10% 0; }
#end .logo { width: 250px; height: auto; display: block; margin-left: auto; }
#end h2 { font-size: 1.7rem; margin: 20px 0; font-family: 'Roboto Condensed', sans-serif; }
#end .company-name { font-size: 55px; font-family: 'Roboto Condensed', sans-serif; margin: 75px auto; width: 50%;}
#end .text { margin: 0; font-size: 1.6rem; line-height: 33px; max-width: 60%; }
#end .credits { margin: 75px 0 0; font-size: 18px; line-height: 25px; }

#ambience { position: fixed; top: 0; right: 0; bottom: 0; left: 0}
#ambience > div { background-size: cover; }

#sun { position: fixed; bottom: -100px; left: 0%; width: 200px; height: 200px; transform: translate(-50%,0); image-rendering: pixelated ; }
#sun > div { background: no-repeat 0 0 / contain; }

.game { position: relative; height: 100vh; width: 1880px; margin: 0 auto; overflow: hidden; }
.game .sled { position: absolute; bottom: 0; height: 3000px; width: 100%; }
.game .sled-inner { width: 1440px; margin: 0 auto; }

.floor { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 1880px; height: 119px; z-index: 2; }

.houses { position: absolute; left: 50%; transform: translateX(-50%); bottom: 115px; }

.scene { position: absolute; width: 1440px; height: 592px; box-sizing: content-box; background-size: contain; }
.scene--clip { position: absolute; top: 0; right: 0; bottom: 0; left: 0;  overflow: hidden; }
.scene--sled { position: relative; height: 100%; }

/* scenes */
.scene--1-1 { bottom: 0; z-index: 2; height: 720px; }
.scene--1-2 { bottom: 0; background: url(../images/floors/0/eg-wall.png) no-repeat 0 0; height: 720px; }
.scene--1-2 .scene--clip { top: 20px; right: 76px; bottom: 120px; left: 76px; height: 520px; }
#eg { width: 300%; }


.scene--2 { bottom: 720px; background: no-repeat 0 0; }
.scene--2 .scene--clip { top: 20px; right: 76px; bottom: 120px; left: 76px; height: 520px; }
.scene--2 .scene--sled { background: no-repeat 0 0; }
#og-1 { width: 600%; }
#og-1--wall { position: absolute; top:0; left: 0; bottom: 0; right: 0; }

.scene--3 { bottom: 1312px; background: url(../images/windows.png) no-repeat 0 0; }
.scene--4 { bottom: 1904px; background: url(../images/windows.png) no-repeat 0 0; }
.scene--5 { bottom: 2496px; background: url(../images/windows.png) no-repeat 0 0; }

.scene--6 { bottom: 3088px; background: no-repeat 0 0; }
.scene--6 .scene--clip { top: 20px; right: 76px; bottom: 120px; left: 76px; height: 520px; }
.scene--6 .scene--sled { background: no-repeat 0 0; position: relative; height: 100%; }
#og-6 { width: 200%; }
#og-6--wall { position: absolute; top:0; left: 0; bottom: 0; right: 0; }

.scene--7 { bottom: 3680px; }
#terrace { width: 200%; }
#terrace--scene { height: 836px; }
#terrace > div { background-position: 0px bottom !important; }


.scene--next { position: fixed; top: -80px; left: 50%; transform: translateX(-50%); z-index: 2; width: 150px; background-color: transparent; border: none; cursor: pointer; }
.scene--next > img { width: 100%; height: auto; }
.scene--next-hover { display: none; }

.scene--scroll { position: fixed; opacity: .5; bottom: -80px; left: 50%; transform: translateX(-50%); z-index: 2; width: 150px; background-color: transparent; border: none; }
.scene--scroll > img { width: 100%; height: auto; }

nav { position: fixed; top: 20px; left: 20px; max-width: 200px; }