html
    {
        scroll-behavior: smooth;
    }

body
    {
        background-image: url('Images/Background.png');
        background-repeat: no-repeat;
        background-size: 100%;
        background-color: #191919;
        color: #ffffff;
    }

.secondary
    {
        background-image: url('Images/Background_Secondary.png');
        background-repeat: repeat-y;
        background-size: 100%;
        background-color: #191919;
    }
a
    {
        color: #ffffff;
        font-family: "Montserrat", serif;
        font-size: 1rem;
        font-weight: 400;
        text-decoration: none;
    }

h1.title
    {
        color: #F53900;
        font-family: "Montserrat", serif;
        font-size: 2rem;
        font-weight: 400;
        text-decoration: none;
        margin-bottom: -4%;
        margin-top: 1%;
    }

h2.heading
    {
        color: #ffffff;
        font-family: "Montserrat", serif;
        font-size: 1.5rem;
        font-weight: 500;
        text-decoration: underline;
        padding-bottom: 2%;
    }

a:link
    {
        color: #ffffff;
        text-decoration: none;
    }

a:hover
    {
        color: #ffffff;
        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
    }

i.bi
    {
        color: #F53900;
        font-size: 1.7rem;
        vertical-align: -2em;
        padding: 0% 3% 0% 3%;
        text-align: center;
    }

i.bi:hover
    {
        color: #ff521e
    }

.intro
    {
        padding: 7% 30% 10% 30%;
    }

a.introtxt
    {
        color: #ffffff;
        font-family: "Montserrat", serif;
        font-size: 1.3rem;
        font-weight: 400;
        text-decoration: none;
    }
.navbar
    {
        --bs-navbar-nav-link-padding-x: 1.5rem;
        --bs-navbar-hover-color: #F53900;
    }

.nav-link
    {
        color: #ffffff;
    }

.nav-text
    {
        display: block;
        padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
        font-size: var(--bs-nav-link-font-size);
        font-weight: var(--bs-nav-link-font-weight);
        color: #ffffff;
        text-decoration: none;
    }

.nav-link:focus, .nav-link:hover
    {
        color: #F53900;;
    }

.navbar-nav .nav-link.active
    {
        color: #F53900;;
    }

.container-fluid
    {
        width: 90%;
    }
.container
    {
        max-width: 80%;
    }

.navbar-collapse
    {
        flex-grow: 0.6;
    }

.navbar-toggler
    {
        border: none;
    }

.navbar-toggler:focus
    {
        box-shadow: none;
    }

img
    {
        display:block;
        width:100%;
    }

.btn
    {
        padding: 11% 23% 11% 23%;
        background-color: #F53900;
        color: #1E1E1E;
        font-weight: 700;
        text-decoration: underline;
        border-radius: 0%;
    }

.btn-form
    {
        padding: 2% 5% 2% 5%;
    }

.btn:hover, .btn:active:focus
    {
        background-color: #ff521e;
        color: #1E1E1E;
        font-weight: 700;
        text-decoration: underline;
    }

.projects
    {
        margin-top: 5%;
    }

.projectstxt
    {
        font-family: "Montserrat", serif !important;
        font-size: 1rem !important;
    }

.modal
    {
        --bs-modal-width: 75%;
    }

.contact
    {
        padding: 7% 3% 10% 3%;
    }

.card
    {
        padding: 5% 5% 5% 5%;
        background-color: #191919;
        color: white;
        border: none;
    }

.row
    {
        padding-top: 3rem !important;
    }

input, textarea
    {
        background: transparent;
        border-style: none;
        resize: none;
        color: #ffffff;
        width: 100%;
        border-bottom: 7px white solid;
        -webkit-transition: 0.5s;
        transition: 0.5s;
        outline: none;
    }

input:focus, textarea:focus
    {
        outline: none;
        border-bottom: 7px solid #F53900;
    }
footer
    {
        border-top: 3px solid #ffffff;
    }

@media (max-width:730px)
    {
        .navbar-brand
            {
                width: 30vw;
            }
        
        .btn
        {
            padding: 1% 3% 1% 3%;
        }

        .intro
        {
            padding: 10% 10% 10% 10%;
        }
    }

@media (max-width: 575px) {
    body
    {
        background-image: url('Images/Phone_Background.png');
        background-repeat: repeat-y;
        background-size: 100%;
        background-color: #191919;
    }

    .secondary
        {
            background-image: url('Images/Phone_Background.png');
            background-repeat: repeat-y;
            background-size: 100%;
            background-color: #191919;
        }

    .col-11
        {
            margin-top: 1rem;
        }

    .row
    {
        padding-top: 1rem !important;
    }
    
}