@font-face {
    font-family: chalkLine;
    src: url(fonts/chalkLineOutline.ttf);
}
@font-face {
    font-family: eraserDust;
    src: url(fonts/EraserDust.ttf);
}
@font-face {
    font-family: neatChalk;
    src: url(fonts/NeatChalk.ttf);
}
@font-face {
    font-family: pigment;
    src: url(fonts/pigment.otf);
}
@font-face {
    font-family: ten;
    src: url(fonts/TenThousandReasons.ttf);
}
html, body{
    overflow:hidden;
}
html {
    margin:0;
    padding:0;
    background:url(../images/chalkboardbg.jpg) no-repeat center center fixed;
    background-size:cover;
}
.mobilebg{
    display:none;
}
.name{
    font-family:chalkLine;
    color:white;
    font-size:40px;
    width:400px;
    text-align: center;
    position:absolute;
    top:100px;
    left:20px;
    transform: rotate(-20deg);
    font-weight:bold;
    transition:0.5s;
}
.linkedin{
    font-family:pigment;
    color:white;
    font-size:50px;
    width:210px;
    height:80px;
    position:absolute;
    top:50px;
    right:100px;
    transform: rotate(5deg);
    transition:0.3s;
}
.linkedin:hover{
    height:85px;
    width:220px;
    transform: rotate(-5deg);
}
.name span{
    font-size:40px;
    font-family:eraserDust;
    font-weight:100;
    text-decoration: underline;
    transition:0.5s;
}
.hamburger{
    display:none;
}
.mobilenav{
    display:none;
}
.nav {
    position:fixed;
    left:80px;
    top:330px;
    width:300px;
    transform: rotate(5deg);
}
.nav a {
    text-decoration:none;
    color:white;
    font-family:pigment;
    font-size:30px;
    display:block;
    padding:15px;
    transition:0.5s;
}
.nav a:hover{
    color:gray;
}
.drawHere{
    font-family:ten;
    font-size:90px;
    position:absolute;
    left:50%;
    top:50%;
    width:500px;
    height:130px;
    margin-left:-250px;
    margin-top:-65px;
    color:rgba(255,255,255,0.1);
    text-align: center;
    transition:0.5s;
}
.successError{
    font-family:ten;
    font-size:50px;
    position:absolute;
    left:50%;
    top:40%;
    width:500px;
    height:380px;
    margin-left:-250px;
    margin-top:-65px;
    color:rgba(255,255,255,1);
    text-align: center;
    transition:0.5s;
}
.clear {
    position:fixed;
    right:20px;
    bottom:5px;
    font-family: neatChalk;
    border:none;
    color:white;
    background:none;
}
.clear:hover{
    color:gray;
}
.stroke select, .color select, .clear{
    cursor:pointer;
    padding:5px;
}
.stroke{
    position:fixed;
    right:190px;
    bottom:15px;
    height:30px;
    width:170px;
    font-size:14px;
    font-family: neatChalk;
    border:none;
    color:white;
    background:none;
}
.stroke select{
    font-family: neatChalk;
    background:none;
    color:gray;
    border:solid white 2px;
}
.color{
    position:fixed;
    right:370px;
    bottom:15px;
    height:30px;
    width:220px;
    font-size:14px;
    font-family: neatChalk;
    border:none;
    color:white;
    background:none;
}
.color select{
    font-family: neatChalk;
    background:none;
    color:gray;
    border:solid white 2px;
}
/********* My Work *********/
.myWork{
    position:absolute;
    top:50%;
    left:50%;
    width:700px;
    height:0px;
    margin-left:-350px;
    margin-top:-250px;
    text-align:center;
    opacity:0;
    border:30px solid transparent;
    border-image: url(../images/border.png) 30;
    padding:15px;
    display:none;
}
.workTitle{
    font-family:chalkLine;
    font-size:28px;
    color:white;
}
.myprojects{
    float:left;
    width: 200px;
    height:200px;
    border:solid 2px;
    margin:14px;
    border-radius:10px;
    overflow:hidden;
    position:relative;
}
.myprojects img{
    filter: grayscale(1);
    transition:0.5s;
}
.myprojects img:hover{
    filter: grayscale(0);
}

