/*body{
    margin: 0;
    font-style: normal;
    font-weight: 400;
    font-family: 'Noto Sans', sans-serif;
}*/

@font-face {
    font-family: 'Montserrat'; /*a name to be used later*/
    src: url('res/Montserrat-Regular.ttf'); /*URL to font*/
    font-display: auto;
}

@font-face {
    font-family: 'Pacifico'; /*a name to be used later*/
    src: url('res/Pacifico-Regular.ttf'); /*URL to font*/
    font-display: auto;
}


*:focus {
    outline: 0 !important;
}


html{
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: black;
}

body{
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    overflow-x: hidden !important;
}

.hoverAnimation{
    transition: transform 0.3s;
    -webkit-transition: transform 0.3s;
}

.hoverAnimation:hover{
    transform: translate(0,-20px);
}

.hoverAnimationWeak{
    transition: transform 0.3s,
                fill 0.3s;
    -webkit-transition: transform 0.3s,
                        fill 0.3s;
}

.hoverAnimationWeak:hover{
    transform: translate(0,-10px);
}

#scrollBtn {
    opacity: 0;
    position: fixed; /* Fixed/sticky position */
    bottom: 15px; /* Place the button at the bottom of the page */
    right: 20px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    cursor: pointer; /* Add a mouse pointer on hover */
    transition: opacity 0.5s;
}

#imageScroll{
    height: 5vh;
    width: 5vh;
    border-radius: 25%;
    background-color: black;
    opacity: 0.5;
}

#planeContainer{
    background-image: linear-gradient(to top, #0bceff 0%, #6776ff 100%);
    height: 30vh;
    width: 100vw;
    position: relative;
    overflow: hidden;
}

#plane{
    max-height: 50px;
    height: 10%;
    position: absolute;
    top: 30%;
    left: -17%;
}

.topBarImage {
    position: absolute;
    width: 100%;
    padding: 0px;
    margin: 0;
    border: 0;
}

.profilePic{
    position: relative;
    display: block;
    margin: auto;
    width: 35vw;
    max-width: 300px;
    border-radius: 500px;
    box-shadow: 4px 8px 15px #888888;
}

#name{
    font-family: 'Pacifico', cursive;
    color: black;
    font-size: 60px;
    text-align: center;
    line-height: 80px;
    padding-top: 9%;
    padding-bottom: 3%;
}

#underline{
    margin: 0 auto;
    margin-left: 21%;
    height: 5px;
    width: 0%;
    background-image: linear-gradient(to right, #5ee7df 0%, #0099ff 100%);
    transition: width 0.45s;
}

#name:hover div {
    width: 58.7%;
}

.textBlock { 
    text-align: center;
    max-width: 770px;
    margin: auto;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 3%;
    font-size: 18pt;
}

div svg{
    fill: black;
}

#socialMediaContainer{
    display: block;
    text-align: center;
    padding: 1%;
}

.socialMediaButton{
    width: 70px;
    height: 70px;
    margin: 1%;
    border-radius: 500px;
    box-shadow: 2px 4px 15px #888888;
}

#twitter:hover{
    fill: #1da1f2;   
}

#instagram:hover{
    fill: #fd3197; 
}

#github:hover{
    fill: gray;   
}

#email:hover{
    fill: #ff4835;   
}

.appBoxes{
    max-width: 1350px;
    display: block;
    margin: auto;
    overflow: visible;
    margin-top: 80px;
    margin-bottom: 80px;
    text-align: center;
}

.appIcon{
    width: 40%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.appTitle{
    font-size: 25pt;
    text-align: center;
    margin: 0;
}

#appBox{
    font-weight: 500;
    max-width: 400px;
    display: inline-block;
    margin: auto;
    margin: 10px;
    margin-top: 40px;
    padding: 10px;
    box-shadow: 4px 8px 15px #888888;
    border-radius: 10px;
    text-decoration: none;
    color: black;
    background-color: white;
    transition: transform 0.3s,
                box-shadow 0.3s;
    -webkit-transition: transform 0.3s,
                        box-shadow 0.3s;
}

