Super Mario .StartSe - Thiago Souza

css/style.css

@@ -1,40 +1,286 @@
+@font-face {
+    font-family: SuperMarioFont;
+    src: url(../font/SuperMario256.ttf) format('truetype');
+}
+
+@font-face {
+    font-family: Upheaval;
+    src: url(../font/upheavtt.ttf) format('truetype');
+}
+
+
 *{
     margin:0;
     padding: 0;
     box-sizing: border-box;
 }
 
+body{
+    max-width: 100%;
+    overflow-x: hidden; 
+    object-fit: cover;
+}
+
+img{
+    margin-bottom: 100px;
+}
+
+/* Title Screen */
+
+.title-screen{
+    box-sizing: border-box;
+    min-height: 100vh;
+    width: 100%;
+    display: flex;
+    justify-content: center;  
+    align-items: center;
+    text-align: center;
+    flex-direction: column;
+    z-index: 1;
+    animation: menuanimation 400ms ease;
+}
+
+.central-box {
+    background-color: rgb(255, 102, 0);
+    padding: 20px 15px;
+    border-top: 5px white solid;
+    border-left: 5px white solid;
+    border-right: 5px black solid;
+    border-bottom: 5px black solid;  
+}
+
+.central-box h1{
+    font-family: SuperMarioFont;
+    font-size: 70px;
+    color: white;
+}
+
+.central-box h2 {
+    font-family: Upheaval;
+    font-size: 25px;
+    font-weight: 100;
+    letter-spacing: 3px;
+    color: white;
+    margin-top: 10px;
+    animation: key-animation 2s infinite; 
+}
+
+/* Restart */
+
+.restart{
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;  
+    align-items: center;
+    text-align: center;
+    flex-direction: column;
+    z-index: 1;
+    padding: 0;
+    color: white;
+    animation: menuanimation 400ms ease;
+}
+
+.restart p {
+    font-family: Upheaval;
+    font-size: 70px;
+    letter-spacing: 4px;
+}
+
+.restart input {
+   font-family: Upheaval;
+   margin-top: 10px;
+   color: white;
+   font-size: 50px;
+   background-color: rgb(255, 102, 0);
+   letter-spacing: 3px;
+   border: none;
+}
+
+.restart input:hover{
+    color: rgb(75, 15, 15);
+    transition: .5s ease;
+
+}
+
+.restart .total{
+    color: rgb(75, 15, 15);
+}
+
+/* Game */
+
 .game {
     width: 100%;
     height: 100vh;
-    border-bottom: 100px solid rgb(24,174,24);
     margin: 0 auto;
     position: relative;
     overflow: hidden;
     background: linear-gradient(#87CEEB, #E0F6FF);
+    z-index: 0;
+}
+
+.score{
+    font-family: Upheaval;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 20px;
+    padding: 10px;
+    text-transform: uppercase;
+    font-size: 40px;
+    color: black;
+    background-color: rgba(255,255,255, .3);
+}
+
+.ground-game{
+    position: absolute;
+    height: 100px;
+    bottom: 0px;
+    margin-bottom: 0;
+    z-index: -1;
+    animation: ground-animation 1.5s infinite linear;
 }
 
 .pipe-game {
     position: absolute;
     bottom: 0;
     width: 80px;
     animation: pipe-animation 1.5s infinite linear;
+    z-index: -1;
 }
 
 .super-mario{
     width:150px;
     position: absolute;
     bottom: 0;
+    z-index: -1;
 }
 
 .jump-mario {
     animation: mario-animation 500ms ease-out;
 }
 
-.cloud-game{
+.mario-game-over{
+    animation: mariogameover 2s  forwards;
+}
+
+.trees{
+    position: absolute;
+    bottom: 0px;
+    width: 5045px;
+    height: 400px;
+    z-index: -1;
+    animation: trees-animation 5s infinite linear;
+}
+
+.trees2{
+    position: absolute;
+    bottom: 0px;
+    width: 4087px;
+    height: 460px;
+    z-index: -2; 
+    animation: trees-animation2 7s infinite linear;  
+} 
+
+.trees3{
+    position: absolute;
+    bottom: 300px;
+    width: 3000px;
+    height: 280px;
+    z-index: -3;
+    animation: trees-animation3 6s infinite linear;
+} 
+
+.bg-mountain{
+    position: absolute;
+    bottom: 330px;
+    width: 3853px; 
+    height: 312px;
+    z-index: -4;
+    animation: bgmountain 150s infinite linear;
+}
+
+.bg-clouds {
     position: absolute;
-    width: 550px;
-    animation: clouds-animation 20s infinite linear;
+    bottom: 400px;
+    width: 4597px; 
+    height: 582px;
+    z-index: -4;
+    animation: bgclouds 300s infinite linear;
+}
+
+/*General Effects*/
+
+.element-hidden {
+    visibility: hidden;
+    display: none;
+}
+
+
+.animation-stop{
+    animation-play-state: paused;
+} 
+
+
+/*Keyframes */
+
+@keyframes menuanimation{
+    from {
+        transform: scale(0.1);
+        opacity: 0;
+    }
+
+    to {
+        transform: scale(1);
+        opacity: 1;
+    }
+
+}
+
+@keyframes key-animation {
+    0% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0;
+    }
+}
+
+@keyframes ground-animation{
+    from{
+        left: 0px;
+    }
+    to{
+        left: -2000px;
+    }  
+}
+
+@keyframes trees-animation{
+    from {
+        left: 0px;
+    }
+    to{
+        left: -2516px;
+    }
+}
+
+@keyframes trees-animation2{
+    from {
+        left: 0px;
+    }
+    to{
+        left: -2048px;
+    }
+}
+
+@keyframes trees-animation3{
+    from{
+        left:0px;
+    }
+    to {
+        left: -1000px;
+    }
 }
 
 @keyframes pipe-animation {
@@ -43,18 +289,40 @@
     }
     to{
         right: 100%;
+    } 
+}
+
+@keyframes pipe-animation-responsive{
+    0%{
+        right:-80px;
+    }
+    50%{
+        right: -80px;
+    }
+    100%{
+        right: 100%;
     }
 }
 
-@keyframes clouds-animation {
+
+@keyframes bgmountain{
     from{
-        right: -550px;
+        left: 0px;
     }
     to{
-        right:  100%;
+        left: -1925px;
     }
 }
 
+@keyframes bgclouds{
+    from{
+        left: 0px;
+    }
+    to{
+        left: -2298px;
+    }
+} 
+
 @keyframes mario-animation{
     0% {
         bottom:0;
@@ -74,5 +342,31 @@
     100%{
         bottom: 0%
     }
+}
 
-}
+@keyframes mariogameover{
+    0% {
+        bottom: 0px;
+    }
+    20%{
+        bottom: 40px;
+    }
+    100% {
+        bottom: -350px;
+    }
+}
+
+/* Media Query */
+
+@media only screen and (max-width: 1000px){
+    .pipe-game {
+        animation-duration:  1.1s;
+    }
+}
+
+@media only screen and (max-width: 500px){
+    .pipe-game {
+        animation-name:  pipe-animation-responsive;
+        animation-duration:  1.2s;
+    }
+}