@media (min-width: 1250px){
body{
    margin:0;
    background:white;
}

#sidePanel{
    position:fixed;
    left:0;
    top:0;
    width:299px;
    height:100vw;
    border-right: 1px solid black;
}

#bodyContainer{
    position:absolute;
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    left:300px;
    width:calc(100vw - 300px);
    height:auto;
}

h1{
    position:fixed;
    left:20px;
    top:20px;
    font-family: "neue-haas-unica", sans-serif;
    font-weight:400;
    font-style:normal;
    font-size:66px;
    letter-spacing:-.04em;
    line-height:.95em;
    margin:0;
}

#semDetails{
    position:fixed;
    left:20px;
    bottom:20px;
    line-height:1.25em;
    color:black;
    font-weight:400;
    text-decoration:none;
}

h2{
    font-family:"neue-haas-unica", sans-serif;
    font-weight:400;
    font-style:normal;
    font-size:16px;
    color:black;
    line-height:12px;
    margin:0;
    letter-spacing:-.033em;
    text-decoration:underline;
}

h3{
    font-family: "neue-haas-unica", sans-serif;
    font-weight:400;
    font-style: normal;
    font-size:10px;
    letter-spacing:.05em;
    line-height:16px;
    margin:0;
    text-align:right;
    color:black;
}

a{
    margin:0;
    text-decoration:none;
}

.projectCard{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    width:calc((100vw - 300px)/3 - 72px);
    height:auto;
    margin:20px;
    padding:15px;
    border: 1px black solid;
    border-radius:3px;
    background:rgb(212, 212, 255);
}

img{
    position:relative;
    display:block;
    margin-top:20px;
    width:calc((100vw - 300px)/3 - 72px);
    height:auto;
    border:1px solid black;
    transform:translate(-.5px, -.5px);
    border-radius:3px;
}
}

    @media (min-width: 920px) and (max-width: 1250px){
        body{
            margin:0;
            background:#edede6;
        }
        
        #sidePanel{
            position:fixed;
            left:0;
            top:0;
            width:299px;
            height:100vw;
            border-right: 1px solid black;    
        }
        
        #bodyContainer{
            position:absolute;
            display:flex;
            flex-wrap:wrap;
            align-items:flex-start;
            left:300px;
            width:calc(100vw - 300px);
            height:auto;
        }
        
        h1{
            position:fixed;
            left:20px;
            top:20px;
            font-family: "neue-haas-unica", sans-serif;
            font-weight:700;
            font-style:normal;
            font-size:24px;
            letter-spacing:-.05em;
            line-height:1em;
            margin:0;
        }
        
        #semDetails{
            position:fixed;
            left:20px;
            bottom:20px;
            line-height:1.5em;
            color:black;
        }
        
        h2{
            font-family:"neue-haas-unica", sans-serif;
            font-weight:700;
            font-style:normal;
            font-size:14px;
            color:black;
            line-height:1em;
            margin:0;
        }
        
        h3{
            font-family: "neue-haas-unica", sans-serif;
            font-weight:700;
            font-style: normal;
            font-size:10px;
            letter-spacing:.2em;
            line-height:16px;
            margin:0;
            text-align:right;
            color:black;
        }
        
        a{
            margin:0;
            text-decoration:none;
        }
        
        .projectCard{
            display:flex;
            flex-wrap:wrap;
            justify-content:space-between;
            width:calc((100vw - 300px)/2 - 74px);
            height:auto;
            margin:20px;
            padding:15px;
            border:1px black solid;
            border-radius:3px;
            background:rgb(212, 212, 255);
        }
        
        img{
            position:relative;
            display:block;
            padding-top:20px;
            width:calc((100vw - 300px)/2 - 74px);
            height:auto;
        }
        }

        @media (min-width: 0) and (max-width: 920px){
            body{
                margin:0;
                background:#edede6;
            }
            
            #sidePanel{
                position:fixed;
                left:0;
                top:0;
                width:200vw;
                height:120px;
                border-bottom: 1px solid black;
                background:#edede6;
                z-index:100;
            }
            
            #bodyContainer{
                position:absolute;
                display:flex;
                flex-wrap:wrap;
                align-items:flex-start;
                left:0;
                top:120px;
                width:100vw;
                height:auto;
            }
            
            h1{
                position:absolute;
                top:20px;
                font-family: "neue-haas-unica", sans-serif;
                font-weight:700;
                font-style:normal;
                font-size:24px;
                letter-spacing:-.05em;
                line-height:1em;
                margin-top:0;
                margin-bottom:0;
                margin-left:calc(50vw - 100px);
                width:200px;
                text-align:center;
            }
            
            #semDetails{
                position:absolute;
                bottom:20px;
                color:black;
                margin-top:0;
                margin-bottom:0;
                width:200px;
                margin-left:calc(50vw - 100px);
                text-align:center;
                font-weight:400;
            }
            
            h2{
                font-family:"neue-haas-unica", sans-serif;
                font-weight:700;
                font-style:normal;
                font-size:14px;
                color:black;
                line-height:1em;
                margin:0;
            }
            
            h3{
                font-family: "neue-haas-unica", sans-serif;
                font-weight:700;
                font-style: normal;
                font-size:10px;
                letter-spacing:.2em;
                line-height:16px;
                margin:0;
                text-align:right;
                color:black;
            }
            
            a{
                margin:0;
                text-decoration:none;
            }
            
            .projectCard{
                display:flex;
                flex-wrap:wrap;
                justify-content:space-between;
                width:calc(100vw - 72px);
                height:auto;
                margin:20px;
                padding:15px;
                border:1px black solid;
                border-radius:3px;
                background:rgb(212, 212, 255);
            }
            
            img{
                position:relative;
                display:block;
                padding-top:20px;
                width:calc(100vw - 72px);
                height:auto;
            }
            }