html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}

.clearfix:after {visibility: hidden; display: block; font-size: 0; content: ''; clear: both; height: 0; }

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

.visuallyHidden:not(:focus):not(:active) { position: absolute; width: 1px; height: 1px; margin: -1px;border: 0;padding: 0;white-space: nowrap;clip-path: inset(100%);clip: rect(00 0 0);overflow: hidden;}

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; white-space: nowrap; clip-path: inset(100%); clip: rect(0 0 0 0); overflow: hidden;}

html {
    font-size: 125%;
}

body {
    background-color: #1e1e1e;
}

a {
    color: white;
}

.bImg {
    width: 100%;
    height: 100vh;
    background-image: url("../assets/vsCodeBackground.png");
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 0 50px 50px #1e1e1e inset;
}

.bColor {
    width: 100%;
    height: 100vh;
    background: #004743;
    background: linear-gradient(18deg, rgba(255,0,0,0) 43%, #01545b 56%, #007276 70%, #009d8e 87%, #15bda6 95%);
    opacity: 1;
    animation-name: bOpacity;
    animation-duration: 3s;
}

@keyframes bOpacity {
    0%{opacity: 0;}
    100%{opacity: 1;}
}

a,
button,
.skillList p {
    cursor: pointer;
}

a:focus,
button:focus,
.skillList p:focus {
    color: #ed6147;
    text-decoration: underline;
}

.contactImg i:focus {
    color: white;
}

.wrapper {
    max-width: 1400px;
    margin: 0 auto;
    width: 90%;
    height: 100vh;
    display: flex;
    align-items: flex-end;
}

.title {
    width: 40%;
    color: #ed6147;
    padding-left: 50px;
    font-family: 'Inconsolata', monospace;
    font-weight: 00;
    flex-shrink: 10;
    animation-name: bOpacity;
    animation-delay: 4s;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-transform: uppercase;
    opacity: 0;
}

.title h1 {
    font-size: 2rem;
    margin-bottom: 40px;
    margin-top: 200px;
}

h1 span {
    font-size: 1.6rem;
    color: #11d0b7;
    font-weight: 300;
}

.title h2 {
    margin-bottom: 60px;
    margin-top: 0;
    font-weight: 500;
}

.tags {
    color: #11d0b7;
    font-weight: 300;
}

.title h3 {
    color: #ed6147;
    font-size: 1.1rem;
    margin-bottom: 100px;
    margin-top: 40px;
}


.title .skillList p {
    margin-bottom: 0;
    font-size: 1.2rem;
    color: #dfeb7a;
}

.skillList span {
    color: #dc78dc;
}

.title p:nth-of-type(1) {
    margin-top: 0;
}

.skillList p:hover {
    text-decoration: underline;    
}

.alternatingText {
    margin-bottom: 0;
}

.alternatingText-word {
    opacity: 0;
    position: absolute;
}

.alternatingText-word:nth-of-type(2) {
    animation-name: rotate;
    animation-duration: 1.5s;
    animation-delay: 6s;
    color: #11d0b7;
  }
  
  .alternatingText-word:nth-of-type(3) {
    animation-name: rotate;
    animation-duration: 1.5s;
    animation-delay: 7.5s;
    color: #dc78dc;
  }
  
  .alternatingText-word:nth-of-type(4) {
    animation-name: rotate;
    animation-duration: 1.5s;
    animation-delay: 9s;
    color: #dfeb7a;
  }
  
  .alternatingText-word:nth-of-type(5) {
    animation-name: rotate-final;
    animation-duration: 1.5s;
    animation-delay: 10.5s;
    animation-fill-mode: forwards;
  }

  @keyframes rotate {
    0% {
      opacity: 0;
    }
    
    20%, 80% {
      opacity: 1;
    }
    
    100% {
      opacity: 0;
    }
  }

  @keyframes rotate-final {
    0% {
      opacity: 0;
    }
    
    100% {
      opacity: 1;
    }
  }

.stephen {
    width: 60%;
    display: flex;
    flex-direction: column;
    margin-bottom: 100px;
    flex-shrink: 1;
    font-family: 'Inconsolata', monospace;
}


.first,
.last {
    display: flex;
    flex-wrap: nowrap;
}

.letter {
    background-color: #ed6147;
    margin: 5px;
    height: 100px;
    width: 100px;
    font-size: 3rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50% 0 50% 0;
    position: relative;
}

.letter p {
    font-family: 'Raleway', sans-serif;
    color: #1e1e1e;
    opacity: 1;
    animation-name: opacity;
    animation-duration: 6s;
}

.blank {
    opacity: 0;
}

.bodyWrapper{
    max-width: 1200;
    margin: 0 auto;
    width: 90%;
}

.about,
.projects,
.skills,
.contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ed6147;
    font-family: 'Inconsolata', monospace;
}