/* Student Work */
.studentWork{
    position:absolute;
    top:50%;
    left:50%;
    width:700px;
    height:0px;
    margin-left:-350px;
    margin-top:-250px;
    text-align:center;
    opacity:0;
    border:30px solid transparent;
    border-image: url(../images/border.png) 30;
    padding:15px;
    display:none;
}
.studentTitle{
    font-family:chalkLine;
    font-size:28px;
    color:white;
}
.studentprojects{
    float:left;
    width: 200px;
    height:200px;
    border:solid 2px;
    margin:14px;
    border-radius:10px;
    overflow:hidden;
}
.studentprojects img{
    filter: grayscale(1);
    transition:0.5s;
}
.studentprojects img:hover{
    filter: grayscale(0);
}
/* Teaching Demos */
.teachingDemos{
    position:absolute;
    top:50%;
    left:50%;
    width:700px;
    height:0px;
    margin-left:-350px;
    margin-top:-250px;
    text-align:center;
    opacity:0;
    border:30px solid transparent;
    border-image: url(../images/border.png) 30;
    padding:15px;
    display:none;
}
.videoTitle{
    font-family:chalkLine;
    font-size:28px;
    color:white;
}
.teachingvid{
    float:left;
    width: 200px;
    height:200px;
    border:solid 2px;
    margin:14px;
    border-radius:10px;
    overflow:hidden;
}
.teachingvid img{
    filter: grayscale(1);
    transition:0.5s;
}
.teachingvid img:hover{
    filter: grayscale(0);
}
/* Certifications */
.certs{
    position:absolute;
    top:50%;
    left:50%;
    width:700px;
    height:0px;
    margin-left:-350px;
    margin-top:-250px;
    text-align:center;
    opacity:0;
    border:30px solid transparent;
    border-image: url(../images/border.png) 30;
    padding:15px;
    display:none;
}
.certTitle{
    font-family:chalkLine;
    font-size:28px;
    color:white;
}
.cert{
    float:left;
    width: 200px;
    height:200px;
    border:solid 2px;
    margin:14px;
    border-radius:10px;
    overflow:hidden;
}
.cert img{
    filter: grayscale(1);
    transition:0.5s;
}
.cert img:hover{
    filter: grayscale(0);
}
/* Contact Me */
.contactMe{
    position:absolute;
    top:50%;
    left:50%;
    width:700px;
    height:0px;
    margin-left:-350px;
    margin-top:-250px;
    text-align:center;
    opacity:0;
    padding:15px;
    display:none;
}
.contactTitle{
    font-family:chalkLine;
    font-size:28px;
    color:white;
}
.form{
    text-align:left;
    width:300px;
    position:absolute;
    top:70px;
    left:50%;
    margin-left:-150px;
}
.form input[type=text], .form input[type=email]{
    width:280px;
    padding:10px;
    border-radius:10px;
    border:none;
    font-family: ten;
    font-size:16px;
    transition:0.5s;
}
.form input[type=text]:focus, .form input[type=email]:focus{
    background-color:rgba(0,0,0,0);
    border:solid 1px white;
    color:white;
}
.form input[type=submit]{
    width:100px;
    padding:10px;
    border-radius:10px;
    border:none;
    font-family: ten;
    font-size:16px;
    background-color:white;
    color:black;
    cursor:pointer;
    transition: 0.5s;
}
.form input[type=submit]:hover{
    background-color:rgba(0,0,0,0);
    border:solid 1px white;
    color:white;
}
.form textarea{
    width:280px;
    height:130px;
    padding:10px;
    border-radius:10px;
    border:none;
    font-family: ten;
    font-size:16px;
    resize: none;
    background-color:white;
}
.form textarea:focus{
    background-color:transparent;
    border:solid 1px white;
    color:white;
}

