/* 
Author: Isaiah Earley
File Name: styles.css
Date: 09/24/2022
*/



/* CSS Presets */
* {
    border: 0;
    margin: 0;
    padding: 0;
    color: rgb(250, 250, 250);
    box-sizing: border-box;
}
body {
    background-color: rgb(23, 23, 23);
}
html {
    font-family: Fraunces, serif, sans-serif;
    scroll-behavior: smooth;
}
h1 {
    text-shadow: 5px 5px 6px rgb(23, 23, 23);
}
img {
    max-width: 100%; 
    display: block; 
}
header {
    max-width: 100%;
    text-align: center;
    padding-bottom: 0.5%;
    margin: 20px 80px; 
    border-bottom: 1px;
    border-color: white;
    border-style: solid;
}
caption {
    border: 1px solid rgb(102, 72, 72);
    padding: 1%;
}
table { 
    margin-top: 10%;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 10%;
}
table, td, th {
    padding: .5em;
    border: 0.1em solid rgb(126, 93, 93);
}
th {
    background-color: rgb(80, 56, 56);
}
tr {
    padding: 1%;
}
footer {
    border-top: 1px solid white;
    margin: 0% 6% 0% 6%; 
    padding: 1%;
}
#footer1 a, #footer3 a{
    color: rgba(250, 250, 250, .45);
}
.no-decor {
    text-decoration: none;
}
.corner {
    border-radius: 30px;
}    
.small-corner {
    border-radius: 0.375px;
}
.inner-corner {
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}
.shift {
    text-decoration: none;
    position: relative;
    bottom: 10px; 
}
.clear {
    clear: left;
}
.contact-img-mobile {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8%;
}
.contact-img-tablet-desktop { 
    max-width: 30%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1%;
}
.rgb-border {
    background: linear-gradient(217deg, rgba(255, 0, 0, 0.6), rgba(255, 0, 0, 0) 80.71%), 
                linear-gradient(127deg, rgba(0, 255, 0, 0.6), rgba(0, 255, 0, 0) 80.71%),
                linear-gradient(336deg, rgba(0, 0, 255, 0.6), rgba(0, 0, 255, 0) 80.71%);
}
#form {
    margin: 10%;
}
.grey-box h1{
    text-align: left;
}
.guess {
    font-size: 1.2em;
    font-style: italic;
    background-color: rgba(237, 191, 79, .7);
}

article ul {
    line-height: 2em;
}
article li {
    list-style-type: none;
    padding-left: 4%;
}
.bg-none {
    background-color: transparent;
}
.indent {
    color: rgb(82, 160, 173);
    font-size: 1.5em;
    font-family: Georgia;
}
#footer1 a:hover, #footer3 a:hover {
    color: white;
}
#blog {
    width: 80%;
    background:  
    linear-gradient(127deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 50.71%), 
    linear-gradient(227deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 10.71%),
    linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 60.71%);
    opacity: 0.5;
    margin: 1%; 
    padding: 3%;  
    text-align: left;
    font-family: 'Comfortaa';
    transition: .7s;
}
#blog:hover {
    width: 95%;
    opacity: 1;
}
#blog p {
    margin-top: 1.3%;
}
.author {
    font-size: .9em;
    font-style: italic;
}
.blog-id {
    font-weight: bold;
    font-size: .85em;
}
@media all and (min-width: 300px) and (max-width: 558px) {
header {
    max-width: 100%;
    text-align: center;
    margin: 25px 80px; 
    border-bottom: 1px solid white;
    /* Mobile Adjustments */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}
.non-sticky{
    position: relative;
}
/* Style Nav */
/*Style rules for hamburger menu */
.mobile-nav a {
    color: rgba(250, 250, 250, .45);
    text-align: center;
    display: block;
    text-decoration: none;
    margin-top: 4%; 
}
.mobile-nav a.menu-icon {
    display: block;
    position: absolute;
    right: 0;
    top: 0; 

}
nav {
    padding: 0%;
    margin-bottom: 8%;
}
nav ul {
    list-style-type: none;
    margin: 0;
    text-align: center;
}
nav li a { 
    text-decoration: none;
    display: inline-block;
    padding: 0.5em 7em;
    color: rgba(250, 250, 250, .45);
}

/* Show mobile class, hide tablet-desktop class*/
.mobile {
    display: block;
}
.tablet-desktop, #menu-links{
    display: none;
}
.tablet-desktop-table {
    display: none;
}