.about h2,
.skills h2,
.projects h2,
.contact h2 {
    font-weight: 300;
    font-size: 2.2rem;
    text-transform: uppercase;
}

.about h2 {
    color: #dc78dc;
}

.about p {
    font-size: 1.8;
    font-weight: 300;
}

.about span {
    color: #11d0b7;
    font-size: 1.8;
}

.aboutFlex {
    display: flex;
}

.about1,
.about2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    padding: 0 20px;
}

.about1 img{
    width: 100%;
    max-width: 275px;
    height: auto;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 7px 7px #dfeb7a, 
    14px 14px #11d0b7;
}

.about1 img:hover{
    opacity: 0.7;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.9); 
  }
  
.modal-content {
    margin: auto;
    display: block;
    width: 200%;
    max-width: 700px;
}

.modal-content {
    animation-name: zoom;
    animation-duration: 0.6s;
  }
  
  @keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
  }
  
  .close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold; 
    transition: 0.3s;
  }
  
  .close:hover,
  .close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
  }

.about2 {
    margin-bottom: 100px;
}

.about a {
    text-decoration: none;
    color: #dc78dc;
}

.skills h2 {
    color: #dfeb7a;
}

.contactForm form button,
.about2 button {
    margin-top: 40px;
    background-color: #11d0b7;
    font-family: 'Raleway', sans-serif;
    color: white;
    width: 250px;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: lighter;
    padding: 20px 5px;
}

.about2 button:hover {
    color: #1e1e1e;
    background-color: white;
} 

.skills span {
    color: #ed6147;
    font-size: 1.8;
}

.skillImgs {
    display: flex;
    max-width: 70%;
    padding: 0;
    list-style: none;
    text-transform: uppercase;
    flex-wrap: wrap;
    justify-content: center;
}

.skillImgs span {
    text-transform: lowercase;
}

i {
    font-size: 50px;
    height: auto;
    color: white;
}

li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    margin: 20px;
}

.skillImgs p {
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-size: 0.8rem;
    font-weight: 300;
}

.now {
    color: #dc78dc;
    font-size: 1.2rem;
}

.projects h2 {
    color: #11d0b7;
}

.projects span {
    color: #dfeb7a;
    font-size: 1.8;
}

.projectButtons {
    display: flex;
    width: 50%;
}

.projectButtons button:hover {
    color: white;
    background-color: #11d0b7;
}

button {
    width: calc(100% / 3);
    border: none;
    font-family: 'Raleway', sans-serif;
    font-size: 0.7rem;
    color: #1e1e1e;
    font-weight: lighter;
    padding: 10px 15px;
}

