/* unica-one-regular - latin */

@font-face {

    font-family: 'Unica One';

    font-style: normal;

    font-weight: 400;

    src: url('../fonts/unica-one-v8-latin-regular.eot'); /* IE9 Compat Modes */

    src: local('Unica One'), local('UnicaOne-Regular'),

         url('../fonts/unica-one-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

         url('../fonts/unica-one-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */

         url('../fonts/unica-one-v8-latin-regular.woff') format('woff'), /* Modern Browsers */

         url('../fonts/unica-one-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */

         url('../fonts/unica-one-v8-latin-regular.svg#UnicaOne') format('svg'); /* Legacy iOS */

  }

body {

    margin: 0;

}

main {

    font-size: 1em;

    line-height: 1.4;

    background-color: #145252;

}



/*

 * Remove text-shadow in selection highlight: h5bp.com/i

 * These selection rule sets have to be separate.

 * Customize the background color to match your design.

 */



::-moz-selection {

    background: #b3d4fc;

    text-shadow: none;

}



::selection {

    background: #b3d4fc;

    text-shadow: none;

}



/*

 * A better looking default horizontal rule

 */



hr {

    display: block;

    height: 1px;

    border: 0;

    border-top: 1px solid #ccc;

    margin: 1em 0;

    padding: 0;

}



/*

 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440

 */



img {

    vertical-align: middle;

}



/*

 * Remove default fieldset styles.

 */



fieldset {

    border: 0;

    margin: 0;

    padding: 0;

}



/*

 * Allow only vertical resizing of textareas.

 */



textarea {

    resize: vertical;

}





/* ==========================================================================

   Chrome Frame prompt

   ========================================================================== */



.chromeframe {

    margin: 0.2em 0;

    background: #ccc;

    color: #000;

    padding: 0.2em 0;

}



/* ==========================================================================

   Author's custom styles

   ========================================================================== */



/*

    body becomes main

*/ 

main {

    width: 100%;

    max-width: 530px;

    height: calc(100vh - 16px);

    max-height: 740px;



    background-image: url(../image/hills-bg.svg);

    background-repeat: no-repeat;

    /* background-attachment: fixed; */

    background-size: contain;

    background-position-y: bottom;



    /*

        Bottom spacer

    */

    /* padding-bottom: 17rem; */

}



/*

    HEADER STYLES

*/

.pseudo-header {

    width: 100%;

    height: 80px;

    padding-bottom: 2rem;

    padding-top: 1.5rem;

    display: flex;

    flex-flow: row;

    justify-content: center;

    align-items: flex-start;

}

.pseudo-header img {

    height: 80px;

    width: auto;

    padding-left: 1rem;

    padding-top: 0.5rem;

}

.pseudo-header h1 {

    font-family: 'Unica One';

    padding: 0;

    margin: 0;

    position: static;

}

.pseudo-header h1 span {

    color:white;

    display: block;

    margin:0;

    line-height: 1;

}

.pseudo-header h1 span:last-of-type {

    margin-left: 40px;

}



/*

    Start Screen

*/

.screen {

    width: 100%;

}

.screen .preview-container {

    margin: 0 auto;

    width: 90%;

    height: 100%;

    position: relative;

    cursor:pointer;

}

.screen .preview-container img {

    width: 100%;

    height: auto;

}

.play-button {

    position: absolute;

    width: 120px;

    height: 120px;

    background-image: url(../image/play-button.svg);

    background-repeat: no-repeat;

    background-position-y: center;

    /* background: red; */

    top: 50%;

    left: 50%;

    margin-left: -60px;

    margin-top: -60px;

}

/* Wiggle animation */

.wiggle {

    animation: wiggle 1s;

    animation-iteration-count: 1;

}

@keyframes wiggle {

    0% { transform: rotate(0deg); }

    10% { transform: rotate(-3deg); }

    20% { transform: rotate(4deg); }

    30% { transform: rotate(-5deg); }

    40% { transform: rotate(4deg); }

    50% { transform: rotate(-3deg); }

    60% { transform: rotate(0deg); }

    70% { transform: rotate(0deg); }

    80% { transform: rotate(0deg); }

    90% { transform: rotate(0deg); }

    100% { transform: rotate(0deg); }

}





/*

    Game styles

*/

.game_screen {

    /* hidden by default */

    display: none;

}

.modal {

    width: 100%;



    display: flex;

    flex-flow: column;

    justify-content: flex-start;

    align-items: center;

}

.modal img {

    width: 90%;

    height: auto;

}

.modal span {

    align-self: flex-end;

    margin-right: 5%;

    background-color: #fff;

    border-radius: 20px;

    padding: 1px 10px 0 10px;

    font-weight: bold;

    font-size: 1.5rem;

    cursor: pointer;

    margin-bottom: 1rem;

    margin-top: calc(-2.5rem - 1px);

}

#puzzle {

    background-color: #525d59;

    border: 4px solid white;

    box-sizing: border-box;

    width: 90%;

    margin:0 auto;







    -webkit-user-select: none; /* Chrome/Safari */

    -moz-user-select: none; /* Firefox */

    -ms-user-select: none; /* IE10+ */



    /* Rules below not implemented in browsers yet */

    -o-user-select: none;

    user-select: none;

}



.game {

    z-index: 50;

}



#container {

    max-width: 530px;

    min-width: 300px;

    margin: 0 auto;

}



#new-game {

    padding: 0.75rem 1.25rem;

    color: white;

    background-color: transparent;

    border: 0.25rem solid #fffd;

    border-radius: 6px;

    height: auto;

    margin: 1.2rem 1rem 0 1rem;

    cursor: pointer;

}



