/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/


:root {
    --primary-color: #404b4b;
    --secondary-color: #54807a; 
    --dark-teal: #193338;
    --dark-grey: #2b2b2b;
    --light-gray: #d3d3d3;
    --background-color: #393d3d;
    --page-header-border: rgb(175, 175, 175);
    --button-color: white;
    --button-border-color: rgba(0, 0, 0, 0.3);
    --heading-font-weight: 700; 
}

body {
    background-color: #042B2F;
    font-family: 'Mulish', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: white ;
}

h1 {
    font-size: 100px;
    font-weight: var(--heading-font-weight);
}

h2 {
    font-size: 50px;
    font-weight: var(--heading-font-weight);
}

h3 {
    font-size: 25px;
    -webkit-text-decoration-color: #404040;
            text-decoration-color: #404040;
}

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

a:hover, a:focus {
  /* No underlining when hovering over a link */
    text-decoration: none;
}

a:active {
    /* selected link */
    color: #44543f;
}

button,
.button {
    border: none;
    display: inline-block;
    font-family: inherit;
    background-color: #2f4d4f;
    color: white;
    text-decoration: none;
    padding: 10px;
    margin: .25%;
    border-radius: 3px;
}

button:hover, button:focus,
.button:hover, .button:focus {
    cursor: pointer;
    background-color: #476669;
    border: solid 1px #C18C07;
}

* {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

#OBJECTS {
    display: block;
    margin: auto;
    width: 50%;
    height: 50%;
}

#bot-redirect {
    clear: both;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: center;
    text-decoration: none;
    color: #ccc;
    margin-bottom: 25px;
}

.contact-page-container {
    display: -ms-grid;
    display: grid;
    row-gap: 20px;
    -webkit-column-gap: 50px;
       -moz-column-gap: 50px;
            column-gap: 50px;
    max-width: 5000px;
    margin: 10px  5%;

}

.contact-page-container div {
    padding: 8px;
}

.contact-header {
    text-align: left;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1 / span 2;
    -ms-grid-row: 1;
    grid-row: 1;

}

.contact-info-container {
    background-color: #2f4d4f;
    border-radius: 10px;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1 / span 2;
    -ms-grid-row: 2;
    grid-row: 2;

}
.contact-info-container div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.contact-info-container div p, a {
    margin-left: 15px;
    font-size: 20px;
}
.contact-socials {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1 / span 2;
    -ms-grid-row: 3;
    grid-row: 3;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.contact-link {
    border: dotted 1px #739497;
    border-radius: 5px;
    padding: 3px 9px;
}

.contact-form-container {
    -ms-grid-column: 3;
    -ms-grid-column-span: 2;
    grid-column: 3 / span 2;
    -ms-grid-row: 2;
    -ms-grid-row-span: 6;
    grid-row: 2 / span 6;
    border-radius: 5px;
    background-color: #2f4d4f;
    text-align: left;
}

input[type=text], [type=email], #contact-message,  select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  

input[type=submit] {
    width: 100%;
    background-color: var(--primary-color);
    color: gray;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  #contact-message {
    resize: none;
  }

.fuse-img-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
#fuse-screenshot1, #fuse-screenshot2 {
    -webkit-box-flex: 50%;
        -ms-flex: 50%;
            flex: 50%;
    padding: 5px;
    width: 50%;
    height: auto;
    border-radius: .5%;
}

.navbar {
	text-align: center;
    list-style-type: none ;
    margin: 0;
    padding: 15px;
    overflow: hidden;
    background-color: #0E3439 ;
}

.navbar-item {
	display: inline;
}

.navbar-item-link {
    font-size: 1.15em;
    letter-spacing: 3px;
	display: inline-block;
    padding: 12px 30px;
    color: white;
    text-align: center;
    text-decoration: none;
}

.navbar-item-link:hover {
    background-color: #18464d;
}

.active {
    border: 2px solid #C18C07;
}

.home-body{
    background-image: url("../img/ellipseCombo.svg") ;
    background-position: center;
    background-size: cover;

    background-repeat: no-repeat;
}

.page-container {
    text-align: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 20px;

}
.text-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

}

.sm-text-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 50px;
    text-align: center;
}
#text_small_left, #text_small_right {
    margin: 10px;
}

.intro-btn-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    gap: 30px;
    -ms-flex-line-pack: center;
        align-content: center;
}
.intro-button {
    font-size: 25px;
    padding: 10px 30px;
    color: white;
    border: solid 1px #C18C07;
    border-radius: 5px;
    background-color: #2f4d4f;
}
.intro-button:hover {
    background-color: #476669;
}

.profile-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    margin: auto 2%;
    gap: 30px;
}
.profile-info {
    text-align: left;
}

.profile-img-container {
    width: 1500px;
}

#profile_pic {
    width: 100%;
    height: auto;
    max-width: none;
    border-radius: 50% 0px 0px 50%;
}

.work-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 20px;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    max-width: 100%;
    text-align: center;
    padding: 10px auto ;
    margin-bottom: 50px;

}

.project-card {
    /* border: solid 1px #54807a;
    border-radius: 5px; */
    width: 1500px;
    margin: 10px auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    padding: 10px;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.project-img-container {
    width: 600px;
}
.project-img {
    width: 100%;
    height: auto;
    /* max-height: 85%; */
    max-width: none;
    -webkit-box-shadow: 5px 5px 50px 5px black;
            box-shadow: 5px 5px 50px 5px black;
}

.project-info {
    text-align: right;
    margin-right: 2.5%;
    max-width: 800px;
    max-height: -webkit-fit-content;
    max-height: -moz-fit-content;
    max-height: fit-content;
    min-width: 0;
    overflow-wrap: break-word;
    -ms-flex-negative: 2;
        flex-shrink: 2;
}

.project-tech {
    list-style: none;
    padding: none;
}
.project-tech li {
    display: inline-block;
    background-color: #0E3439;
    padding: 5px 8px;
    margin: 2px 2px;
}

@media screen and (max-width: 550px) {
    h1 {font-size: 60px;}
    .contact-info-container div p {font-size: 14px;}
    .contact-link {font-size: 14px;}
    .profile-container { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse;}
    .profile-img-container {height: 30%; width: auto;}
    .text-container {gap: 10px;}
    .sm-text-container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 10px;}
    #text_small_left, #text_small_right { font-size: 20px;}
    .intro-btn-container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
    .home-body {background-size: auto; }
    .navbar-item-link {display: block;}
    .project-card {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse; /* Stack items vertically */
        width: 85%;
    }
    .project-info h2 { text-align: center;}
    .project-info p {text-align: left;}
    .project-tech { text-align: left; -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; padding: 0px 0px;}
    .project-img-container { width: 95%;}
}

@media screen and (min-width: 550px) and (max-width: 768px) {

    .profile-container { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse;}
    .profile-img-container {height: 40%; width: auto;}
    .sm-text-container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 10px;}
    .home-body {background-size: auto; }
    .project-card {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse; /* Stack items vertically */
        width: 85%;
    }
    .project-info h2 { text-align: center;}
    .project-info p {text-align: left;}
    .project-tech { text-align: left; -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; padding: 0px 0px;}
}

@media screen and (min-width: 768px) and (max-width: 1440px) {
    .project-card {
        width: 90%;
    }
}

@media screen and  (max-width: 1024px) {
    .contact-page-container {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
}