@import url('https://fonts.googleapis.com/css2?family=Itim&family=Pixelify+Sans:wght@400..700&display=swap');

html {
    cursor: none;
}

body {
    background: url('groupclouds.png') repeat-x, linear-gradient(rgba(159, 146, 255, 100), rgba(211, 205, 255, 100));
    background-size: auto;
    height: 100vh;
    width: 100%;
    margin: 0;
    /* display: flex; */
    /* justify-content: center;
    align-items: center; */
    animation: moveClouds 300s linear infinite;
    overflow: hidden;
    background-position: 20% 0;
}

main {
    cursor: none;
}

@keyframes moveClouds {
    0% {
        background-position: 20% 0; 
    }
    100% {
        background-position: 100% 0; 
    }
}

* {
    box-sizing: border-box;
}

a {
    text-decoration: none;
    font-family: "Pixelify Sans", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 40px;
    padding-bottom: 5px;
    color: rgb(255, 255, 255);
    border-right: 1px rgb(255, 255, 255);
}

a:hover {
    color: rgb(255, 255, 255);
}

#menubutton {
    width: 6vh;
}

button{
    all: unset;
    z-index: 3;
    position: fixed;
    top: 24px;
    left: 24px;
    padding: 48px, 48px;
}

#title {
    z-index:2;
}

#typing {
    font-family: "Pixelify Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 6vh;
    color: rgb(249, 249, 249);
    overflow: hidden; 
    white-space: nowrap; 
    border-right: 4px solid black; 
    width: 0%; 
    z-index: 9;
    margin-left: 30px;  
    margin-top: 30px;
    margin-bottom: -20px;
    animation: typing 2.5s steps(22, end) forwards, blinking 0.75s step-end infinite;
}

#typing:hover {
    color:  rgb(198, 176, 251);
}

#links {
    display: flex;
    flex-direction: column;
    align-items: center;  
    margin-left: 3vw;
}

@keyframes blinking {
    from, to { border-color: transparent }
    50% { border-color: rgb(198, 176, 251); }
  }

  
@keyframes typing {
    to {
        width: 100%;
    }
}

#typing.finished {
    border-right: none;
}


h1 {
    font-family: "Pixelify Sans", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 6vh;
    text-align: center;
    position: fixed; 
    top: 0;  
    left: 50%;  
    transform: translateX(-50%);
  }

h2 {
    font-family: "Pixelify Sans", sans-serif;
    font-style: normal;
    font-weight: 900;
    top: 16vh; 
    font-size: 8vw;
    position: absolute; 
    opacity: 0;
    text-align: center;
    margin-bottom: 0px;
    animation: fade 15s infinite;
}

#pixel_stef_container {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    bottom: 7%;
    margin-left: 45%;
    z-index: 3;
    transition: transform 0.5s ease;
    animation: jump 0.4s ease-out;
}

@keyframes jump {
    0% { transform: translateY(0); }
    50% { transform: translateY(-30px); }
    100% { transform: translateY(0); }
}

#helloworld:hover {
    scale: 1.05;
}


#helloworld {
    width: 47vw;
    transition: scale .4s;
}

#pixelstef {
    width: 7vw;
    margin-top: 14vw;
    margin-left: -14vw;
}

.titles_slideshow {
    width: 100%; 
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
}

h2:nth-child(1) {
    animation-delay: 0s;
}

h2:nth-child(2) {
    animation-delay: 5s;
}

h2:nth-child(3) {
    animation-delay: 10s;
}

@keyframes fade {
    0% { 
        opacity: 0; 
    }

    10% { 
        opacity: 1; 
    }

    30% { 
        opacity: 1; 
    }

    40% { 
        opacity: 0; 
    }

    100% { 
        opacity: 0; 
    }
}

#cursorimg {
    height: 6vh;
}

#cursor {
    position: fixed;
    top: 0px;
    left: 0px;
    translate: -50% -50%;
    z-index: 10;
    pointer-events: none;
}

#player {
    width: 100px;
    height: 100px;
    position: fixed;
    bottom: 11%; 
    left: 45%; 
    z-index: 3;
    transition: bottom 0.5s ease, transform 0.5s ease; 
    animation: jump 0.4s ease-out;
  }

#playerimg {
    width: 100px;
    height: auto;
}

.words_LP, .words_P, .words_DP, .words_SDP {
    position: absolute;
    font-family: "Pixelify Sans", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 120px;
    color: black;
    white-space: nowrap;
    bottom: 6.4%;
    z-index: 1;
}

  #startarrow{
    position: absolute;
    font-family: "Pixelify Sans", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 70px;
    color: black;
    white-space: nowrap;
    bottom: 10.5%;
  } 

  #game_floor {
    width: 100%;
    height: 9%;
    background-color: black;
    left: 0;
    bottom: 0;
    position: fixed; 
    z-index: 0;
  }

  #ingame_floor {
    width: 100%;
    height: 11%;
    background-color: black;
    left: 0;
    bottom: 0;
    position: fixed; 
    display: flex;  
    justify-content: flex-end;  
    padding-right: 75px;
  }

  @keyframes move {
    from {
        transform: translateX(-6px);
    }
    to {
        transform: translateX(6px);
    }
  }