.containerContainer {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.projectContainer {
    display: flex;
    width: 100%;
    max-width: 1000px;
    justify-content: flex;
}

.projectContainer2 {
    display: flex;
    width: 100%;
    max-width: 1000px;
    justify-content: flex-end;
    font-family: 'Raleway', sans-serif;
    font-weight: lighter;
}

.projectImg,
.projectText {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 500px;
    max-height: 350px;
    background-color: #f0ecec;
}

.projects a {
    color:  #dc78dc;
    text-decoration: none;
}

.projectText {
    color:  #2b0404;
}

.projectText a {
    color:  #2b0404;
    text-decoration: underline;
}

.projectImg {
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 20px 0 20px;
}

.projectImg img {
    max-width: 500px;
    height: auto;
}

.projectText {
    padding: 20px;
    border-radius: 0 20px 0 20px;
}

.projectText h3 {
    margin: 0;
}

.projectButtons .selected {
    color: white;
    background-color: #11d0b7;
}

.projectDec1,
.projectDec2 {
    width: 200px;
    height: 200px;
    background-size: 300px;

}

.projectDec1 {
    border-radius: 0 20px 0 0;
    margin-top: 127px;
    background-image: url(../assets/vsCodeBackground1.png);
}

.projectDec2 {
    border-radius: 0 0 0 20px;
    background-image: url(../assets/vsCodeBackground2.png);
}

.contactContainer {
    display: flex;
    width: 80%;
    margin-top: 20px;
    margin-bottom: 20px;
}

.contact h2 {
    color:  #ed6147;
    margin-top: 60px;
    margin-bottom: 10px;
}

.contactSubHeader {
 font-size: 0.8rem;
}

.contact p {
    color: #11d0b7;
}

.contact span {
    color: #11d0b7;
}

.contactForm {
    width: 65%;
}

.contact form {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 400px;
    justify-content: space-between;
}

input,
textarea {
    font-family: 'Raleway', sans-serif;
    color: #11d0b7;
    text-transform: uppercase;
    font-size: 0.8rem;
    padding: 10px;
    width: 100%;
}

input {
    border: none;
}

textarea {
    height: 200px;
}

::placeholder {
    color: #11d0b7;
}

.contactForm form button {
    margin-top: 0px;
}

.contactMethod {
    width: 35%;
    padding-left: 20px;
}

.contactMethod p {
    margin-top: 0;
}

.contactInfo {
    padding: 0;
}

.contactInfo p {
    color: #6a6a6a;
    font-size: 18px;
}

.contactInfo i {
    font-size: 18px;
    color: #ed6147;
    display: inline;
}

.contactImg {
    display: flex;
    justify-content: flex-start;
    padding: 0;
}

.contact a {
    text-decoration: none;
    color: #ed6147;
}

.contactImg li {
    width: 40px;
    height: auto;
    margin: 0;
    margin-right: 10px;
}

.contactImg i {
    font-size: 40px;
    color: #6a6a6a;
}

.contactImg i:hover {
    color: white;
}

/* NAME ANIMATION */

@keyframes opacity {
    0% {opacity: 0;
        }
    66%  {opacity: 0;
        }
    100% {opacity: 1;
        }
}

.s {
    animation: s;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}

@keyframes s {
    0% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        top: -500px;
    }

    26% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        top: 0px
    }
    50% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
    }
    100% {border-radius: 50% 0 50% 0;
          background-color: #ed6147;
          border: 1px solid #2b0404
;
    }
}

.t {
    animation: t;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}

@keyframes t {
    0% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        top: -500px;
    }

    29% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        top: 0px
    }
    50% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
    }
    100% {border-radius: 50% 0 50% 0;
          background-color: #ed6147;
          border: 1px solid #2b0404
;
    }
}

.e {
    animation: e;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}

@keyframes e {
    0% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        top: -500px;
    }

    31% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        top: 0px
    }
    50% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
    }
    100% {border-radius: 50% 0 50% 0;
          background-color: #ed6147;
          border: 1px solid #2b0404;
    }
}


.p {
    animation: p;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}

@keyframes p {
    0% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        top: -500px;
    }

    35% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        top: 0px
    }
    50% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
    }
    100% {border-radius: 50% 0 50% 0;
          background-color: #ed6147;
          border: 1px solid #2b0404
;
    }
}

.h {
    animation: h;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}

@keyframes h {
    0% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        top: -500px;
    }

    38% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        top: 0px
    }
    50% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
    }
    100% {border-radius: 50% 0 50% 0;
          background-color: #ed6147;
          border: 1px solid #2b0404
;
    }
}

