.no-scroll {
    position: fixed;
    width: 100%;
    height: 100%;
}

body {
    touch-action: manipulation;
}

#app-page {
    background-color: rgb(0,134,255);
}

h1 {
    color: rgb(255,81,0);
    font-size: 12vh;
    padding-top: 5vh;
    padding-bottom: 8vh;
    border-bottom: .4vh solid rgb(0,134,255);
}

#app-top {
    position: fixed;
    width: 100%;
    background-color: white;
}

#app-bottom {
    position: fixed;
    width: 100%;
    background-color: white;
    top: 80vh;
    padding-bottom: 10vh;
}

.space-5-vh {
    padding-top: 5vh;
    padding-bottom: 5vh;
}

.space-10-vh {
    padding-top: 10vh;
    padding-bottom: 10vh;
}

.space-20-vh {
    padding-top: 20vh;
    padding-bottom: 20vh;
}

.space-50-vh {
    padding-top: 50vh;
    padding-bottom: 50vh;
}

.space-top-bar {
    padding-top: 18vh;
    padding-bottom: 18vh;
}

.app-project-container img{
    max-width: 25vh;
    border-radius: 20%;
}

.app-project-container {
    padding-top: 1em;
    padding-bottom: 1em;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

.app-project {
    margin: 6vh 8vh 6vh 8vh; /* top right bottom left */
}

.app-project p {
    font-size: 3vh;
    text-align: center;
    padding-top: .5em;
}

#app-projects {
    margin: 0 auto;
    width: 100%;
}

.fullscreen-button {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100vw;
    height: 100vh;
    opacity: .0;
}

#sketch-holder {
    position: absolute;
    top: 0;
    left: 0;
}

.task-bar {
    padding-top: 4vh;
    padding-bottom: 4vh;
    display: flex;
    justify-content: center;
    border-top: .4vh solid rgb(0,134,255);
}

.status-bar {
    padding-top: 3vh;
}

.home {
    background-color: rgb(255,81,0);
    color: rgb(50,50,50);
    padding: 2vh;
    font-size: 6vh;
    border: none;
    min-width: 30vw;
}

.center {
    margin: auto;
    width: 50%;
    border: 3px solid green;
}

#app-content {
    overflow: hidden;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0 auto; /* centers projects div */
    width: 80%; /* adds space on both sides */
    height: 120vh;
}

#app-content p {
    font-size: 2.5vw;
    text-align: center;
    line-height: 5vw;
}

#info-page-title {
    text-align: center;
    font-size: 5vw;
    padding-top: 5px;
    padding-bottom: 15px;
    color: rgb(50,50,50);
}

.infoline {
    width: 70vw;
}
.info-left {
    color: rgb(255,81,0);
}

.info-right {
    color: rgb(0,134,255);
}

.iframe-sketch-app {
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    padding-bottom: 57%; /* 56.25% for 16:9 +.75 extra */
    height: 0px;
    width: 100%;
    display: flex;
    justify-content: center;
    /* max-width: 1080px; */
}

.iframe-sketch-16-11 {
    overflow: hidden;
    position: relative;
    padding-bottom: 68.75%; /* 56.25% for 16:9 +.75 extra */
    height: 0;
    /* max-width: 1080px; */
    margin-top: 10px;
}

.iframe-sketch-app iframe, .iframe-sketch-16-11 iframe {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#traffic-iframe {
    padding: 0;
    width: 100vw;
    height: 100vh;
    padding-left: 0vw;
    transform: rotate(0deg);
}

#desktop {
    visibility: visible;
}

@media all and (orientation:portrait) {
    .task-bar {
        display: flex;
    }

    .iframe-sketch-app iframe {
        width: 100%;
    }

    .iframe-sketch-app {
        width: 100%;
    }

    .app-project-container img{
        max-width: 25vw;
    }

    .app-project p {
        font-size: 4vw;
    }

    h1 {
        font-size: 12vw;
        padding-top: 5vw;
        padding-bottom: 9vw;
        border-bottom: .4vw solid rgb(0,134,255);
    }

    .app-project {
        margin: 6vw 8vw 6vw 8vw; /* top right bottom left */
    }

    #traffic-iframe {
        width: 100vw;
        height: 100vh;
        padding-left: 0vw;
        transform: rotate(0deg);
    }

    .space-top-bar {
        padding-top: 12vw;
        padding-bottom: 12vw;
    }

    #app-bottom {
        position: fixed;
        width: 100%;
        background-color: white;
        top: 85vh;
    }
    
    #app-content p {
        font-size: 2.5vh;
        text-align: center;
        line-height: 5vh;
    }
    
    #info-page-title {
        text-align: center;
        font-size: 5vh;
        padding-top: 5px;
        padding-bottom: 15px;
        color: rgb(50,50,50);
    }

    .home {
        background-color: rgb(255,81,0);
        color: rgb(50,50,50);
        padding: 2vw;
        font-size: 6vw;
        border: none;
        min-width: 30vh;
    }
}

@media all and (max-width: 1000px) {
    #desktop {
        visibility: hidden; 
    }

    .task-bar {
        display: flex;
    }
}