*{
    box-sizing:border-box;
}
/* links */
a {
    outline:transparent;
    text-decoration: none;

}
a:link {
    color:#214248;
}
a:visited {
        color:#1f2b20;

}
a:hover {
    color:#B0C4B1;
}
a:active {
        color: #6a816b;

}           

body{
    background-color: #EDEDE9;
    font-family: monospace; 
    margin:0;
}
.matchestwo {
    display:flexbox;
    z-index:1;
    position:fixed;
    top:10px;
    padding-bottom:15px;
    padding-top:20px;
    padding-left:20px;
}

.blurb {
    position:absolute;
    top:45px;
    right:70px;
    color:#d5bdaf
}
.animation {
    position:absolute;
    width:50px;
    height:40px;
    animation: walking 30s infinite linear;
}

.background {
    display: flex;
    position:absolute;
    width:250px;
    margin-top:250px;
    z-index:-1;
}
.container {
    display:flexbox;
    padding:10px;
}

.box {
    display:inline;
    border: solid 1px #D6CCC2; 
    padding:2px;
    color:#d5bdaf;
}
.boxtwo {
    background-color:#DEDBD2;
    border: solid 1px #214248; 
    display:inline-block;
    padding:2.5px;
    color: #214248;
}
.boxthree {
    display:inline;
    border: solid 1px #D6CCC2; 
    padding:2px;
    color:#214248;
}
.box4 {
    width:120px;
    height:200px;
    margin:5px;
    background-color:#6a816b;
    border:2px solid #214248;
    display:inline-block;
    padding:5px;
    color:#DEDBD2
}

.box4:hover {
    background-color:#B0C4B1;
}

.bookbox {
    width:150px;
    height:150px;
    margin:10px;
    background-image:url(https://i.postimg.cc/bwmgjSk3/500.webp);
    background-repeat:no-repeat;
    background-size: cover;
    display:inline-block;
    padding:5px;
    color:#DEDBD2
}

.bookbox:hover {
    background-image:url(https://i.postimg.cc/rRkx4M7v/windmill.jpg);
    cursor:pointer;
}

.box5 {
    width:150px;
    height:150px;
    margin:10px;
    background-image:url(https://i.postimg.cc/bwmgjSk3/500.webp);
    background-repeat:no-repeat;
    background-size: cover;
    display:inline-block;
    padding:5px;
    color:#DEDBD2
}

.box5:hover {
    background-image:url(https://i.postimg.cc/rRkx4M7v/windmill.jpg);
    cursor:pointer;
}


img {
    width: 100%;
    height: 100%;
    object-fit: cover;   
    z-index:60;
}

.bg {
  position: absolute; 
  left: 0; 
  width: 50%; 
  height: 100vh;
}
.bgtwo {
    position: absolute; 
    right: 0; 
    width: 50%; 
    height: 100vh; 
    
}

.link {
    position:absolute;
    margin-top:460px;
}

h2 {
    margin-left:25px;
    font-size: 16px;
    color:#214248;
}
.link {
    position:fixed;
    color:#214248;
    top:90px;
    z-index:2;
}


.biocontainer {
    display:flex;
    position:fixed;
    justify-content: center;
    width:100vw;
    height:auto;
    z-index:2;
}
.bio {
    position:fixed;
    color:#214248;
    top:85px;
    padding:20px 15px;
    width:300px;
    height:400px;
    text-align:center;
    background-color:#DEDBD2;
    border-top: 3px solid #214248;

}

.resumecontainer{
    display:grid;
    height:300px;
    place-items:center;
    background-color:#EDEDE9;
}

.resume {
    width:500px;
    position: relative;
    margin-top: 11vh;
    border:3px solid #214248;
}

.popup{
    display: none;
    position:relative;
    margin-top:5%;  
    margin-left:5%;
    width:30%;
    height:30%;
    padding:2px;
    z-index:10;
}

/* Show image on hover */
.hoverlink:hover .popup {
  display: block;
}


.workscontainer {
    z-index:4;
    position:fixed;
    top:475px;
    color: #ffffff;
    display:flex;
    flex-direction:horizontal;
    gap:10px; 
    width:100vw;
    margin: 40px auto;
}
.left, 
.middle, 
.right 
{
    margin-left:20px;
    margin-right:20px;
    margin-top:10px;
    color:#DEDBD2;
}

.left {
    width:60%;
}
.middle {
    width:20%;
}
.right {
    width:20%;
}

.contacting {
    text-align: left;
}
.bioing {
    text-align: left;
}


ul {
    list-style-type: none;
    margin:0;
    margin-top: 5px;
    padding-left: 10px;
}
li {
    padding:5px;
    margin-left:10px;
}

.practice {
    margin-top:15px;
    margin-left:10px;
}
.year{
    margin-top:15px;
    margin-left:10px;
}

#pad {
    margin-top:10px;
    margin-left:5px;
}
.works {
    a { color:#DEDBD2!important; }
    a:hover { color:#214248!important;}
    margin-left:-5px;
}


h1 {
    margin:0;
    
    padding-left:15px;
    font-size: 13px;
    font-weight:600;
    color:#DEDBD2;

}


p {
    margin:5px;
}

.projectcontainer {
    display:flex;
    justify-content: center;
    background-color:#EDEDE9;

 /*    background-image:url(https://i.postimg.cc/qMns938F/DSCF0321-Original.jpg);
    background-repeat:no-repeat;
    background-size: cover; */
    width:100vw;
    height:100vh;
}

.projblurb {
    position:absolute;
    top:95px;
}

.proj {
    display:grid;
    justify-content: space-between;
    align-content: space-evenly;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:10px;
    margin-top:160px;
    margin-bottom:80px;
    }
    

.popup-image {
    display: none;
    position:relative;
    margin-top:-40%;  
    margin-left:30%;
    width:35%;
    height:30%;
    padding:2px;
    z-index:50;
}
/* Show image on hover */
.hover-link:hover .popup-image {
  display: block;
}

.hover-link {
    position:absolute;
    z-index:40;
    

}