*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Custom Property Styles */
:root {
    --ff-primary: 'Source Sans Pro', sans-serif;;
    --ff-secondary: 'Source Code Pro', monospace;
    --fw-reg: 300;
    --fw-bold: 900;
    --clr-light: #fff;
    --clr-dark: #303030;
    --clr-accent: #16e0bd;
    --fs-h1: 3rem;
    --fs-h2: 2.25rem;
    --fs-h3: 1.25rem;
    --fs-body: 1rem;
}

@media (min-width: 800px)
{
    :root {
    --fs-h1: 4.5rem;
    --fs-h2:  3.75rem;
    --fs-h3: 1.5rem;
    --fs-body: 1.125rem;
    }
}

/* General Styling */

body {
    background: #1d1d1d;
    font-family: var(--ff-primary);
    font-size: var(--fs-body);
    text-fill: white;
}

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

/* Fonts */

h1,
h2,
h3 {
    line-height: 1.167;
    margin: 0;
    color: white;
    font-family: Barlow,Oswald,Anton,sans-serif;
    font-size: 3rem;
    font-weight: 500;
    padding: 20px 0 30px;
    text-align: center;
}

h1 { font-size: var(--fs-h1) }
h2 { font-size: var(--fs-h2) }
h3 { font-size: var(--fs-h3) }

* {
  box-sizing: border-box;
}

.section__title__h2 {
    font-family: Barlow,Oswald,Anton,sans-serif;
    font-weight: 500;
    margin: 0;
    text-align: center;
    font-size: 3rem;
}

.section__subtitle {
    color: #fff;
    display: block;
    margin-block-start: 1.67em;
    margin-block-end: 1.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-family: Barlow,Oswald,Anton,sans-serif;
    font-weight: 400;
    text-align: center;
    font-size: 1.5rem;
    line-height: 1.334;
}

.paragraph__subtitle {
    border-style: solid;
    border-width: 5px 5px;
    border-color: #fff;
    background-color: #303030;
    color: #fff;
    display: block;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-family: Barlow,Oswald,Anton,sans-serif;
    font-weight: 400;
    font-size: 1rem;
    text-align: justify;
    line-height: 1.5;
}

.p_closer {
    margin: auto;
    max-width: 75%;
    justify-content: center;
}

.paragraph_closer {
        color: #fff;
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        font-family: Barlow,Oswald,Anton,sans-serif;
        font-weight: 400;
        font-size: 1rem;
        text-align: center;
        line-height: 1.5;
}

.wrap_image {
    display: flex;
    justify-content: center;
    padding-top: 5px;
    padding-bottom: 5px;
}

.subtitle_container {
    margin: auto;
    justify-content: center;
    max-width: 75%;
}

.project__title {
    margin: 0;
    font-family: Barlow,Oswald,Anton,sans-serif;
    font-weight: 300;
    text-align: center;
}

.nav__list {
    list-style-type: none;
    padding-bottom: 24px;
    margin: 0;
    overflow: hidden;
    background-color: #2e2e2e;
    color: #3399ff;
}

.nav__dropdown {
    float: left;
}

.send_message_button {
    background-color: #008CBA;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 8px;
    cursor: pointer;
    transition-duration: 0.4s;
}

.send_message_button:hover {
    color: black;
    background-color: white;
    border: 2px solid #008CBA;
}

.nav__button {
    color: #3399ff;
    font-weight: 300;
    font-size: 25px;
    padding: 14px 16px;
    text-decoration: none;
}

.nav__dropdown, nav__button {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    font-family: Verdana,sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.5;
    text-decoration: none;
}

li.nav__dropdown:hover .nav__button {
    background-color: #3a3a3a;
}

li.nav__dropdown {
    display: inline-block;
}

.navigation_sub {
    position: fixed;
    width: 100%;
    padding-bottom: 200px;
    overflow: hidden;
    justify-content: center;
    float: left;
}

.dropdown_list {
    display: none;
    position: absolute;
    background-color: #2e2e2e;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown_list a{
    color: white;
    padding: 12px 16px;
    display: block;
    text-align: left;
}

