/* Style to 1 main page*/
.quote {
    font-style: italic;
}

body {
    font-family: 'Noto Sans', sans-serif;
    background-color: #ffffff;
    color: #0F3057;
}

h1, h2, h3, h4 {
    font-family: 'Roboto Mono', monospace;
}

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.container {
    max-width: 840px;
    margin: 0 auto;
}

.container > div {
    margin: 20px auto;
}

.intro{
    text-align: center;
}



.projects-heading {
    text-align: center;
}

.projects-grid {
    display: grid;
    grid-template-columns: 50% 50%;
}


@media (max-width: 650px) {
    .projects-grid {
        grid-template-columns: 100%;
    }
}

@media (max-width: 480px) {
    .projects-grid {
        grid-template-columns: 100%;
    }
}

/*Resizing an image using media queries*/
@media screen and ( max-width: 1024px ) {
    img.profile-picture { width: 200px; }
    }
@media screen and ( min-width:1025px ) and ( max-width: 1280px ) {
    img.profile-picture { width: 300px; }
    }
@media screen and ( min-width: 1081px ) {
    img.profile-picture { width: 400px; }
    }
img.profile-picture { height: auto; }



.links-and-contact {
    display: grid;
    grid-template-columns: 100%;
}

.links {
    justify-self: center;
}

.links-list {
    list-style: none;
    padding: 0;
}
@media (max-width: 650px) {
    .links-and-contact {
        grid-template-columns: 100%;
    }
}

.profile-picture {
    border-radius: 1%;
    width: 640px;
    height: 480px;
    box-shadow: 0 5px 7px 0 rgba(34, 60, 80, .16);
    transition: all ease-in-out .2s;
}

.profile-picture:hover {
    box-shadow: 0 8px 12px 0 rgba(34, 60, 80, .16);
}

/* email and submit button
form input, textarea {
    padding: 5px;
    border-radius: 5px;
    width: 240px;
}

form {
    width: 250px;
    margin: 0 auto;
}

form input[type="submit"] {
    width: 250px;
    background-color: #FDB827;   
}

.submit-button-wrapper {
    margin: 20px 0;
}
*/

.project-image {
    justify-self: center;
    padding: 4%;
    border-radius: 5px;
    box-shadow: 0 4px 6px 0 rgba(34, 60, 80, .16);
    transition: all ease-in-out .2s;
}

.project-image:hover {
    filter: brightness(.75);
    box-shadow: 0 8px 12px 0 rgba(34, 60, 80, .16);
}

.project-image-wrapper {
    justify-self: center;
    padding: 4%;
    position: relative;

}

.project-image-wrapper:hover > h4 {
    visibility: visible;
}

.project-image-wrapper > h4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    visibility: hidden;
    z-index: 2;
    transition: all ease-in-out .2s;
}

/* Style to Project 1 page*/

.container2 {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.container2 > div {
    margin: 20 auto;
}

.description {
    font-family: 'Noto Sans', sans-serif;
    font-style: italic;
    text-align: center;
    color: #0F3057;

}
.container3 {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.container3 > div {
    margin: 20 auto;
}

/*Sized iframe using media queries*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px)  
    and (-webkit-min-device-pixel-ratio: 3) {
    iframe {
        background: #999;
        width: 100%;
    }
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1000px) {
    iframe {
        background: #999;
        width: 100%;
    }
}

@media only screen and (min-device-width : 1025px) and (max-device-width : 1280px) {
    iframe {
        width: 300px;
        background: #999;
        width: 100%;
    }
}

@media only screen and (min-device-width : 1081px) {
    iframe {
        width: 400px;  
        background: #999;
        width: 100%;
    }
}
@media only screen and (min-device-width : 1024px) {
    iframe {
        width: 200px;  
        background: #999;
        width: 100%;
    }
}  
iframe.container3 {height: auto;}


/* Style to Project 1 page*/
.profile-picture1 {
    border-radius: 1%;
    width: 440px;
    height: 340px;
    box-shadow: 0 5px 7px 0 rgba(34, 60, 80, .16);
    transition: all ease-in-out .2s;
}

.profile-picture1:hover {
    box-shadow: 0 8px 12px 0 rgba(34, 60, 80, .16);
}

/*Resizing an image using media queries*/
@media screen and ( max-width: 1024px ) {
    img.profile-picture1 { width: 200px; }
    }
@media screen and ( min-width:1025px ) and ( max-width: 1280px ) {
    img.profile-picture1 { width: 300px; }
    }
@media screen and ( min-width: 1081px ) {
    img.profile-picture1 { width: 400px; }
    }
img.profile-picture1 { height: auto; max-width: 100%;}