/*
theme name: Sean Dennis Profile
text domain: 
version : 1.0
description: 
tags:
author: Sean Dennis
author url: 
*/

* {
    padding: 0;
    margin: 0;
    transition: 1s;
}

header {

}

body {
    background-image: url("https://sdennisportfolio.com/wp-content/uploads/2023/06/code_photo.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

footer {
    background-color: #071c5d;
    height: 50px;
    text-align: center;
}

footer a {
    font-size: 25px;
    position: relative;
    top: 10px;
    color: white;
    text-decoration: none;
}

a {
    text-decoration: none;
    color: white;
}

header ul {
    position: absolute;
    right: 30px;
}

header li {
    display: inline-block;
    color: white;
    margin: 15px 10px 2px 1px;
    transition: 1s;
}

header li:hover {
    background-color: red;
}

.contact_button {
    font-size: 6vh;
    background-color: red;
    padding: 2px !important;
}

#contact_background {
    background-color: #040404;
    padding: 8px;
    border-radius: 20px;
    transition: 1s;
}

#contact_background:hover {
    background-color: red;
}

/*hero block*/
.hero_block {
    height: 100vh;
}

.name {
    background-color: #04040495;
    color: white;
    height: 100%;
    left: 45%;
}

.hero_title {
    text-align: center;
    position: absolute;
    top: 40vh;
    width: 100%;
}

.hero_title h1 {
    font-size: 10vh;
}

.hero_title h2 {
    font-size: 40px;
}
/*end hero block */

/*design block*/
.design_block {
    height: 100vh;
    background-color: white;
    display: grid;
    grid-template-columns: auto auto;
    padding: 0px 5%;
}

.design_name {
    padding: 40vh 20px 0vh 20px;
    text-align: center;
}

.design_name h2, .design_name p {
    font-size: 5vh;
}

.design_block img {
    margin: 8vh 30px 0vh 30px;
    padding: 20px 30px 30px 20px;
    background-color: #1955ab;
    border-radius: 15px;
    box-shadow: 8px 6px 3px #888888;
}
/*end design block*/


/*functionality block*/
.functionality_block {
    background-color: #04040495;
    padding: 30px 10%;
    height: 100vh;
    display: grid;
    grid-template-columns: auto auto;
    text-align: center;
    width: 80%;
}

.functionality_block img {
    background-color: #1955ab;
    margin: 20vh 0px;
    padding: 20px;
    border-radius: 20px;
}

.functionality_name {
    color: white;
    padding: 40vh 0px;
}

.functionality_name h2, .functionality_name p {
    font-size: 5vh;
}
/*end functionality block*/

/*security block*/
.security_block {
    height: 100vh;
    background-color: white;
    display: grid;
    grid-template-columns: auto auto;
    padding: 0px 15%;
}

.security_name {
    text-align: center;
    padding: 40vh 100px 0% 20px;
}

.security_name h2, .security_name p {
    font-size: 5vh;
}

.security_block img {
    margin: 15vh 20px;
    border: 2px solid black;
    border-radius: 15px;
    box-shadow: 8px 6px 3px #888888;
}
/*end security block*/


/*contact block*/
.contact_block {
    padding: 100px 30%;
    height: 60vh;
    color: white;
    background-color: #04040495;
}

.contact_form {
    border-radius: 15px;
    background-color: #1955ab;
    width: 500px;
    padding: 20px;
}

.email_contact_info {
    display: grid;
    grid-template-columns: auto auto;
}

#contact_textarea, #contact_button {
    width: 100%;
}
/*end contact block*/


/*projects block*/
.projects_block {
    height: 100vh;
    background-color: #04040495;
}

/*end projects block*/

body img {
    width: 80%;
    max-height: 80vh;
}

.button {
    font-size: 5vh;
    padding: 8px;
    border-radius: 20px;
}

@media (max-width: 800px){
    .functionality_block, .security_block, .design_block {
        grid-template-columns: auto;
        height: 125vh;
    }

    .security_name, .functionality_name, .design_name {
        padding: 15vh 0vh;
        margin: 0px;
    }

    body img {
        padding: 0px;
        margin: 0px
    }
}

@media (max-width: 415px) {
    .security_name, .functionality_name, .design_name {
        padding: 10px 0vh;
        margin: 0px;
    }

    .functionality_block, .security_block, .design_block {
        height: 100vh;
    }

    .button {
        font-size: 4vh;
    }
}

@media (max-width: 380px) {
    .security_name, .functionality_name, .design_name {
        padding: 5px 0vh;
        margin: 0px;
    }

    .button {
        font-size: 3vh;
    }

    .contact_button {
        font-size: 4vh;
    }

    .design_block, .functionality_block {
        height: 85vh;
    }

    .security_block {
        height: 70vh;
    }
}

@media (max-width: 360px) {
    .design_block {
        padding: 0px;
        margin-left: 0px;
    }
}