:root {
    --primary-color: rgb(42, 31, 68);
    --secondary-color: rgb(207, 157, 96);
    --tertiary-color: rgb(98, 106, 121);
}

body{
    background-color: whitesmoke;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.container{
    margin: 60px;
}

.heading{
    text-align: center;
    color: var(--tertiary-color);
}

.project1-div{
    margin: 70px;
    border: 5px solid var(--tertiary-color);
}

.project1-div .title{
    background-color: var(--tertiary-color);
}

.project1-div .title > a{
    color: var(--secondary-color);
    text-decoration: none;
    font-size: 25px;
    padding-left: 55px;
}

.project1-div .repo-btn{
    background-color: var(--tertiary-color);
}

.project1-div .repo-btn >a{
    text-decoration: none;
    color: whitesmoke;
    font-size: 20px;
}

.project1-div .repo-btn > a:hover{
    color: var(--secondary-color);
   }

.project2-div{
    margin: 70px;
    border: 5px solid var(--secondary-color);
}

.project2-div .title{
    background-color: var(--secondary-color);
}

.project2-div .title > a{
    color: var(--tertiary-color);
    text-decoration: none;
    font-size: 25px;
    padding-left: 55px;
}

.project2-div .repo-btn{
    background-color: var(--secondary-color);
}

.project2-div .repo-btn >a{
    text-decoration: none;
    color: whitesmoke;
    font-size: 20px;
}

.project2-div .repo-btn > a:hover{
 color: var(--tertiary-color);
}

.title{
    height: 35px;
}

.body{
    padding-top: 10px;
    text-align: center;
    background-color: whitesmoke;
}


p{
    text-align: left;
    padding-left: 10px;
    margin-left: 70px;
    margin-right: 70px;
}

.screenshot{
    width: 900px;
    height: 450px;
}