.projects-option {
    width:50%;
    position:relative;
}
.projects-option img{
    width:100%;
    margin:auto;
    border:1px solid black;
    border-radius:10px;
    display:block;
}
.projects-option h1 {
    margin: 20px auto;
    color: #b21bac;
    font-size: 28px;
    font-weight: normal;
    line-height:34px;
    text-align:center;
}
.projects-option a>div{
    position:relative;
    width:90%;
    margin: auto;
}
.projects-option a>div>h1 {
    position:absolute;
    width:100%;
    bottom:0px;
    text-align: center;
    font-size:72px;
    opacity:0.4;
    color:white;
    text-shadow: 6px 6px 8px rgba(0,0,0,0.5);
    line-height:103px;
    font-weight:normal;
}
.projects-option p {
    width: 80%;
    text-align:justify;
    margin: 20px auto auto;
}
.project-options-container{
    display:flex;
}
.project {
    display:flex;
}
.project span {
    position: absolute;
}
.project-text {
    width:30%;
}
.project-text img {
    padding-left: 20px;
    display:block;
    margin: 0 auto;
    height:16px;
}
.project-text p{
    text-align:justify;
    margin: 10px 20px auto;
    font-size:14px;
}


.project-text h1{
    text-align:center;
    color: #959595;
    font-size:16px;
    margin-top:5px;
    width: 100%;
}
.divider{
    margin-bottom:10px;
}
.project-images {
    width:70%;
    margin:auto;
}
.project-images img{
    width:32%;
    margin:10px auto;
    cursor:pointer;
    border:1px solid black;
    border-radius: 10px;
}
.project-images>img:hover{
    opacity:0.8;
}
#page-title {
    font-size:24px;
    line-height:29px;
    font-style: italic;
    margin: 30px auto;
    width:90%;
}
#page-title h1{
    color: #823EB9;
    text-align: center;
}
#moreprojects{
    margin-top: 25px;
    display:flex;
    justify-content: center;
}
#moreprojects a{
    width:33%;
    text-align: center;
    line-height:50px;
    margin:10px;
    height:50px;
    border: 3px solid gray;
    text-decoration: none;
    color:black;
    white-space:nowrap;
}
#moreprojects a:hover{
    background-color: #823EB9;
    color:white;
}
#topcontent {
    padding-top:20px;
}
.page-marker {
    position:fixed;
    border-bottom:2px solid #a6a6a6;
    background-color:white;
    height:33px;
    margin-top:-10px;
    margin-left:auto;
    width:100%;
    margin-bottom:10px;
    z-index:998;
    display:flex;
}
.page-marker div {
    width: 100%;
}
#page-marker {
    width:16.4%;
    border:2px solid #a6a6a6;
    height:33px;
    margin-left:33.33%;
    margin-top:-2px;
    line-height:2.1em;
    text-align:center;
    text-decoration: none;
    color: #a6a6a6;
    z-index:999;
    position:fixed;
    background-color: white;
}
.modal {
    display:none;
    position:fixed;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background-color: rgba(0,0,0,0.9);
    z-index:1000;
}
.modal-content{
    margin-top:10%;
    margin-left:15%;
    width:70%;
    height:60%;
    position:relative;
}
.modal-content img {
    max-width:100%;
    position:absolute;
    display:none;
    top: 50%;
    transform: translateY(-50%);
}
.prevButton, .nextButton{
    position:absolute;
    color: white;
    font-size:60px;
    top:40%;
    cursor:pointer;
}
.prevButton {
    left:-10%;
}
.nextButton {
    right:-10%;
}
.closeButton {
    font-size:72px;
    position: absolute;
    color:white;
    right:25px;
    cursor:pointer;
    z-index:1001
}
@media screen and (max-width:800px){
    .prevButton {
        left: -15%;
    }
    .nextButton {
        right: -15%;
    }
    .modal-content {
        width:70%;
        margin-left:15%;
    }
}
@media screen and (min-width:1000px){
    #page-marker{
        width:164px;
        margin-left:333.3px;
    }
    .page-marker{
        width:1000px;
        padding:auto;
    }
    #page-title {
        width:900px;
    }
}
@media screen and (max-width:650px){
    .project-options-container{
        display:block;
        margin:auto;
        width:80%;
    }
    .projects-option {
        width:100%;
    }
    .project {
        display: inline-block;
        width:100%;
    }
    .project-images,.project-text{
        width:100%;
        float:right;
        display:inline-block;
    }
    .project-text{
        padding-bottom:10px;
    }
    .project-images img {
        width:31.5%;
        padding:0;
        margin:0;
    }
    .prevButton,.nextButton,.closeButton{
        font-size:60px;
    }
    .closeButton {
        right:25px;
    }
    #page-marker {
        font-size:0.5em;
        line-height:3.2em;
        height:22px;
        margin-top:-2px;
    }
    .page-marker{
        height:22px;
        margin-top:-30px;
    }
    .projects-option a>div>h1 {
        font-size:60px;
        line-height:80px;
    }
    #moreprojects a {
        width: 80%;
    }
}