@import url('https://fonts.googleapis.com/css?family=Roboto');


* {
    box-sizing: border-box;
}

html,
body {
    padding: 0;
    margin: 0;
    width: 100%;
    overflow: auto;
    font-family: 'Roboto', sans-serif;
}


body {
    background: url(backgrund.jpg);
    background-repeat: repeat;
    background-size: auto;
}

/*#######################################
             HEADER KOMMER HÄR
#######################################*/
header {
    width: 100%;
    min-height: 130px;
    line-height: 40px;
    background: #EFCD69;
    overflow: auto;
    /*position: fixed;*/
    top: 0px;
    z-index: 20;
    border-bottom: 2px solid white;
}


header nav {
    width: 100%;

}

header nav a {
    color: white;
    text-decoration: none;
    display: inline-block;
    height: 50px;
    line-height: 40px;
    width: 80%;
    text-align: center;
    font: 400 20px/1.8 "Mountains of Christmas", sans-serif;
}


#merryChrist {
    width: 100%;
    padding-top: 5px;
    min-height: 50px;
    font-family: 'Mountains of Christmas', cursive;
    font-size: 40px;
    text-align: center;
}

#merryChrist a {
    width: 100%;
    min-height: 50px;
    font-family: 'Mountains of Christmas', cursive;
    color: black;
    font-size: 40px;
    text-align: center;

}

#navmenu {
    padding-top: 10px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;

}

.menyalt {
    border-top: 2px solid white;
    width: 25%;
    text-align: center;
    height: 40px;
    line-height: 40px;
    color: white;
    font-weight: bold;
}

.menyalt a {
    color: black;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    transform: translateY(35%);
}

.menyalt:hover {
    border-top: 2px solid red;
}

.menyalt a h5 {
    margin: 0;
}

/*#######################################
                 MAIN
#######################################*/


main {
    width: 100%;
    height: 100%;
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
    z-index: 10;

}

#maintop {
    -webkit-box-shadow: 0 8px 6px -6px black;
    ;
    /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow: 0 8px 6px -6px black;
    ;
    /* Firefox 3.5 - 3.6 */
    box-shadow: 0 8px 6px -6px black;
    /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
    margin-bottom: 4%;

}


/*#######################################
          LAMPORNA & NEDRÄKNING
#######################################*/

#placeCountdown {
    background: url(snow.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    min-height: 50px;
    overflow: auto;
    margin: 0 auto;
}

#countdown {
    font-family: 'Mountains of Christmas', cursive;
    font-size: 40px;
    text-align: center;
}

.lightrope {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    margin: -15px 0 0 0;
    padding: 0;
    pointer-events: none;
    width: 100%;
}

.lightrope li {
    position: relative;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    width: 12px;
    height: 28px;
    border-radius: 50%;
    margin: 20px;
    display: inline-block;
    background: #00f7a5;
    box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
    -webkit-animation-name: flash-1;
    animation-name: flash-1;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

.lightrope li:nth-child(2n+1) {
    background: cyan;
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.5);
    -webkit-animation-name: flash-2;
    animation-name: flash-2;
    -webkit-animation-duration: 0.4s;
    animation-duration: 0.4s;
}

.lightrope li:nth-child(4n+2) {
    background: #f70094;
    box-shadow: 0px 4.6666666667px 24px 3px #f70094;
    -webkit-animation-name: flash-3;
    animation-name: flash-3;
    -webkit-animation-duration: 1.1s;
    animation-duration: 1.1s;
}

.lightrope li:nth-child(odd) {
    -webkit-animation-duration: 1.8s;
    animation-duration: 1.8s;
}

.lightrope li:nth-child(3n+1) {
    -webkit-animation-duration: 1.4s;
    animation-duration: 1.4s;
}

.lightrope li:before {
    content: "";
    position: absolute;
    background: #222;
    width: 10px;
    height: 9.3333333333px;
    border-radius: 3px;
    top: -4.6666666667px;
    left: 1px;
}

.lightrope li:after {
    content: "";
    top: -14px;
    left: 9px;
    position: absolute;
    width: 52px;
    height: 18.6666666667px;
    border-bottom: solid #222 2px;
    border-radius: 50%;
}

.lightrope li:last-child:after {
    content: none;
}

.lightrope li:first-child {
    margin-left: -40px;
}

@-webkit-keyframes flash-1 {

    0%,
    100% {
        background: #00f7a5;
        box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
    }

    50% {
        background: rgba(0, 247, 165, 0.4);
        box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
    }
}

@keyframes flash-1 {

    0%,
    100% {
        background: #00f7a5;
        box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
    }

    50% {
        background: rgba(0, 247, 165, 0.4);
        box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
    }
}

@-webkit-keyframes flash-2 {

    0%,
    100% {
        background: cyan;
        box-shadow: 0px 4.6666666667px 24px 3px cyan;
    }

    50% {
        background: rgba(0, 255, 255, 0.4);
        box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2);
    }
}

@keyframes flash-2 {

    0%,
    100% {
        background: cyan;
        box-shadow: 0px 4.6666666667px 24px 3px cyan;
    }

    50% {
        background: rgba(0, 255, 255, 0.4);
        box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2);
    }
}

