html{
    scroll-behavior: smooth;
}
.scroll{
    overflow-y: scroll;
    scroll-behavior: smooth;
}
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {opacity: 0.5}
    to {opacity: 1}
}

@keyframes fade {
    from {opacity: 0.5}
    to {opacity: 1}
}
/*Mobile Styles*/ 
@media screen and (max-width: 425px) {
    body, html{
        margin:0;
        padding:0;
        background-color: #171820;
    }
    #topButton{
        transform: rotate(90deg);
        cursor: pointer;
        position: fixed;
        padding: 3vw;
        color: white;
        font-weight: bold;
        font-size: 5vw;
        user-select: none;
        background-color: rgba(0,0,0,0.5);
        text-decoration:none;
        bottom: 0px;
        right: 20px;
    }
    img{
        max-width: 100%;
    }
    .imgHeader{
        max-width: 100%;
    }
    #introImage{
        max-width: 100%;
        margin-bottom: 3vw;
    }
    #backButton{
        cursor: pointer;
        width: auto;
        position: fixed;
        padding: 5vw;
        color: white;
        font-weight: bold;
        font-size: 5vw;
        user-select: none;
        background-color: rgba(0,0,0,0.5);
        text-decoration:none
    }
    #introText{
        padding: 1vw;
        background: white;
        border-radius: 15px;
        margin-bottom: 3vw;
    }
    #imageTextH{
        margin-bottom: 3vw;
    }
    #imageH{
        text-align: center;
        margin-bottom: 3vw;
    }
    #textH{
        padding: 1vw;
        background: white;
        border-radius: 15px;
        margin-bottom: 3vw;
    }
    .sketches{
        width: 100%;
    }
    #imageTextV{
        margin-bottom: 3vw;
    }
    #imageV{
        width: 100%;
        margin-bottom: 3vw;
    }
    #textV{
        padding: 1vw;
        background: white;
        border-radius: 15px;
    }
    #prototype{
        width: 100%;
        margin-bottom: 3vw;
    }
    #protoText{
        padding: 1vw;
        background: white;
        border-radius: 15px;
        margin-bottom: 3vw;
    }
    .mobileRemove{
        display: none;
    }
    #protoImage{
        margin-bottom: 3vw;
    }
    #fullImage{
    }
    .fillPage{
        width: 100%;
        margin-bottom: 3vw;
    }
    #footer{
        height: 20vh;
        background: url(../images/footerImage.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    #footerContent{
        text-align: center;
        padding-top: 3vw;
    }
    #social{
        margin: 3% 3% 3% 3%;
        height: 10vw;
        opacity: 0.75;
    }
    #social:hover{
        opacity: 1;
    }
    #trademark{
        margin: 0;
        margin-top: 1vw;
        color: white;
        text-align: center;
        font-size: 3vw;
        font-family: futura-pt, sans-serif;
    }
    #socialIcon:hover{
        opacity: 0.5;
    }
    h2{
        font-family: 'Josefin Sans', sans-serif;
        font-size: 8vw;
        margin: 3vw;;
    }
    #introTitle{
        font-size: 8vw;
    }
    p{
        font-family: futura-pt, sans-serif;
        font-size: 5vw;
        margin: 3vw;;
    }
    #soloTitle{
        margin-top: 3vw;
        font-size: 8vw;
        color: white;
        text-align: left;
    }
    .pixelSpacing{
        margin-bottom: 3vw;
    }
    .pixelSpacing2{
        margin-top: 3vw;
    }
    .slideshowPortfolio{
        text-align: center;
    }
    .slide{
        text-align: center;
        display: none;
    }
    #parking2{
        max-width: 80%;
    }
    #fridge2{
        max-width: 100%;
    }
    #homeo2{
        max-width: 100%;
    }
    #catchen2{
        max-width: 100%;
    }
    .prev, .next {
        display: none;
    }
    .slideshowPortfolio2{
        text-align: center;
    }
    .slide2{
        text-align: center;
        display: none;
    }
    #resolute2{
        max-width: 80%;
    }
    .prev2, .next2 {
        display: none;
    }
    .brandingOver{
        background: transparent !important;
    }
}
/*Tablet Styles*/
@media screen and (min-width: 426px) and (max-width: 1025px) {
    body, html{
        margin:0;
        padding:0;
        background-color: #171820;
    }
    #topButton{
        transform: rotate(90deg);
        cursor: pointer;
        position: fixed;
        padding: 1.5vw;
        color: white;
        font-weight: bold;
        font-size: 3vw;
        user-select: none;
        background-color: rgba(0,0,0,0.5);
        text-decoration:none;
        bottom: 0px;
        right: 20px;
    }
    img {
        max-width: 100%;
        max-height: 100%;
    }
    #intro{
        height: 40vw;
    }
    #introImage{
        float: left;
        width: 50%;
    }
    
    #backButton{
        display: none;
    }
    #introText{
        margin: 5vw 5vw 0px 0px;
        height: 30vw;
        width: 40%;
        float:right;
        background: white;
        border-radius: 15px;
    }
    #imageTextH{
        margin-bottom: 2vw;
    }
    #imageH{
        text-align: center;
        margin-bottom: 2vw;
    }
    #textH{
        padding: 0.1%;
        width: 80%;
        margin: auto;
        background: white;
        border-radius: 10px;
    }
    .sketches{
        width: 80%;
        display: block;
        margin: auto;
    }
    #imageTextV{
        height: 40vw;
    }
    #imageV{
        margin: 7.5vh 0 0 7.5vh;
        float: left;
        height: 80%;
        width: 40%;
        text-align: center;
    }
    #textV{
        margin: 5vw 5vw 0px 0px;
        float: right;
        height: 30vw;
        width: 40%;
        background: white;
        border-radius: 15px;
    }
    
    #prototype{
        height: 40vw;
    }
    #protoText{
        position: absolute;
        margin: 5vw 0 0 5vw;
        float: left;
        height: 30vw;
        width: 40%;
        background: white;
        border-radius: 15px;
    }
    #protoImage{
        margin: 5vw 5vw 0px 0px;
        float: right;
        height: 80%;
        width: 40%;
    }
    .fillPage{
        width: 100%;
    }
    #footer{
        height: 17vw;
        background: url(../images/footerImage.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    #footerContent{
        text-align: center;
        padding-top: 5vw;
    }
    #social{
        margin: 0 1% 0 1%;
        height: 4vw;
        opacity: 0.75;
    }
    #social:hover{
        opacity: 1;
    }
    #trademark{
        margin: 0;
        margin-top: 1vw;
        color: white;
        text-align: center;
        font-size: 1vw;
        font-family: futura-pt, sans-serif;
    }
    #socialIcon:hover{
        opacity: 0.5;
    }
    h2{
        font-family: 'Josefin Sans', sans-serif;
        font-size: 1.7vw;
        margin: 1.5vw;;
    }
    #introTitle{
        font-size: 2.5vw;
    }
    p{
        font-family: futura-pt, sans-serif;
        font-size: 1.2vw;
        margin: 1.5vw;;
    }
    #soloTitle{
        font-size: 2.5vw;
        padding-left: 5vw;
        color: white;
        text-align: left;
    }
    .pixelSpacing{
        margin-bottom: 2vw;
    }
    .pixelSpacing2{
        margin-top: 2vw;
    }
    .slideshowPortfolio{
        text-align: center;
    }
    .slide{
        text-align: center;
        display: none;
    }
    #parking2{
        max-width: 18vw;
    }
    #fridge2{
        max-width: 100%;
    }
    #homeo2{
        max-width: 100%;
    }
    #catchen2{
        max-width: 50%;
    }
    .prev, .next {
        display: none;
    }
    #parking3{
        left: 63%;
    }
    #parking4{
        right: 10%;
        border-radius: 3px 0 0 3px;
    }
    #fridge3{
        margin-top: -35vh;
        left: 56.7%;
    }
    #fridge4{
        margin-top: -35vh;
        right: 4%;
        border-radius: 3px 0 0 3px;
    }
    #homeo3{
        margin-top: -15vw;
        left: 56.5%;
    }
    #homeo4{
        margin-top: -15vw;
        right: 3.9%;
        border-radius: 3px 0 0 3px;
    }
    #homeo3{
        margin-top: -15vw;
        left: 56.5%;
    }
    #homeo4{
        margin-top: -15vw;
        right: 3.9%;
        border-radius: 3px 0 0 3px;
    }
    #catchen3{
        margin-top: -20vw;
        left: 25%;
    }
    #catchen4{
        margin-top: -20vw;
        right: 25%;
    }
    .slideshowPortfolio2{
        text-align: center;
    }
    .slide2{
        text-align: center;
        display: none;
    }
    #resolute2{
        max-width: 50%;
    }
    .prev2, .next2 {
        display: none;
    }
    .prev2{
        left: 63%;
    }
    .next2{
        right: 10.2%;
        border-radius: 3px 0 0 3px;
    }
    .brandingOver{
        background: transparent !important;
    }

}
/*Desktop Styles*/ 
@media screen and (min-width: 1026px) {
    body, html{
        margin:0;
        padding:0;
        background-color: #171820;
    }
    #topButton{
        transform: rotate(90deg);
        cursor: pointer;
        position: fixed;
        padding: 0.7vw 1vw 1vw 1vw;
        color: white;
        font-weight: bold;
        font-size: 1.5vw;
        user-select: none;
        background-color: rgba(0,0,0,0.5);
        text-decoration:none;
        bottom: 0px;
        right: 20px;
    }
    img {
        max-width: 100%;
        max-height: 100%;
    }
    #intro{
        height: 75vh;
    }
    #introImage{
        float: left;
        width: 50%;
    }
    #backButton{
        display: none;
    }
    #introText{
        margin: 3vh 7.5vh 0px 0px;
        height: 80%;
        width: 40%;
        float:right;
        background: white;
        border-radius: 15px;
    }
    #imageTextH{
        margin-bottom:3vh;
    }
    #imageH{
        text-align: center;
        margin-bottom: 5vh;
    }
    #textH{
        padding: 0.1%;
        width: 80%;
        margin: auto;
        background: white;
        border-radius: 10px;
    }
    .sketches{
        width: 80%;
        display: block;
        margin: auto;
    }
    #imageTextV{
        height: 40vw;
    }
    #imageV{
        margin: 7.5vh 0 0 7.5vh;
        float: left;
        height: 80%;
        width: 40%;
        text-align: center;
    }
    #textV{
        margin: 7.5vh 7.5vh 0px 0px;
        float: right;
        height: 80%;
        width: 40%;
        background: white;
        border-radius: 15px;
    }
    
    #prototype{
        height: 80vh;
    }
    #protoText{
        position: absolute;
        margin: 7.5vh 0 0 7.5vh;
        float: left;
        height: 70%;
        width: 40%;
        background: white;
        border-radius: 15px;
    }
    #protoImage{
        margin: 7.5vh 7.5vh 0px 0px;
        float: right;
        height: 80%;
        width: 40%;
    }
    #fullImage{
    }
    .fillPage{
        width: 100%;
    }
    #footer{
        height: 17vw;
        background: url(../images/footerImage.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    #footerContent{
        text-align: center;
        padding-top: 5vw;
    }
    #social{
        margin: 0 1% 0 1%;
        height: 4vw;
        opacity: 0.75;
    }
    #social:hover{
        opacity: 1;
    }
    #trademark{
        margin: 0;
        margin-top: 1vw;
        color: white;
        text-align: center;
        font-size: 1vw;
        font-family: futura-pt, sans-serif;
    }
    #socialIcon:hover{
        opacity: 0.5;
    }
    h2{
        font-family: 'Josefin Sans', sans-serif;
        font-size: 1.7vw;
        margin: 1.5vw;;
    }
    #introTitle{
        font-size: 2.5vw;
    }
    p{
        font-family: futura-pt, sans-serif;
        font-size: 1.2vw;
        margin: 1.5vw;;
    }
    #soloTitle{
        font-size: 2.5vw;
        padding-left: 15vh;
        color: white;
        text-align: left;
    }
    .pixelSpacing{
        margin-bottom: 5vh;
    }
    .pixelSpacing2{
        margin-top: 5vh;
    }
    .slideshowPortfolio{
        text-align: center;
    }
    .slide{
        text-align: center;
        display: none;
    }
    
    #parking2{
        max-width: 18vw;
    }
    #fridge2{
        max-width: 100%;
    }
    #homeo2{
        max-width: 100%;
    }
    #catchen2{
        max-width: 50%;
    }
    .prev, .next {
        cursor: pointer;
        position: absolute;
        margin-top: -40vh;
        margin-left: -1.25vh;
        width: auto;
        padding: 16px;
        color: white;
        font-weight: bold;
        font-size: 18px;
        transition: 0.6s ease;
        border-radius: 0 3px 3px 0;
        user-select: none;
        background-color: rgba(0,0,0,0.5);
    }
    .prev:hover, .next:hover {
        background-color: rgba(0,0,0,0.8);
    }
    #parking3{
        margin-top: -18vw;
        left: 63%;
    }
    #parking4{
        margin-top: -18vw;
        right: 10%;
        border-radius: 3px 0 0 3px;
    }
    #fridge3{
        margin-top: -30vh;
        left: 56.5%;
    }
    #fridge4{
        margin-top: -30vh;
        right: 4.2%;
        border-radius: 3px 0 0 3px;
    }
    #homeo3{
        margin-top: -15vw;
        left: 56.5%;
    }
    #homeo4{
        margin-top: -15vw;
        right: 3.9%;
        border-radius: 3px 0 0 3px;
    }
    #homeo3{
        margin-top: -15vw;
        left: 56.5%;
    }
    #homeo4{
        margin-top: -15vw;
        right: 4.2%;
        border-radius: 3px 0 0 3px;
    }
    #catchen3{
        margin-top: -20vw;
        left: 25.7%;
    }
    #catchen4{
        margin-top: -20vw;
        right: 25%;
    }
    .slideshowPortfolio2{
        text-align: center;
    }
    .slide2{
        text-align: center;
        display: none;
    }
    #resolute2{
        max-width: 50%;
    }
    #resolute3{
        margin-top: -18vw;
        left: 62%;
    }
    #resolute4{
        margin-top: -18vw;
    }
    .prev2, .next2 {
        cursor: pointer;
        position: absolute;
        margin-top: -40vh;
        width: auto;
        padding: 16px;
        color: white;
        font-weight: bold;
        font-size: 18px;
        transition: 0.6s ease;
        border-radius: 0 3px 3px 0;
        user-select: none;
        background-color: rgba(0,0,0,0.5);
    }
    .prev2:hover, .next2:hover {
        background-color: rgba(0,0,0,0.8);
    }
    .prev2{
        left: 63%;
    }
    .next2{
        right: 10.2%;
        border-radius: 3px 0 0 3px;
    }
    .brandingOver{
        background: transparent !important;
    }
}