#appBox:hover{
    transform: translate(0,-20px);
    box-shadow: 5px 15px 25px #888888;
}

#background{
    position: absolute;
    display: block;
    margin: auto;
    padding-top: 100px;
    z-index: -1;
}

.projectShowcase{
    text-align: center;
    overflow: hidden;
    min-height: 100vh;
}

.phoneImage{
    max-width: 320px;
    display: block;
    margin: auto;
    z-index: 1000;
}

#phoneScreenDiv{
    height: 520px;
    margin-top: 50px;
}

#computerScreenDiv{
    margin-top: 20px;
}

#phoneEmpty{
    position: absolute;
    max-width: 320px;
    margin-left: -270px;
    margin-top: -60px;
}

.screen1{
    margin-left: 0 !important;
    position: relative;
}

.screen2{
    position: absolute;
    animation-name: fade;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 12s;
    animation-delay: 0s;
}
.screen3{
    position: absolute;
    animation-name: fade;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 12s;
    animation-delay: 4s;
}

@keyframes fade {
    0% {
    opacity:1;
    }
    29% {
    opacity:1;
    }
    33% {
    opacity:0;
    }
    96% {
    opacity:0;
    }
    100% {
    opacity:1;
    }
}

.phoneScreen{
    width: 220px;
    margin-left: -220px;
}

.computerScreen{
    width: 90%;
    max-width: 700px;
    margin: auto;
    left: 0;
    right: 0;
}

#computerWrapper{
    max-width: 700px;
    width: 90%;
    margin: auto;
}

.showcaseTitle{
    font-size: 30pt;
}

.showcaseCategory{
    font-weight: 500;
    margin-top: 10px;
    padding-bottom: 30px;
}

.showcaseDescription{
    font-weight: 500;
    font-size: 13pt;
    max-width: 500px;
    margin: auto;
    padding-left: 5%;
    padding-right: 5%;
    margin-top: -20px;
    margin-bottom: 50px;
}

.showcaseButtonLink{
    text-decoration: none;
    display: block;
}

.showcaseButton{
    margin: auto;
    /*box-shadow: 5px 10px 18px #000000;*/
    padding: 12px;
    border-radius: 3px;
    font-size: 15pt;
}

#sectionSwitchyRoads{
    background-image: linear-gradient(to bottom, #05b0db 0%, #495aff 100%);
    margin-top: 50px;
    color: white;
}

#linkSwitchyRoads{
    color: #0086a3;
}

#buttonSwitchyRoads{
    background-color: #6CE5FF;
}

#sectionMegaJump{
    background-image: linear-gradient(to top, #ff4835 0%, #ff2475 100%);
    color: white;
}


#linkMegaJump{
    color: #e40000;
}


#buttonMegaJump{
    background-color: #ffa3a3;
}

#sectionSafeThatFish{
    background-image: linear-gradient(to top, #0fd850 0%, #c9f947 100%);
    color: white;
}


#linkSafeThatFish{
    color: green;
}


#buttonSafeThatFish{
    background-color: #a4fba4;
}

#sectionPartyStarter{
    background-image: linear-gradient(to bottom, #cc208e 0%, #9613d2 100%);
    color: white;
}

#linkPartyStarter{
    color: #881e76;
}

#buttonPartyStarter{
    background-color: #ff68fd;
}

#sectionSimulation{
    background-image: linear-gradient(to bottom, #38414E 0%, #222831 100%);
    color: white;
}

#linkSimulation{
    color: #222831;
}

#buttonSimulation{
    background-color: #6A81A3;
}

.windowScreen{
    max-width: 820px;
    width: 90%;
    display: block;
    margin: auto;
}


#sectionGameAwardSaar{
    background-image: linear-gradient(to bottom, #f12711 0%, #f5af19 100%);
    color: white;
}
#inlineLinkSwitchyRoads{
	color: white;
	/*text-decoration: none; */
}
#linkGameAwardSaar{
    color: #f49a17;
}

#buttonGameAwardSaar{
    background-color: #f25813;
}