/********************TABLET VIEW**************/
@media(max-width:1569px){
html, body{
    overflow:hidden;
}
html {
    margin:0;
    padding:0;
    background:url(../images/chalkboardbg.jpg) no-repeat center center fixed;
    background-size:cover;
}
.mobilebg{
    display:none;
}
.name{
    font-family:chalkLine;
    color:white;
    font-size:30px;
    width:270px;
    text-align: center;
    position:absolute;
    top:50px;
    left:20px;
    transform: rotate(-20deg);
    font-weight:bold;
}
.name span{
    font-size:25px;
    font-family:eraserDust;
    font-weight:100;
    text-decoration: underline;
}
.linkedin{
    width:170px;
    height:50px;
    position:absolute;
    top:20px;
    right:20px;
    transform: rotate(5deg);
    transition:0.3s;
}
.linkedin:hover{
    width:180px;
    height:55px;
    transform: rotate(-5deg);
}
.hamburger{
    display:none;
}
.mobilenav{
    display:none;
}
.nav {
    position:fixed;
    left:50px;
    top:240px;
    width:300px;
    transform: rotate(5deg);
}
.nav a {
    text-decoration:none;
    color:white;
    font-family:pigment;
    font-size:25px;
    display:block;
    padding:20px;
    transition:0.5s;
}
.nav a:hover{
    color:gray;
}
.drawHere{
    font-family:ten;
    font-size:70px;
    position:absolute;
    left:50%;
    top:50%;
    width:420px;
    height:110px;
    margin-left:-210px;
    margin-top:-55px;
    color:rgba(255,255,255,0.1);
    text-align: center;
    transition:0.5s;
}
.successError{
    font-family:ten;
    font-size:50px;
    position:absolute;
    left:50%;
    top:25%;
    width:450px;
    height:280px;
    margin-left:-225px;
    margin-top:-65px;
    color:rgba(255,255,255,1);
    text-align: center;
    transition:0.5s;
}
.clear {
    position:fixed;
    right:10px;
    bottom:5px;
    font-family: neatChalk;
    font-size:10px;
    border:none;
    color:white;
    background:none;
}
.clear:hover{
    color:gray;
}
.stroke select, .color select, .clear{
    cursor:pointer;
    padding:3px;
}
.stroke{
    position:fixed;
    right:100px;
    bottom:5px;
    height:30px;
    width:170px;
    font-size:10px;
    font-family: neatChalk;
    border:none;
    color:white;
    background:none;
}
.stroke select{
    font-family: neatChalk;
    font-size:10px;
    background:none;
    color:gray;
    border:solid white 2px;
}
.color{
    position:fixed;
    right:230px;
    bottom:5px;
    height:30px;
    width:220px;
    font-size:10px;
    font-family: neatChalk;
    border:none;
    color:white;
    background:none;
}
.color select{
    font-family: neatChalk;
    font-size:10px;
    background:none;
    color:gray;
    border:solid white 2px;
}
.myWork{
    position:absolute;
    top:50%;
    left:50%;
    width:470px;
    height:0px;
    margin-left:-235px;
    margin-top:-250px;
    text-align:center;
    opacity:0;
    border:20px solid transparent;
    border-image: url(../images/border.png) 30;
    padding:15px;
    display:none;
}
.workTitle{
    font-family:chalkLine;
    font-size:22px;
    color:white;
}
.myprojects{
    float:left;
    width: 200px;
    height:200px;
    border:solid 2px;
    margin:14px;
    border-radius:10px;
    overflow:hidden;
}
.myprojects img{
    filter: grayscale(1);
    transition:0.5s;
}
.myprojects img:hover{
    filter: grayscale(0);
}

/* Student Work */
.studentWork{
    position:absolute;
    top:50%;
    left:50%;
    width:470px;
    height:0px;
    margin-left:-235px;
    margin-top:-250px;
    text-align:center;
    opacity:0;
    border:20px solid transparent;
    border-image: url(../images/border.png) 30;
    padding:15px;
    display:none;
}
.studentTitle{
    font-family:chalkLine;
    font-size:22px;
    color:white;
}
.studentprojects{
    float:left;
    width: 200px;
    height:200px;
    border:solid 2px;
    margin:14px;
    border-radius:10px;
    overflow:hidden;
}
.studentprojects img{
    filter: grayscale(1);
    transition:0.5s;
}
.studentprojects img:hover{
    filter: grayscale(0);
}
/* Teaching Demos */
.teachingDemos{
    position:absolute;
    top:50%;
    left:50%;
    width:470px;
    height:0px;
    margin-left:-235px;
    margin-top:-250px;
    text-align:center;
    opacity:0;
    border:20px solid transparent;
    border-image: url(../images/border.png) 30;
    padding:15px;
    display:none;
}
.videoTitle{
    font-family:chalkLine;
    font-size:22px;
    color:white;
}
.teachingvid{
    float:left;
    width: 200px;
    height:200px;
    border:solid 2px;
    margin:14px;
    border-radius:10px;
    overflow:hidden;
}
.teachingvid img{
    filter: grayscale(1);
    transition:0.5s;
}
.teachingvid img:hover{
    filter: grayscale(0);
}
/* Certifications */
.certs{
    position:absolute;
    top:50%;
    left:50%;
    width:470px;
    height:0px;
    margin-left:-235px;
    margin-top:-250px;
    text-align:center;
    opacity:0;
    border:20px solid transparent;
    border-image: url(../images/border.png) 30;
    padding:15px;
    display:none;
}
.certTitle{
    font-family:chalkLine;
    font-size:22px;
    color:white;
}
.cert{
    float:left;
    width: 200px;
    height:200px;
    border:solid 2px;
    margin:14px;
    border-radius:10px;
    overflow:hidden;
}
.cert img{
    filter: grayscale(1);
    transition:0.5s;
}
.cert img:hover{
    filter: grayscale(0);
}
/* Contact Me */
.contactMe{
    position:absolute;
    top:50%;
    left:50%;
    width:470px;
    height:0px;
    margin-left:-235px;
    margin-top:-250px;
    text-align:center;
    opacity:0;
    padding:15px;
    display:none;
}
.contactTitle{
    font-family:chalkLine;
    font-size:22px;
    color:white;
}
.form{
    text-align:left;
    width:300px;
    position:absolute;
    top:70px;
    left:50%;
    margin-left:-150px;
}
.form input[type=text], .form input[type=email]{
    width:280px;
    padding:10px;
    border-radius:10px;
    border:none;
    font-family: ten;
    font-size:16px;
    transition:0.5s;
}
.form input[type=text]:focus, .form input[type=email]:focus{
    background-color:rgba(0,0,0,0);
    border:solid 1px white;
    color:white;
}
.form input[type=submit]{
    width:100px;
    padding:10px;
    border-radius:10px;
    border:none;
    font-family: ten;
    font-size:16px;
    background-color:white;
    color:black;
    cursor:pointer;
    transition: 0.5s;
}
.form input[type=submit]:hover{
    background-color:rgba(0,0,0,0);
    border:solid 1px white;
    color:white;
}
.form textarea{
    width:280px;
    height:130px;
    padding:10px;
    border-radius:10px;
    border:none;
    font-family: ten;
    font-size:16px;
    font-size:16px;
}
.form textarea:focus{
    background-color:rgba(0,0,0,0);
    border:solid 1px white;
    color:white;
}
}