/* Style Main */
main {
    padding: 2%;
    text-align: center;
}

/* Style Footer */
footer {
    text-align: center;
}

                                            /* Style Attributes class, id */

                                            /* Index */
#persona { 
    display: inline-block;
    margin-bottom: 25px;
    text-align: center;
    height: 250px;
}
#persona img { 
    height: 250px;
}
.grey-box {
    padding: 1.5%;
    margin: 3% 15% 3% 15%;
    box-shadow: 0px 0px 2px white;
    border-radius: 0.375em;
}
#contact-index a {
    margin: 2%;
    font-size: 1.3em;
    padding: 1%;
    text-decoration: none;
    transition: 1s;
    box-shadow: 0px 0px 1px white;
}
#contact-index a:hover {
    box-shadow: 0px 0px 50px white;
}
                                            /* Projects Frame organization*/
.project-box-row figure{
    width: 400px;
    height: 400px;
    margin: 1%;
    padding: 0%;
    display: inline-flex;
    flex-flow: row;
    box-shadow: 0px 0px 4px white;
}
.pic-text {
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, .9);
    width: 100%;
    padding: 10px;
    text-align: center;
    font-size: 1.1em;
}
.frame-pic {
    object-fit: cover;
}
.frame {
    position: relative;
    max-width: 250px;
    max-height: 250px;
    margin: 2% auto;
}

                                                /* Bulletin */
#blog1, #blog2, #blog3 {
    margin: 1%; 
    padding: 5%;
    border-style: solid;
    border-color: white;
    border-width: 1px;
}
.grey-box {
    padding: 1.5%;
    margin: 3% 0%;
    border-radius: 0.375em;
    background-color: rgba(0, 0, 0, .9);
    box-shadow: 3px 3px 0px white;
    transition: .4s;
    max-width: 700px;
}
.grey-box a {
    text-decoration: none;
}
.article-grey-box {
    margin: 3% 3% 3% 3%;
    box-shadow: 0px 0px 2px white;
    border-radius: 0.375em;
    text-align: left;
    font-family: 'Ubuntu Mono';
}
.article-grey-box-bottom {
    margin: 0% 20% 0% 20%;
    box-shadow: 0px 0px 2px white;
    border-radius: 0.375em;
    text-align: center;
    font-family: 'Ubuntu Mono';
    padding-bottom: 0.1%;   
    transition: 0.3s;
}
.article-grey-box-bottom:hover {
    box-shadow: 0px 0px 10px white;
}

article a {
    color: green;
}
article h2 {
    text-align: center;
    padding-top: 3%;
}
article p {
    padding: 4%;
    line-height: 2em;
}
                                                    /* Info */
.form-header {
    border: 1px solid white; 
}                                            
form {
    margin: 0%;
} 
input {
    background-color: rgb(23, 23, 23);
    border: 1px solid white;
    border-radius: 10px;
    padding: 3%;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    width: 100%;
}
.fs1{
    padding: 100px 50px;
    border: 1px solid white;
}
.fs2 {
    margin: 4% 5%;
    border: 1px solid white;
}
.fname, .lname, .email {
    margin-bottom: 5%;
    padding: 2%;
}
#reference {
    margin: 10% 0% 10% 0%;  
    background-color: rgb(23, 23, 23);
}
#comments {
    width: 80%;
    padding: 5%;
    margin: 3%;
    background-color: rgb(23, 23, 23);
    border: 1px solid white;
    border-radius: 5px;
}
.btn {
    background-color: rgb(237, 191, 79);
    color: black;
    grid-column: 1 / span 3;
}
#contact {
    display: block;
    margin: 20% 0% 5% 0%;
}
#contact a {
    margin: 2%;
    font-size: 1.3em;
    padding: 1%;
    text-decoration: none;
    background:
    linear-gradient(127deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 50.71%), 
    linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 30.71%),
    linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 60.71%);
    color:rgba(250, 250, 250, .90);
}
#contact a:hover {
    color: rgb(23, 23, 23);
}
#map {
    height: 200px;
    border: 2px solid rgb(237, 191, 79);
    margin-top: 10%;
}
/* etc */
.rgb-border {
    margin: 5% 0% 5% 0%;
    padding: 1%;
}
.rgb-border h1 {
    text-align: left;
    margin-bottom: 2%;
}
.rgb-border p {
    text-align: left;
    margin-bottom: 2%;
}
.hamburger-icon {
    font-size: 250%;
}
footer {
    border-top: 1px solid white;
    margin: 0% 6% 10% 6%; 
    padding: 1%;
}
}