.dropdown_list a:hover {
    background-color: #3399ff;
}

.nav__dropdown:hover .dropdown_list {
    display: block;
}

.introduction_section:before {
    filter: grayscale(40%);
}

.introduction_section{
    display: block;
    background-image: url('/public/images/src/background.jpeg');
    background-color: rgba(18, 18, 18, 0.2);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
    max-width: 100%;
    height: auto;
    padding-top: 15%;
    padding-bottom: 15%;
}

.about__body {
    padding-top: 5%;
    padding-bottom: 5%;
}

.my_picture {
    margin: auto;
    width: 100%;
    max-width: 225px;
    height: auto;
    border: 1px solid #777;
    border-radius: 10px;
}

.portfolio_container {
    background-color: #211221;
    padding-bottom: 3%;
}

.portfolio {
    padding-top: 3%;
    padding-bottom: 3%;
}

.image__portfolio {
    margin: auto;
    border: 1px solid #777;
    border-radius: 10px;
    max-width: 100%;
    height: auto;
}

.project__subtitle {
            color: rgba(255, 255, 255, 0.7);
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-family: Barlow,Oswald,Anton,sans-serif;
            font-weight: 400;
            font-size: 1rem;
            text-align: center;
            line-height: 1.5;
            padding-left: 60px;
            padding-right: 60px;
}

.project_link {
      background-color: #008CBA;
      border: none;
      color: white;
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      cursor: pointer;
      transition-duration: 0.4s;
}

.project_link:hover {
    color: black;
    background-color: white;
    border: 2px solid #008CBA;
}

.button_container {
    position: relative;
}

.vertical_center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.responsive {
    display: flex;
    justify-content: center;
    padding-bottom: 30px;
}

.cert_container {
    padding-top: 5%;
    padding-bottom: 5%;
    background-color: #102e56;
}

div.cert_logo_gallery {
    border: 1px solid #777;
    border-radius: 10px;
    margin: 10px;
}

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

  .introduction_section {
    width: 100%;
  }

    .about__body {
     width: 100%;
    }

    .portfolio_container {
     width: 100%
    }

    .cert_container {
      width: 100%;
    }

    .contact_container {
        width: 100%;
    }

    .socials_container {
        width: 100%;
    }

}

@media only screen and (max-width: 700px) {

  .responsive {
          width: 100%;
          margin: 6px 0;
        }

        .image__certs {
            border: 1px solid #777;
            width: 100%;
            max-width: 200px;
            height: auto;
        }

  .paragraph_closer {
         margin: auto;
         max-width: 50%
      }

      .wrap_image {
          margin: auto;
          max-width: 75%;
          height: auto;
      }

}

@media only screen and (max-width: 400px)
{



    .paragraph__subtitle {
        font-size: 4vw;
        text-align: center;
    }

    .paragraph_closer {
         text-align: center;
         font-size: 4vw;
      }

      .p_closer {
        width: 75%;
        margin: auto;
       }

       .image__portfolio {
           margin: auto;
           max-width: 75%;
           height: auto;
       }

    .cert__info {
        margin: auto;
        max-width: 75%;
    }

    .navigation_sub {
            padding-bottom: 0px;
        }

        .introduction_section {
            width: 100%;
            height: auto;
          }

            .about__body {
             width: 100%;
            }

            .portfolio_container {
             width: 100%
            }

            .cert_container {
              width: 100%;
            }

            .contact_container {
                width: 100%;
            }

            .socials_container {
                width: 100%;
            }

        .introduction_section{
        padding-top: 50%;
        padding-bottom: 15%;
    }


}

@media only screen and (max-width: 1000px)
{

.image__portfolio {
            margin: auto;
            max-width: 75%;
            height: auto;
         }

}

@media only screen and (max-width: 1100px)
{

.image__portfolio {
            margin: auto;
            max-width: 75%;
            height: auto;
         }

}

@media only screen and (max-width: 900px)
{
    .paragraph__subtitle {
          text-align: center;
        }
}

