/*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal; }

ul {
  list-style: none; }

button,
input,
select,
textarea {
  margin: 0; }

html {
  box-sizing: border-box; }

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

img,
audio,
video {
  height: auto;
  max-width: 100%; }

iframe {
  border: 0; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0;
  text-align: left; }

@font-face {
  font-family: 'MixStitch';
  src:  url('fonts/MixStitch.woff2') format('woff2');
}
body {
  width: 100vw;
  height: 100vh;
  background-color: #282c35;
}

a {
  color: #fff;
}

a:visited {
  color: #fff;
}

.header {
  margin: 1rem 0;
  overflow: auto;
}

.ct_logo {
  display: block;
  float: left;
  font-family: 'Inconsolata', sans-serif;
  font-size: 2.5rem;
}
.ct_logo span.stitch {
  font-family: 'MixStitch', sans-serif;
}
.ct_logo a {
  text-decoration: none;
  color: #fff;
}
.ct_logo a:hover {
  background-image: linear-gradient(to right, #359378 100%, transparent 100%);
  background-position: 0 1.9rem;
  background-repeat: repeat-x;
  background-size: 5px 10px;
}

/*//////HOME//////*/
/*//////HOME//////*/
/*//////HOME//////*/

.code {
  display: flex;
  float: left;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 100vh;
  font-family: "Inconsolata", sans-serif;
  font-size: 128px;
  background-image: url("../img/code.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  transition: 0.5s ease-out;
}

@media only screen and (max-width: 1199px) {
  .code {width: 100%; height:50vh; -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);}
}

.thread {
  display: flex;
  float: left;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 100vh;
  font-family: "MixStitch", sans-serif;
  font-size: 128px;
  background-image: url("../img/thread.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  transition: 0.5s ease-out;
}

@media only screen and (max-width: 1199px) {
  .thread {width: 100%; height: 50vh; -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);}
}

.thread:hover, .code:hover {
  -webkit-filter: grayscale(20%); /* Safari 6.0 - 9.0 */
  filter: grayscale(20%);
}

.thread span, .code span {
  text-shadow: 0px 0px 5px #fff;
}

.thread:hover span, .code:hover span {
  background-image: linear-gradient(to right, #359378 100%, transparent 100%);
  background-position: 0 100px;
  background-repeat: repeat-x;
  background-size: 20px 25px;
  color: #fff;
  text-shadow: 0px 0px 5px #000;
}

/*//////CODE//////*/
/*//////CODE//////*/
/*//////CODE//////*/

.code__info {
  display: block;
  float: left;
  width: 50%;
  height: 100vh;
}

@media only screen and (max-width: 1199px) {
  .code__info {width: 100%; height: auto; padding: 0 1rem 5rem;}
}

.code__info-container {
  width: 600px;
  float: right;
  overflow: auto;
}
@media only screen and (max-width: 1199px) {
  .code__info-container {float: none; width: auto;}
}

.code__info-content {
  width: auto;
  text-align: left;
  padding-top: 5rem;
}

.code__info-content span {
  font-family: "Inconsolata", sans-serif;
  font-size: 1.2rem;
  color: #359378;
}

span.red {
  color: #e56e77;
}
span.orange {
  color: #e5a76c;
}
span.green {
  color: #9ecb7d;
}
span.white {
  color: #aeb5c1;
}
span.blue a {
  color: #57bcc8;
  text-decoration: underline 2px solid #57bcc8;
}
span.grey {
  color: #5e6572;
}
a.mail:hover {
  background-color: #57bcc8;
  color: #282c35;
}
span.tab-1 {
  margin-left: 10px;
}
span.tab-2 {
  margin-left: 20px;
}
span.tab-3 {
  margin-left: 30px;
}
span.tab-4 {
  margin-left: 40px;
}
span.bigger-text {
  font-size: 3rem;
}
@media only screen and (max-width: 1199px) {
  span.bigger-text {font-size: 2rem;}
}

.code__portfolio-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 10px 10px;
  width: 50%;
  height: 100%;
}
@media only screen and (max-width: 1199px) {
  .code__portfolio-container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 3rem 0rem;
    grid-template-areas:
    "steve"
    "premier"
    "karis"
    "wema"
    "dearheart"
    "counseling";
  }
}

.steve {
  background-image: url("../img/sdcom.png");
}
@media only screen and (max-width: 1199px) {
  .steve {grid-area: steve; height: 300px;}
}
.premier {
  background-image: url("../img/premiercom.png");
}
@media only screen and (max-width: 1199px) {
  .premier {grid-area: premier; height: 300px;}
}
.karis {
  background-image: url("../img/kariscom.png");
}
@media only screen and (max-width: 1199px) {
  .karis {grid-area: karis; height: 300px;}
}
.wema {
  background-image: url("../img/wemacom.png");
}
@media only screen and (max-width: 1199px) {
  .wema {grid-area: wema; height: 300px;}
}
.dearheart {
  background-image: url("../img/dearheartcom.png");
}
@media only screen and (max-width: 1199px) {
  .dearheart {grid-area: dearheart; height: 300px;}
}
.counseling {
  background-image: url("../img/counselingcom.png");
}
@media only screen and (max-width: 1199px) {
  .counseling {grid-area: counseling; height: 300px;}
}


.steve, .premier, .karis, .wema, .dearheart, .counseling {
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  transition: 0.3s ease-out;
}
@media only screen and (max-width: 1199px) {
  .steve, .premier, .karis, .wema, .dearheart, .counseling {
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
  }
}

.steve:hover, .premier:hover, .karis:hover, .wema:hover, .dearheart:hover, .counseling:hover {
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
  }
}


/*//////THREAD//////*/
/*//////THREAD//////*/
/*//////THREAD//////*/

.thread__info {
  display: block;
  float: left;
  width: 50%;
  height: 100vh;
}

@media only screen and (max-width: 1199px) {
  .thread__info {width: 100%; height: auto; padding: 0 1rem 5rem;}
}

.thread__info-container {
  width: 600px;
  float: left;
  overflow: auto;
  padding-left: 1.5rem;
}
@media only screen and (max-width: 1199px) {
  .thread__info-container {float: none; width: auto;}
}

.thread__info-content {
  width: auto;
  text-align: left;
  padding-top: 5rem;
}

.thread__info-content span.thread-text {
  font-family: "MixStitch", sans-serif;
  font-size: 2rem;
}

@media only screen and (max-width: 1199px) {
  .thread__info-content span.thread-text {
  font-size: 1.5rem;}
}

.thread__img {
  display: flex;
  float: left;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 100vh;
  background-image: url("../img/thread2.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
@media only screen and (max-width: 1199px) {
  .thread__img {width: 100%; height:400px;}
}

span.smaller-text {
  font-size: 1.2rem;
}