/* Style rules for tablet viewport */
@media all and (min-width: 559px) and (max-width: 1122px){
/* Style Nav */
nav {
    padding: 0%;
    margin-bottom: 8%;
}
nav ul {
    list-style-type: none;
    margin: 0;
    text-align: center;
}
nav li {
    display: inline-block;
}
nav li a { 
    text-decoration: none;
    padding: 0.5em 2.5em;
    color: rgba(250, 250, 250, .45);
}
nav li a:hover {
   color: white;
}

/* Show tablet-desktop, hide mobile class*/
.mobile, .mobile-nav {
    display: none;
}
.tablet-desktop{
    display: block;
}

/* Style Main */
main {
    padding: 2%;
    text-align: center;
}

/* Style Footer */
footer {
    text-align: center;
}

                                                /* Style Attributes class, id */
                                                    /* Header */
#contact-index a {
    margin: 2%;
    font-size: 1.3em;
    padding: 1%;
    text-decoration: none;
    transition: 1s;
    box-shadow: 0px 0px 1px white;
}
#contact-index a:hover {
    box-shadow: 0px 0px 50px white;
}
#persona { 
    display: inline-block;
    margin-bottom: 25px;
    text-align: center;
    height: 250px;
}
#persona img { 
    height: 250px;
}
.grey-box {
    padding: 1.5%;
    margin: 3% 20% 3% 20%;
    box-shadow: 0px 0px 2px white;
    border-radius: 0.375em;
}
                                                /* Projects Frame organization*/
.project-box-row figure{
    width: 400px;
    height: 400px;
    margin: 1%;
    padding: 0%;
    display: inline-flex;
    flex-flow: row;
    box-shadow: 0px 0px 4px white;
}
.pic-text {
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, .9);
    width: 100%;
    padding: 10px;
    text-align: center;
    font-size: 1.1em;
}
.frame-pic {
    object-fit: cover;
}
.frame {
    position: relative;
    max-width: 450px;
    margin: 2% auto;
}
                                    /* Bulletin */
#blog1, #blog2, #blog3 {
    margin: 1%; 
    padding: 5%;
    border-style: solid;
    border-color: white;
    border-width: 1px;
}
.grey-box {
    padding: 1.5%;
    margin: 3% 20%;
    border-radius: 0.375em;
    background-color: rgba(0, 0, 0, .9);
    box-shadow: 3px 3px 0px white;
    transition: .4s;
    max-width: 700px;
}
.grey-box a {
    text-decoration: none;
}
.article-grey-box {
    margin: 3% 3% 3% 3%;
    box-shadow: 0px 0px 2px white;
    border-radius: 0.375em;
    text-align: left;
    font-family: 'Ubuntu Mono';
}
.article-grey-box-bottom {
    margin: 0% 30% 0% 30%;
    box-shadow: 0px 0px 2px white;
    border-radius: 0.375em;
    text-align: center;
    font-family: 'Ubuntu Mono';
    padding-bottom: 0.1%;   
    transition: 0.3s;
}
.article-grey-box-bottom:hover {
    box-shadow: 0px 0px 10px white;
}

article a {
    color: green;
}
article h2 {
    text-align: center;
    padding-top: 3%;
}
article p {
    padding: 4%;
    line-height: 2em;
}
                                        /* Contact */