@media only screen and (max-width: 300px)
{
    .socials_container {
          width: 25%;
          margin: auto;
          display: flex;
          flex-direction: column;
        }

        .social__link {
            padding: 4px 4px;
            font-size: 6px;
            margin: 4px;
        }
}

@media only screen and (max-width: 600px)
{
    .responsive {
        width: 100%;
        margin: 6px 0;
      }

      .image__certs {
          border: 1px solid #777;
          width: 100%;
          max-width: 200px;
          height: auto;
      }
}

@media only screen and (max-width: 500px) {

.paragraph__subtitle {
      text-align: center;
    }

    .paragraph_closer {
           text-align: center;
           font-size: 4vw;
         }

         .p_closer {
            width: 75%;
            margin: auto;
           }

       .image__portfolio {
            margin: auto;
            max-width: 75%;
            height: auto;
         }


  .wrap_image {
            margin: auto;
            max-width: 75%;
            height: auto;
        }

        .responsive {
            width: 100%;
          }
}

.cert__list {
    color: #fff;
    font-family: Barlow,Oswald,Anton,sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
}

.cert_list_container {
    display: flex;
    justify-content: center;
}

.cert__list li {
        color: #fff;
        font-family: Barlow,Oswald,Anton,sans-serif;
        font-weight: 400;
        font-size: 1rem;
        line-height: 1.5;
        margin-left: 15px;
}

.paragraph__cert {
    color: #fff;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-family: Barlow,Oswald,Anton,sans-serif;
    font-weight: 400;
    font-size: 1rem;
    text-align: center;
    line-height: 1.5;
}

.cert__info {
    color: #fff;
    font-family: Barlow,Oswald,Anton,sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    display: flex;
    justify-content: center;
    margin: auto;
    max-width: 75%;
}

.socials_container {
    display: flex;
    justify-content: center;
    background-color: #303030;
}

.social__link {
    background-color: #008CBA;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 8px;
    cursor: pointer;
    transition-duration: 0.4s;
}

.social__link:hover {
    color: black;
    background-color: white;
    border: 2px solid #008CBA;
}

.section__paragraph__intro {
    font-size: 2.5rem;
}

.image__certs {
    border: 1px solid #777;
    width: 100%;
    max-width: 200px;
    height: auto;
}

input[type=text] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
    background-color: #f8f8f8;
}

textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: none;
    background-color: #f8f8f8;
}

input[type=text]:focus {
    border: 3px solid #008CBA;
}

.email_input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
    background-color: #f8f8f8;
}

input[type=email]:focus {
    border: 3px solid #008CBA;
}

.phone_input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
    background-color: #f8f8f8;
}

input[type=tel]:focus  {
    border: 3px solid #008CBA;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
  font-family: Verdana,sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

input[type=submit] {
    background-color: #008CBA;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 8px;
    cursor: pointer;
    width: 25%;
    transition-duration: 0.4s;
}

input[type=submit]:hover {
    color: black;
    background-color: white;
    border: 2px solid #008CBA;
}

.contact {
    background-color: #212121;
}

.contact_container {
    border-radius: 5px;
    background-color: #212121;
    padding: 20px;
}

.column-25 {
    float: left;
    width: 25%;
    margin-top: 6px;
}

.column-75 {
    float: left;
    width: 75%;
    margin-top: 6px;
}

.contact_message {
    resize: none;
}

.contact_row::after {
    content: "";
    display: table;
    clear: both;
}

.contact_row_button {
    display: flex;
    justify-content: center;
}

.send_message_button {
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 600px)
{
    .column-25, .column-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
    }

    .introduction_section {
        display: block;
        background-image: url('../images/src/background.jpeg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-attachment: fixed;
        text-align: center;
        width: 100%;
        max-width: 600px;
        height: auto;
        padding-top: 15%;
        padding-bottom: 15%;
    }

    .navigation_sub {
        position: fixed;
        width: 100%;
        padding-bottom: 135px;
        overflow: hidden;
        justify-content: center;
        float: left;
    }

    .paragraph_closer {
       margin: auto;
       max-width: 50%
    }

    h1,
    h2,
    h3,
    p{
        font-size: 30px;
    }

}