#action-button {

    padding: 0.75rem 1.25rem;

    color: white;

    background-color: #145252;

    border: 0.25rem solid white;

    border-radius: 6px;

    height: auto;

    margin: 1.2rem 1rem 0 1rem;

    cursor: pointer;

}



#action-button a {

    color: white;

    text-decoration: none;

}



#action-button a:hover {

    color: white;

    text-decoration: none;

}



.controls {

    text-align: center;

    margin: 0.5rem 2rem 0 2rem;

    display: flex;

    flex-flow: row;

    justify-content: center;

    align-items: flex-start;

}



/* ==========================================================================

   Helper classes 

   ========================================================================== */



/*

 * Image replacement

 */



.ir {

    background-color: transparent;

    border: 0;

    overflow: hidden;

    /* IE 6/7 fallback */

    *text-indent: -9999px;

}



.ir:before {

    content: "";

    display: block;

    width: 0;

    height: 150%;

}



/*

 * Hide from both screenreaders and browsers: h5bp.com/u

 */





.placeholder {

    max-width: 100%;

    display: flex;

    justify-content: center;

   

}

.container1{

    max-width:50%;

    position: relative;

}



.prev,

.next {

  cursor: pointer;

  position: absolute;

  top: 40%;

  width: auto;

  padding: 16px;

  margin-top: -50px;

  color: white;

  font-weight: bold;

  font-size: 20px;

  border-radius: 0 3px 3px 0;

  user-select: none;

  -webkit-user-select: none;  }



  

  .next {

  right: 0;

  border-radius: 3px 0 0 3px;

 }







/*

 * Hide only visually, but have it available for screenreaders: h5bp.com/v

 */



.visuallyhidden {

    border: 0;

    clip: rect(0 0 0 0);

    height: 1px;

    margin: -1px;

    overflow: hidden;

    padding: 0;

    position: absolute;

    width: 1px;

}



/*

 * Extends the .visuallyhidden class to allow the element to be focusable

 * when navigated to via the keyboard: h5bp.com/p

 */



.visuallyhidden.focusable:active,

.visuallyhidden.focusable:focus {

    clip: auto;

    height: auto;

    margin: 0;

    overflow: visible;

    position: static;

    width: auto;

}



/*

 * Hide visually and from screenreaders, but maintain layout

 */



.invisible {

    visibility: hidden;

}



/*

 * Clearfix: contain floats

 *

 * For modern browsers

 * 1. The space content is one way to avoid an Opera bug when the

 *    `contenteditable` attribute is included anywhere else in the document.

 *    Otherwise it causes space to appear at the top and bottom of elements

 *    that receive the `clearfix` class.

 * 2. The use of `table` rather than `block` is only necessary if using

 *    `:before` to contain the top-margins of child elements.

 */



.clearfix:before,

.clearfix:after {

    content: ""; /* 1 */

    display: table; /* 2 */

}



.clearfix:after {

    clear: both;

}



/*

 * For IE 6/7 only

 * Include this rule to trigger hasLayout and contain floats.

 */



.clearfix {

    *zoom: 1;

}



/* ==========================================================================

   EXAMPLE Media Queries for Responsive Design.

   These examples override the primary ('mobile first') styles.

   Modify as content requires.

   ========================================================================== */



@media only screen and (min-width: 35em) {

    /* Style adjustments for viewports that meet the condition */

}