#startarrow {
    translate: 0 0;
    animation: move .5s infinite;
    animation-direction: alternate;
    animation-direction: right;

}

#instructions_container{
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}
  
#instructions {
    /* height: 150px; */
    height: 11vw;
    width: auto;
    bottom: 26%;
    left: 40%;    
    position: fixed;
    transition: bottom 0.5s ease, transform 0.5s ease; 
    animation: jump 0.4s ease-out;
}


#linkedin, #github, #email {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: fixed;
    width: 50px;
    height: 50px;
    cursor: none;
}

#github {
    bottom: 1.6%;
    margin-right: 65px;
    background-image: url('githubhover.png');
}

#linkedin {
    bottom: 1.7%;
    margin-right: 10px;
    background-image: url('linkedinhover.png');
}

#email {
    bottom: 1.2%;
    margin-right: -50px;
    background-image: url('mailhover.png');
}


#connect_bubble_stef {  
    position: absolute;
    width: 100px;
    height: 100px;
    bottom: 200px;
    left: 230px;
}

#connectstef {
    width: 125px;
    height: auto;
}

#connectgif {
    width: 350px;
    height: auto;
}

#swap {
    position: relative;
    width: 100%;
    height: 100%;
}

#chooseplayerimg {
    position: fixed;
    bottom: 1.5%;
    left: 15px;
    height: 8%;
    width: auto;
    z-index: 1;
}

#tradingcardwidget {
    position: relative;
    width: 100%;
    height: 100%;
}

#tradingcard {
    position: absolute;
    position: fixed;
    top: 1%;
    right: 2%;
    width: 20%;
    height: auto;
    z-index: 1;
}

#umiamicard, #computercard, #gamecard, #phonecard, #toolscard {
    position: absolute;
    height: 120px;
    width: auto;
    bottom: 12%;
    animation: spinY 3s linear infinite; 
}

#tradingcardhover {
    position: absolute;
    position: fixed;
    top: 1%;
    right: 2%;
    width: 20%;
    height: auto;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s; 
    pointer-events: none;
  }
  
  #tradingcard:hover + #tradingcardhover {
    opacity: 1; 
  }

@keyframes spinY {
    0% {
        transform: rotateY(0deg); 
    }

    100% {
        transform: rotateY(360deg); 
    }
}

#skateboard_container {
    position: relative;
    width: 100%;
    height: 100%;
}

#skateboard {
    position: absolute;
    bottom: 8%;
    left: 8%;
    width: 7vw;
    z-index:1;
}

#ingame_skateboard_container {
    position: relative;
    width: 100%;
    height: 100%;
}

#ingame_skateboard {
    position: absolute;
    bottom: 10%;
    left: 8%;
    height: 77px;
    width: auto;
    z-index:1;
}

#billboard {
    position: absolute;
    bottom: 10%;
    height: 60%;
    width: auto;
    z-index:0;
}

#speechbubble {
    position: fixed;
    bottom: 26%;
    height: 20%;
    width: auto;
    z-index:0;
}

#lamppost {
    position: absolute;
    bottom: 9%;
    height: 60%;
    width: auto;
    z-index:0;
    pointer-events: none;
}

#languages {
    position: absolute;
    bottom: 11%;
    height: 65%;
    width: auto;
    z-index:0;
} 


#warninggif {
    position: fixed;
    top: 50vh;
    left: 18vw;
    height: 15vw;
    z-index:11;
}

#warningstef {
    position: fixed;
    padding-top: 10%;
    top: 60vh;
    left: 26vw;
    width: 10vw;
    z-index:11;
}

#billboardscreen {
    position: absolute;
    bottom: 8%;
    width: 620px;
}

#screen {
    position: absolute; 
}

video:focus {
    outline: none;
}

#warningmessage {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 8;
}

#mobile_version_container {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    bottom: 0%;
    margin-left: 20vw;
    z-index: 10;
    transition: transform 0.5s ease;
    animation: jump 0.4s ease-out;
}

@keyframes jump {
    0% { transform: translateY(0); }
    50% { transform: translateY(-30px); }
    100% { transform: translateY(0); }
}

#mobileversion {
    width: 75vw;
    transition: scale .4s;
}

#pixelstefmv {
    width: 16vw;
    margin-top: 33vw;
    margin-left: -25vw;
}