.e2 {
    animation: e2;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}

@keyframes e2 {
    0% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        top: -500px;
    }

    41% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        top: 0px
    }
    50% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
    }
    100% {border-radius: 50% 0 50% 0;
          background-color: #ed6147;
          border: 1px solid #2b0404
;
    }
}

.n {
    animation: n;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}

@keyframes n {
    0% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        top: -500px;
    }
    44% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        top: 0px
    }
    50% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        top: 0px
    }
    100% {border-radius: 50% 0 50% 0;
          background-color: #ed6147;
          border: 1px solid #2b0404
;
    }
}














.s2 {
    animation: s2;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}

@keyframes s2 {
    0% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        bottom: -500px;
    }

    26% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        bottom: 0px
    }
    50% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
    }
    100% {border-radius: 50% 0 50% 0;
          background-color: #ed6147;
          border: 1px solid #2b0404
;
    }
}

.c {
    animation: c;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}

@keyframes c {
    0% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        bottom: -500px;
    }

    29% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        bottom: 0px
    }
    50% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
    }
    100% {border-radius: 50% 0 50% 0;
          background-color: #ed6147;
          border: 1px solid #2b0404
;
    }
}

.h2 {
    animation: h2;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}

@keyframes h2 {
    0% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        bottom: -500px;
    }

    31% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        bottom: 0px
    }
    50% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
    }
    100% {border-radius: 50% 0 50% 0;
          background-color: #ed6147;
          border: 1px solid #2b0404
;
    }
}


.o {
    animation: o;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}

@keyframes o {
    0% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        bottom: -500px;
    }

    35% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        bottom: 0px
    }
    50% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
    }
    100% {border-radius: 50% 0 50% 0;
          background-color: #ed6147;
          border: 1px solid #2b0404
;
    }
}

.o2 {
    animation: o2;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}

@keyframes o2 {
    0% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        bottom: -500px;
    }

    38% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        bottom: 0px
    }
    50% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
    }
    100% {border-radius: 50% 0 50% 0;
          background-color: #ed6147;
          border: 1px solid #2b0404
;
    }
}

.l {
    animation: l;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}

@keyframes l {
    0% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        bottom: -500px;
    }

    41% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        bottom: 0px
    }
    50% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
    }
    100% {border-radius: 50% 0 50% 0;
          background-color: #ed6147;
          border: 1px solid #2b0404
;
    }
}

.e3 {
    animation: e3;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}

@keyframes e3 {
    0% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        bottom: -500px;
    }
    44% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        bottom: 0px
    }
    50% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        bottom: 0px
    }
    100% {border-radius: 50% 0 50% 0;
          background-color: #ed6147;
          border: 1px solid #2b0404
;
    }
}

.y {
    animation: y;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}

@keyframes y {
    0% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        bottom: -500px;
    }
    47% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        bottom: 0px
    }
    50% {border-radius: 0 0 0 0;
        background-color: #062022;
        border: none;
        bottom: 0px
    }
    100% {border-radius: 50% 0 50% 0;
          background-color: #ed6147;
          border: 1px solid #2b0404
;
    }
}

/* MEDIA QUERIES */

@media (max-width: 1200px) {
    
    .title{
        padding-left: 10px;
    }
}


@media (max-width: 1100px) {

    .wrapper {
        flex-direction: column-reverse;
    }

    .stephen {
        width: 100%;
    }

    .first,
    .last {
        width: 75%;
    }

    .title {
        width: 100%;
    }

    .title h1 {
        margin-bottom: 0;
    }

    .alternatingText {
        margin-top: 12px;
    }

    .skillList {
        display: flex;
        width: 60%;
        justify-content: space-between;
    }

    .title h2 {
        margin-bottom: 20px;
    }

    .break {
        display: none;
    }

    .title p:nth-of-type(1) {
        margin-top: 24px;
    }

    .title h3 {
        margin-bottom: 10px;
        margin-top: 15px;
    }

    .about button {
        margin-top: 25px
    }
}