.form-header {
    border: 1px solid white; 
    margin: 0% 3%;
    padding: 1%;
}                                            
form {
    margin: 0% 1%;
} 
input {
    background-color: rgb(23, 23, 23);
    border: 1px solid white;
    border-radius: 10px;
    padding: 4%;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    width: 100%;
}
.fs1{
    padding: 100px 50px;
    border: 1px solid white;
}
.fs2 {
    margin: 4% 5%;
    border: 1px solid white;
}
.fname, .lname, .email {
    margin-bottom: 5%;
    padding: 2%;
}
#reference {
    margin: 10% 0% 10% 0%;  
    background-color: rgb(23, 23, 23);
}
#comments {
    width: 80%;
    padding: 5%;
    margin: 3%;
    background-color: rgb(23, 23, 23);
    border: 1px solid white;
    border-radius: 5px;
}
.btn {
    background-color: rgb(237, 191, 79);
    color: black;
    grid-column: 1 / span 3;
}
                                        
.tel-link {
    background-color: rgb(237, 191, 79);
    padding: 1%;
    margin: 0 auto;
    margin-top: 2%;
    width: 25%;
    text-align: center;
}
.tel-link a {
    color: rgb(237, 191, 79);
    text-decoration: none;
    font-size: 1.1em;
    display: block;
}
#contact {
    display: block;
    margin-bottom: 2%;
}
#contact a {
    margin: 2%;
    font-size: 1.3em;
    padding: 1%;
    text-decoration: none;
    background: 
    linear-gradient(127deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%), 
    linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 10.71%),
    linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 10.71%);
    color:rgba(250, 250, 250, .70);
}
#contact a:hover {
    color: rgba(250, 250, 250, 1)
}
#map {
    height: 300px;
    border: 2px solid rgb(237, 191, 79);
}
#footer1, #footer2, #footer3 {
    display: inline-block;
    margin: 0% 1.5%;
}
.rgb-border {
    margin: 5% 10% 5% 10%;
    padding: 2%;
}
.rgb-border h1 {
    text-align: left;
    margin-bottom: 2%;
}
.rgb-border p {
    text-align: left;
    margin-bottom: 2%;
}

}
/*Media Screen for desktop viewport*/
@media screen and (min-width: 1123px) {
/* Style Nav */
nav {
    padding: 0%;
    margin-bottom: 4%;
}
nav ul {
    list-style-type: none;
    margin: 0;
    text-align: center;
}
nav li {
    display: inline-block;
}
nav li a { 
    text-decoration: none;
    padding: 0.5em 7em;
    color: rgba(250, 250, 250, .45);
}
nav li a:hover {
   color: white;
}

/* Show tablet-desktop, hide mobile class*/
.mobile,.mobile-nav {
    display: none;
}
.tablet-desktop {
    display: block;
}

/* Style Main */
main {
    padding: 2%;
    text-align: center;
}

/* Style Footer */
footer {
    margin-top: 3%;
    text-align: center;
}

                                /* Style Attributes class, id */
                                            /*index */
#persona { 
    display: inline-block;
    margin-bottom: 25px;
    text-align: center;
    height: 250px;
}
#persona img { 
    height: 250px;
}
.grey-box {
    padding: 1%;
    margin: 3% 30%;
    border-radius: 0.375em;
    background-color: rgba(0, 0, 0, .9);
    box-shadow: 3px 3px 0px white;
    transition: .4s;
    max-width: 700px;
}
.grey-box:hover {
    box-shadow: 10px 10px 0px white;
}
.grey-box a {
    text-decoration: none;
}
                                /* Projects Frame organization*/
.project-box-row figure{
    width: 400px;
    height: 400px;
    margin: 1%;
    padding: 0%;
    display: inline-flex;
    flex-flow: row;
    box-shadow: 0px 0px 4px white;
}
.pic-text {
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, .9);
    width: 100%;
    padding: 10px;
    text-align: center;
    font-size: 1.1em;
}
.frame {
    position: relative;
    max-width: 400px;
    transition: 0.5s;
    box-shadow: 0px 0px 0px white;
}
.frame-pic {
    object-fit: cover;
}
.frame:hover {
    opacity: 1;
    transform: translateY(10px);
    box-shadow: 0px 0px 10px white;
}
                                            /* blogs */