/***********MOBILE VIEW***************/
@media(max-width:1055px){
html, body{
    overflow:auto;/* hidden makes it not scroll on mobile devices*/
}
html {
    margin:0;
    padding:0;
}
.mobilebg{
    display:inline;
    position:fixed;
    top:50%;
    left:50%;
    min-width:100%;
    min-height:100%;
    transform:translate(-50%,-50%);
    zoom:10%;
    z-index:-1000;
}
.name{
    font-family:chalkLine;
    color:white;
    font-size:20px;
    width:100%;
    height:65px;
    text-align: center;
    margin-left:-20px;
    position:absolute;
    top:25px;
    transform: rotate(-5deg);
    font-weight:bold;
}
.name span{
    font-size:16px;
    font-family:eraserDust;
    font-weight:100;
    text-decoration: underline;
}
.linkedin{
    width:80px;
    height:30px;
    position:absolute;
    top:20px;
    right:5px;
    transform: rotate(2deg);
    transition:0.3s;
    z-index: 1000;
}
.linkedin:hover{
    width:110px;
    height:40px;
    transform: rotate(-2deg);
}
.hamburger{
    display:block;
    font-size:45px;
    cursor:pointer;
    position:fixed;
    top:10px;
    left:20px;
    color:white;
}
.close{
    font-size:55px;
    cursor:pointer;
    position:absolute;
    top:10px;
    left:27px;
    color:white;
}
.mobilenav{
    display:block;
    position:fixed;
    left:0px;
    top:0px;
    width:0px;
    height:100%;
    overflow:hidden;
    transform: rotate(-1.25deg);
    transition:0.5s;
    background-color:black;
    z-index:1000;
    padding-top:70px;
}
.nav {
    display:none;
}
.mobilenav a {
    text-decoration:none;
    color:white;
    font-family:pigment;
    font-size:22px;
    display:block;
    padding:20px;
    width:220px;
    transition:0.5s;
    margin-left:10px;
}
.mobilenav a:hover{
    color:gray;
}
.drawHere{
    display:none;
    opacity:0;
    transition:0.5s;
}
.successError{
    font-family:ten;
    font-size:35px;
    position:absolute;
    left:50%;
    top:30%;
    width:250px;
    height:260px;
    margin-left:-125px;
    margin-top:-65px;
    color:rgba(255,255,255,1);
    text-align: center;
    transition:0.5s;
}
.clear {
    display:none;
}
.clear:hover{
    color:gray;
}
.stroke select, .color select, .clear{
    display:none;
}
.stroke{
    display:none;
}
.stroke select{
    display:none;
}
.color{
    display:none;
}
.color select{
    display:none;
}
.myWork{
    position:absolute;
    top:130px;
    left:0;
    width:100%;
    height:100%;
    margin-left:0px;
    margin-top:0px;
    text-align:center;
    opacity:1;
    border:solid 2px white;
    border-radius:0;
    border-right:none;
    border-left:none;
    padding:10px;
    display:inline-block;
    overflow:auto;
}
.workTitle{
    font-family:chalkLine;
    font-size:18px;
    color:white;
}
.myprojects{
    float:none;
    width: 200px;
    height:200px;
    border:solid 2px;
    margin:15px 5px 5px 5px;
    display:inline-block;/*allows the text-align center to center the divs*/
}
.myprojects img{
    filter: grayscale(0);
}
/* Student Work */
.studentWork{
    position:absolute;
    top:130px;
    left:0;
    width:100%;
    height:0px;
    margin-left:0px;
    margin-top:0px;
    text-align:center;
    opacity:1;
    border:solid 2px white;
    border-radius:0;
    border-right:none;
    border-left:none;
    padding:10px;
    display:none;
    overflow:auto;
}
.studentTitle{
    font-family:chalkLine;
    font-size:18px;
    color:white;
}
.studentprojects{
    float:none;
    width: 200px;
    height:200px;
    border:solid 2px;
    margin:15px 5px 5px 5px;
    display:inline-block;
}
.studentprojects img{
    filter: grayscale(0);
}
/* Teaching Demos */
.teachingDemos{
    position:absolute;
    top:130px;
    left:0;
    width:100%;
    height:0px;
    margin-left:0px;
    margin-top:0px;
    text-align:center;
    opacity:1;
    border:solid 2px white;
    border-radius:0;
    border-right:none;
    border-left:none;
    padding:10px;
    display:none;
    overflow:auto;
}
.videoTitle{
    font-family:chalkLine;
    font-size:18px;
    color:white;
}
.teachingvid{
    float:none;
    width: 200px;
    height:200px;
    border:solid 2px;
    margin:15px 5px 5px 5px;
    display:inline-block;
}
.teachingvid img{
    filter: grayscale(0);
}
/* Certifications */
.certs{
    position:absolute;
    top:130px;
    left:0;
    width:100%;
    height:0px;
    margin-left:0px;
    margin-top:0px;
    text-align:center;
    opacity:1;
    border:solid 2px white;
    border-radius:0;
    border-right:none;
    border-left:none;
    padding:10px;
    display:none;
    overflow:auto;
}
.certTitle{
    font-family:chalkLine;
    font-size:18px;
    color:white;
}
.cert{
    float:none;
    width: 200px;
    height:200px;
    border:solid 2px;
    margin:15px 5px 5px 5px;
    display:inline-block;
}
.cert img{
    filter: grayscale(0);
}
/* Contact Me */
.contactMe{
    position:absolute;
    top:130px;
    left:0;
    width:100%;
    height:0;
    margin-left:0px;
    margin-top:0px;
    text-align:center;
    opacity:1;
    border:solid 2px white;
    border-radius:0;
    border-right:none;
    border-left:none;
    padding:10px;
    display:none;
}
.contactTitle{
    font-family:chalkLine;
    font-size:18px;
    color:white;
}
.form{
    text-align:left;
    width:300px;
    position:absolute;
    top:50px;
    left:50%;
    margin-left:-150px;
}
.form input[type=text], .form input[type=email]{
    width:280px;
    padding:10px;
    border-radius:10px;
    border:none;
    font-family: ten;
    font-size:16px;
    transition:0.5s;
}
.form input[type=text]:focus, .form input[type=email]:focus{
    background-color:rgba(0,0,0,0);
    border:solid 1px white;
    color:white;
}
.form input[type=submit]{
    width:100px;
    padding:10px;
    border-radius:10px;
    border:none;
    font-family: ten;
    font-size:16px;
    background-color:white;
    color:black;
    transition: 0.5s;
}
.form input[type=submit]:hover{
    background-color:rgba(0,0,0,0);
    border:solid 1px white;
    color:white;

}
.form textarea{
    width:280px;
    height:130px;
    padding:10px;
    border-radius:10px;
    border:none;
    font-family: ten;
    font-size:16px;
}
.form textarea:focus{
    background-color:rgba(0,0,0,0);
    border:solid 1px white;
    color:white;
}
}