body {
    display:flex;
    flex-wrap:wrap;
    margin:0px;
    background-image: url("WebsiteBackground.jpg");
    background-size: cover;
}

/* HEADER*/

.page_header {
    position:fixed;
    display:flex;
    justify-content:space-around;
    width:100%;
    height:110px;
    background-image: linear-gradient(rgb(199, 207, 209), rgb(211, 219, 222));
    border-bottom:2px solid black;
    box-shadow: 0px 10px 10px rgba(100, 100, 100,  0.2);
    align-items: center;
}

/*The title*/

#page_title {
    display:flex;
    margin:0px 0px 20px 40px;
    width:50%;
}

#page_title h1 {
    font-family: 'Amatic SC', cursive;
    color:black;
    font-size:60px;
    font-weight: normal;
}

#underline {
    width:100%;
    height:0px;
    border-bottom:2px black solid;
}

#page_title h3 {
    align-self: flex-end;
    font-size:40px;
    color:black;
}

/*LINKS*/

.vertical-divider {
    width:1px;
    height:110px;
    border-left: 2px solid black;
    margin:25px;
}

.linksbox {
    display:flex;
    justify-content: space-around;
    align-items: center;
}

h3 {
    font-family: 'Amatic SC', cursive;
    font-size:40px;
    font-weight:normal;
    color:black;
    text-decoration:none;
    margin:25px;
}

#current {
    border-bottom: 2px solid darkslategray;
}

a {
    text-decoration:none;
}

/*MAIN BODY*/

.wall {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    width:100%;
    margin: 160px 40px;
}

/*PORTFOLIO STUFF*/

.frame {
    margin:10px;
}

.drawing {
    max-width: 400px;
    max-height: 400px;
    border: 2px solid black;
    transition-duration: 1s;
    margin:10px;
}

/*DON'T SHOW THE TEXT UNLESS YOU CLICK*/

.info {
    display:none;
}

/*BASIC TEXT, P and H2 STYLES*/

p {
    font-family: 'Josefin Slab', serif;
    font-size: 20px;
}

h2 {
    font-family: 'Amatic SC', cursive;
    font-weight:normal;
    padding: 0px;
    margin:0px; 
    font-size:50px;
    margin-top:20px;  
}

/*divider*/
.divider {
    display:flex;
    justify-content:center;
    width: 100%;
    margin:20px;
}

/*the pictures when clicked*/

.clicked {
    position: fixed;
    display:flex;
    justify-content:center;
    align-items:center;
    top:50%;
    transform: translate(-0%, -50%);
    left:0px;
    width:100%;
    height:100%;
    margin:0px;
    padding:20px;
    background-color: rgba(250,250,250,0.5);
}

.clicked .drawing {
    max-width:50%;
    max-height:800px;
    margin:50px;
}

.clicked .info {
    display:flex;
    align-items: center;
    flex-direction:column;
    justify-content:center;
    margin:50px;
    padding:20px;
    background-image:linear-gradient(rgb(199, 207, 209), rgb(211, 219, 222));
    border:2px solid black;
}
/*ABOUT PAGE AND BOXES*/

/*to put other boxes in*/

.framebox {
    display:flex;
    justify-content:space-around;
    align-items: center;
    width:80%;
    margin:50px;
    padding:20px;
}

/*to put pictures in*/

.infobox {
    display:flex;
    justify-content:space-around;
    align-items: center;
    flex-direction:column;
    margin:30px;
    padding:30px;
    background-image:linear-gradient(rgb(199, 207, 209), rgb(211, 219, 222));
    border:2px solid black;
    box-shadow: 0px 10px 10px rgba(100, 100, 100,  0.2);
}  

/*PROJECTS*/

/*to keep the title at the top of the page*/

#projectbox {
    align-items: center;
    flex-direction:column;
}

/*to keep the images together and under the title*/

#projectpicbox{
    display: flex;
    justify-content:space-around;
    flex-direction: row;
    flex-wrap:wrap;
    border: 2px solid black;
    background-color: rgba(227, 231, 232, 0.5);
}

/*the pictures for projects*/
.projectimg {
    height:200px;
    margin-top:10px;
    border: 2px solid black;
}



/*author about */

#authorpic {
    width:300px;
    margin:30px;
    border:2px solid black;
}


/*responsive design*/

/*EVERYTHING BELOW THIS IS FOR CELL PHONES*/

@media screen and (max-width:800px) {
    
    .noscroll{
        overflow: hidden;
    }
    
/*HEADER -responsive*/
    
    .page_header {
        flex-direction: column;
        justify-content:center;
        height:100px;
    }

/*TITLE OF THE PAGE -responsive*/ 

    #page_title {
        justify-content:center;
        width:90%;
        margin:0px;
    }
    
    #page_title h1 {
        font-size:30px;
        margin:0px;
    }
    
    #underline {
        display:none;
    }
    
    #page_title h3 {
        font-size:15px;
        align-self:center;
    }
    
    .vertical-divider {
        display:none;
    }

/*links to other parts of the site - responsive*/
   
    .page_header h3 {
        font-size:15px;
        margin:0px 5px;
    }
    
/* MAIN BODY OF THE PAGE STUFF - responsive*/ 

    .wall {
        width:100%;
        margin: 150px 0px;
    }

/*IMAGES -responsive*/
    
    .frame {
        margin:10px;
    }

    .drawing {
        max-height:150px;
        margin: 0px;
    }

/*ABOUT AND PROJECTS - responsive*/
    
    .projectimg {
        max-height:150px;
    }

    .infobox {
        padding:10px;
    }
    
    .framebox {
        padding:30px;
        width:70%;
        align-items: center;
        flex-direction:column;
    }
    
/*ABOUT*/
    #authorpic {
        width:100%;
    }

/*text -responsive*/
    
    h2 {
        padding: 10px;
        margin:0px;
    }
    
    p {
        font-size:18px;
        margin:20px;
    }

/*when clicked -responsive*/

    .clicked {
        flex-direction:column;
        justify-content:start;
        align-items:center;
        position:fixed;
        left:0px;
        top:0px;
        width:100%;
        height:100%;
        transform: translate(-0%, 0%);
        overflow:scroll;
        margin:0px;
        padding:0px;
        border: none;
        
    }
    
    .clicked .drawing {
        min-width:80%;
        max-width:90%;
        padding:0px;
        
    }
    
    .clicked .info {
        position:static;
        justify-content:flex-start;
        align-items:center;
        padding:0px;
        margin:0px;
        max-width:90%;
    }
}