@media (max-width: 1000px) {

    .skillList {
        display: flex;
        width: 80%;
    }

    .aboutFlex{
        flex-direction: column;
    }

    .about1,
    .about2 {
        width: 100%;
    }

    .contactContainer {
        width: 90%;
    }
}

@media (max-width: 940px) {

    .projectsSubHeader{
        font-size: 0.9rem
    }

    .contactContainer {
        width: 100%;
    }
}

@media (max-width: 875px) {
    
.projectButtons {
    width: 75%;
}
}

@media (max-width: 800px) {
    .first,
    .last {
        width: 90%;
    }
}


@media (max-width: 750px) {

    .skillList {
        width: 100%;
    }

    .letter p {
        font-size: 2.7rem;
    }

    .projectDec1,
    .projectDec2 {
        display: none;
    }

    .projectImg {
        border-radius: 20px 20px 0 0;
    }
    .projectText {
        border-radius: 0 0 20px 20px;
    }

    .projectContainer {
        justify-content: center;
    }

    .projectContainer2 {
        justify-content: center;
    }

    .contactContainer {
        flex-direction: column-reverse;
    }

    .contactMethod {
        width: 100%;
        flex-direction: row;
    }

    .contactForm {
        width: 100%;
    }
}


@media (max-width: 650px) {

    .break {
        display: block;
    }

    .wrapper {
        flex-direction: column-reverse;
        justify-content: center
    }

    .stephen {
        margin-bottom: 200px;
    }
}

@media (max-width: 600px) {

    .stephen {
        justify-content: center;
        align-items: center;
    }

    .letter p {
        font-size: 2.2rem;
    }

    .title .skillList p {
        font-size: 1rem;
    }

    .title p:nth-of-type(1) {
        margin-top: 20px;
    }

    .projectButtons {
        width: 100%;
    }
}

@media (max-width: 577px) {

    .stephen {
        margin-top: 50px;
    }

    .letter {
        height: 75px;
        margin: 2px;
    }

    .letter p {
        font-size: 2rem;
    }
}

@media (max-width: 540px) {
    
    .stephen {
        margin-top: 10px;
    }

    .title h2 {
        font-size: 1.2rem;
    }

    .skillList {
        flex-direction: column;
    }

    .title .skillList p {
        font-size: 0.8rem;
    }

    .title p:nth-of-type(1) {
        margin-top: 16px;
    }

    .projectImg img {
        max-width: 400px;
    }
    .projectText {
        font-size: 0.8rem;
    }
}

@media (max-width: 450px) {

    .title h1,
    .title h1 span {
        font-size: 1.6rem;
    }

    .letter p {
        font-size: 2rem;
    }

    .projectImg img {
        max-width: 350px;
    }
}

@media (max-width: 400px) {

    .wrapper {

        width: 95%;
    }

    .title h1,
    .title h1 span{
        font-size: 1.3rem;
    }

    .title h3,
    .title h3 span {

        font-size: 1rem;        
    }

    .letter p {
        font-size: 1.6rem;
    }

    .projectImg img {
        max-width: 325px;
    }
    .projects button {
        font-size: 0.7rem;
        padding: 5px 5px;
    }
}

@media (max-width: 370px) {

    .title h2 {
        font-size: 1rem;
    }
}

@media (max-width: 350px) {

    .title h3,
    .title h3 span {

        font-size: 0.8rem;        
    }

    .letter p {
        font-size: 1.3rem;
    }

    .projectImg img {
        max-width: 290px;
    }

    .projects button {
        font-size: 0.6rem;
    }
}

@media (max-width: 325px) {
    
    .title h1,
    .title h1 span{
        font-size: 1.1rem;
    }
    
    .title h2 {
        font-size: 0.9rem;
    }
}

@media (max-width: 275px) {

    .title h1,
    .title h1 span{
        font-size: 1rem;
    }

    .title h2 {
        margin-bottom: 40px;
    }
}