.article-grey-box {
    margin: 3% 20% 0% 20%;
    box-shadow: 0px 0px 2px white;
    border-radius: 0.375em;
    text-align: left;
    font-family: 'Ubuntu Mono';
    padding-bottom: 10%;   
}
.article-grey-box-bottom {
    margin: 0% 30% 0% 30%;
    box-shadow: 0px 0px 2px white;
    border-radius: 0.375em;
    text-align: center;
    font-family: 'Ubuntu Mono';
    padding-bottom: 0.1%;   
    transition: 0.3s;
}
.article-grey-box-bottom:hover {
    box-shadow: 0px 0px 10px white;
}

article a {
    color: green;
}
article h2 {
    text-align: center;
    padding-top: 3%;
}
article p {
    padding: 4%;
    line-height: 2em;
}
.article-left {
    padding-left: 4%;
    margin: .1%;
    margin-right: 30%;
    float: left;
}
.article-right {
    margin: .1%;
}

                                            /* info */
.form-header {
    border: 1px solid white; 
    margin: 0% 25%;
    padding: 3%;
}                                            
form {
    margin: 0% 20%;
} 
input {
    background-color: rgb(23, 23, 23);
    border: 1px solid white;
    border-radius: 10px;
    padding: 3%;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    width: 100%;
}
.fs1{
    margin: 4% 3%;
    padding: 100px 50px;
    border: 1px solid white;
}
.fs2 {
    margin: 4% 5%;
    border: 1px solid white;
}
.fname, .lname, .email {
    margin-bottom: 5%;
    padding: 2%;
}
#reference {
    margin: 10% 0% 10% 0%;  
    background-color: rgb(23, 23, 23);
}
#comments {
    width: 80%;
    padding: 5%;
    margin: 3%;
    background-color: rgb(23, 23, 23);
    border: 1px solid white;
    border-radius: 5px;
}
.btn {
    background-color: rgb(237, 191, 79);
    color: black;
    grid-column: 1 / span 3;
}

.tel-link {
    background-color: rgb(237, 191, 79);
    padding: 1%;
    margin: 0 auto;
    margin-top: 2%;
    width: 25%;
    text-align: center;
}
.tel-link a {
    color: rgb(237, 191, 79);
    text-decoration: none;
    font-size: 1.1em;
    display: block;
}
#contact {
    display: block;
    margin-bottom: 2%;
}
#contact a {
    margin: 2%;
    font-size: 1.3em;
    padding: 1%;
    text-decoration: none;
    background:
    linear-gradient(227deg, rgba(238, 153, 153, 0.8), rgba(255, 0, 0, 70) 50.71%), 
    linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 40.71%),
    linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 40.71%);
    color:rgba(250, 250, 250, .90);
    box-shadow: 1px 1px 7px white;
    transition: 1s;
}
#contact a:hover {
    box-shadow: 5px 5px 50px white;
}
                                                    /* etc */
#footer1, #footer2, #footer3 {
    display: inline-block;
    margin: 0% 9%;
}
.rgb-border {
    margin: 5% 20% 5% 20%;
    padding: 2%;
    box-shadow: 2px 3px 10px beige;
}
.rgb-border h1 {
    text-align: left;
    margin-bottom: 2%;
}
.rgb-border p {
    text-align: left;
    margin-bottom: 2%;
}
#contact-index a {
    margin: 2%;
    font-size: 1.3em;
    padding: 1%;
    text-decoration: none;
    transition: 1s;
    box-shadow: 0px 0px 2px white;
}
#contact-index a:hover {
    box-shadow: 0px 0px 20px white;
}
#map {
    padding: 0%;
    width: 500px;
    height: 500px;
    border: 2px solid white;
    box-shadow: 0px 0px 50px green;
    margin-top: 5%;
}
}