@-webkit-keyframes flash-3 {

    0%,
    100% {
        background: #f70094;
        box-shadow: 0px 4.6666666667px 24px 3px #f70094;
    }

    50% {
        background: rgba(247, 0, 148, 0.4);
        box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 0.2);
    }
}

@keyframes flash-3 {

    0%,
    100% {
        background: #f70094;
        box-shadow: 0px 4.6666666667px 24px 3px #f70094;
    }

    50% {
        background: rgba(247, 0, 148, 0.4);
        box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 0.2);
    }
}


/*#######################################
             INDEX SIDAN
#######################################*/

#whatschrist {
    background-color: white;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    padding: 20px 20px;
    border-radius: 10px
}

.aboutchrist {
    text-align: left;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    width: 95%;
    margin-left: auto;
    margin-right: auto;

}

/*#######################################
             HYRA TOMTE
#######################################*/
#hyrEnTomte {
    background-color: white;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;

}



/*#######################################
       EMOJI KALENDERN KOMMER HÄR

      Jag hade kunnat göra så att
     rutorna förblev öppna efter man
      tryckt på dem, men tyckte att
     det var snyggare om de öppnades
     och stängdes när man höll på dem
#######################################*/
.present {
    position: relative;
    display: inline-block;
    width: 12em;
    height: 12em;
    margin: .5em;
    -webkit-perspective: 850px;
    perspective: 850px;
    z-index: 666;
}

.present__pane,
.present__content {
    width: inherit;
    height: inherit;
}

.present__pane {
    position: relative;
    background: linear-gradient(135deg, #ff816b 50%, Tomato 50%);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 0;
    transform-origin: 0;
    -webkit-perspective: 850px;
    perspective: 850px;
    text-align: center;
    box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all .2s ease-out;
}

.present__date {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 2.4em;
    height: 2.4em;
    margin: 0;
    font-size: 2em;
    line-height: 2.4em;
    background: SlateBlue;
    color: white;
    border-radius: 50%;
    box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.15);
}

.present:hover {
    z-index: 999;
}

.present:hover .present__pane {
    background: linear-gradient(135deg, #ff8e7a 50%, #ff7961 50%);
    -webkit-transform: rotateY(-97deg);
    transform: rotateY(-97deg);
    -webkit-perspective-origin: 0;
    perspective-origin: 0;
    transition: all .25s ease-in;
}

.present:hover .present__date {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.present:hover .present__bauble {
    display: inline-block;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-animation: shake .7s;
    animation: shake .7s;
}

.present__content {
    position: absolute;
    top: 0;
    left: 0;
    background: SlateBlue;
    box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15), inset 0 0 30px 20px rgba(0, 0, 0, 0.15);
    z-index: -1;
}

.present__bauble {
    position: relative;
    width: 2.6666666667em;
    height: 2.6666666667em;
    background: Violet;
    margin: 25% auto 0 auto;
    font-size: 2.6666666667em;
    line-height: 2.6666666667em;
    border-radius: 50%;
}

.present__bauble::after {
    content: '';
    position: absolute;
    top: -5%;
    left: 50%;
    width: 30%;
    height: 10%;
    margin-left: -15%;
    background: inherit;
}

.present__bauble::before {
    content: '';
    position: absolute;
    top: -15%;
    left: 50%;
    width: 12%;
    height: 20%;
    margin-left: -12%;
    border: .35rem solid Violet;
    border-radius: 50%;
    z-index: 0;
}

#KalHollare {
    display: flex;
    align-items: center;
    text-align: center;
    height: 100%;
    padding-bottom: 20px;
}


/*#######################################
              JULSPELLISTA
#######################################*/

.julSpelLista {
    text-align: center;
    text-decoration: none;
    font-family: sans-serif;
    margin: 1% 1%;
    height: 70vh;
}

#julSpelListaHoll {
    background-color: white;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    border-radius: 5px;
}

/*#######################################
             MOBIL ANPASSNINGAR
#######################################*/

@media only screen and (max-width: 425px) {
    .navmeny {
        flex-direction: row;
    }

    header nav {
        min-height: 130px
    }

    .prev,
    .next,
    .text {
        font-size: 11px
    }

    #merryChrist a {
        width: 100%;
        min-height: 50px;
        font-family: 'Mountains of Christmas', cursive;
        color: black;
        font-size: 25px;
        text-align: center;


    }
    .menyalt a {
        font-size: 15px;
    }

    .aboutchrist,
    .julSpelLista {
        text-align: center;
        font-family: sans-serif;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    #whatschrist,
    #julSpelListaHoll {
        padding: 4%;
        width: 90%;
    }

    #hyrEnTomte {
        width: 90%;
    }
}

@media only screen and (max-width: 425px) {
    
}

/*#######################################
                 JULSPEL

    Här fick jag använda mig av aspect
     ratio för att det gick inte att
     ändra storleken på spelfönstret
    utan att det blev konstigt på olika
              skärmstorlekar.
#######################################*/

#julspelPlaceHolder {
    align-content: center;
    width: 100%;
    padding-top: 75%;
    /* 4:3 Aspect Ratio */
    position: relative;
}

.julSpelet {
    position: absolute;
    top: 0;
    left: 15%;
    bottom: 0;
    right: 0;
}


/*#######################################
             FOOTER KOMMER HÄR
#######################################*/
footer {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 100%;
    height: 65px;
    text-align: center;
    background-color: #EFCD69;
    margin-top: 4%;

}