@font-face {
  font-family: ibm;
  src: url(../fonts/ibm_reg.woff);
}

@font-face {
  font-family: ibm-bold;
  src: url(../fonts/ibm_bold.woff);
}

:root {
    font-family: imb;
    --color-1: #f8f9fa;
    --color-2: #e9ecef;
    --color-3: #dee2e6;
    --color-4: #ced4da;
    --color-5: #adb5bd;
    --color-6: #6c757d;
    --color-7: #343a40;
    --color-8: #212529;
    --accent-1: #8b52fd;
    --accent-2: rgba(242,22,132,1);
    --color: #8b52fd;
    --gradient: linear-gradient(90deg, #8b52fd 0%, rgba(242,22,132,1) 100%);
    --transition-speed: 200ms;
    --shadow-1: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    --border-radius: 2rem;
    --size-breakpoint-sm: 800px;
  }

body {
  background-color: var(--color-1);
  font-family: ibm;
  text-align: center;
  margin: auto;
  overflow-y: scroll;
}

.wrapper {
  max-width: 50rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

.page {
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  background-color: var(--color-1);
  margin:auto;
  max-width: 1000px;
  padding: 5rem;
  border-radius: var(--border-radius);
}

footer {
  padding: 5rem;
  background-color: var(--color-8);
  color: var(--color-2);
}

section[class=dark] {
  background-color: var(--color-7);
  color: var(--color-2);
}

section[class=black] {
  background-color: var(--color-8);
  color: var(--color-2);
}

h1 {
  font-family: ibm;
  font-size: 3rem;
}

h2 {
  font-family: ibm;
  font-size: 1.5rem;
}

h3 {
  font-family: ibm-bold;
  font-size: 5rem;
  margin:0
}

h4 {
  font-family: ibm;
  font-size: 1.2rem;
}


svg {
  stroke: var(--color-2);
}

section h4 {
  margin-top: 0px;
  font-family: ibm-bold;
  font-size: 2rem;
}

section h5 {
  margin-top: 0px;
  margin-bottom: 0px;
  font-family: ibm-bold;
  font-size: 1.5rem;
}

.diagonal {
  position: relative;
  color: var(--color-2);
}
.diagonal::after {
  content: '';
  background: var(--color-7);
  position: absolute;
  inset: 0;
  transform: skewY(3deg);
  z-index: -1;
}

.diagonal-reverse {
  position: relative;
  color: var(--color-2);
}
.diagonal-reverse::after {
  content: '';
  background: var(--color-7);
  position: absolute;
  inset: 0;
  transform: skewY(-3deg);
  z-index: -1;
}

.flat-top {
  top: -5rem;
  padding-top: 15rem;
  z-index: -2;
}

.playlist {
  display: flex;
  flex-direction: row;
  justify-content: center;
  border: var(--color-7);
  border-radius: var(--border-radius);
  background-color: var(--color-1);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  padding: 2rem 2rem 2rem 2rem;
  margin: 2rem 2rem 10rem 2rem;
}

.video {
  
}

.button {
  background-image:var(--gradient);
	border-radius:var(--border-radius);
	border:none;
	display:inline-block;
	cursor:pointer;
	color:var(--color-1);
	font-family:ibm;
	font-size:1.5rem;
	padding:16px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px var(--color-6);
  transition: all 0.1s;
}

.icon {
  display: inline-block;
  height: 100%;
  overflow: hidden;
  filter: brightness(0) saturate(100%);
  stroke: #adb5bd;
}

.youtube {
  color: var(--color-2);
  background-image: linear-gradient(145deg, rgb(231, 3, 3), rgb(164, 0, 0));
}

.purple {
  color: var(--color-2);
  background-color: var(--color);
  background-image: none;
}

.purple:hover {
  background-color: #7141d1;
  color: var(--color-2);
}

.dark-button {
  color: var(--color-2);
  background-color: var(--color-7);
  background-image: none;
}

.dark-button:hover {
  background-color: var(--color-8);
  color: var(--color-2);
}

.row::after {
  content: "";
  clear: both;
  display: flex;
}


[class*="col-"] {
  float: left;
}

@media only screen and (max-width: 800px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: calc(100%-2rem);}

  .col-s-6:first-child {
    padding-right: 0.5rem;
  }

  .col-s-6:last-child {
    padding-left: 0.5rem;
  }

  [class*="col-"] {
    margin-bottom: 3rem;
  }
  .row {
    margin-bottom: -3rem;
  }

  .margin-sm {
    margin: 1rem;
  }
  
  .side-margin-sm {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  
  .margin-md {
    margin: 3rem;
    margin-bottom: 3rem;
  }
  
  .side-margin-md {
    margin-left: 3rem;
    margin-right: 3rem;
  }
  
  .margin-lg {
    margin: 5rem;
    margin-bottom: 5rem;
  }
  
  .side-margin-lg {
    margin-left: 5rem;
    margin-right: 5rem;
  } 
  
  .less-width {
    max-width: none;
  }
  
  .more-width {
    max-width: none;
  }
  section {
    padding-right: 2rem;
    padding-left: 2rem;
    padding-top: 8rem;
    padding-bottom: 8rem;
    color: var(--color-7);
  }
}

@media only screen and (min-width: 800px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}

  .row {
display: flex;
align-items: stretch;
}

.margin-sm {
margin: 1rem;
}

.side-margin-sm {
margin-left: 1rem;
margin-right: 1rem;
}

.margin-md {
margin: 3rem;
margin-bottom: 3rem;
}

.side-margin-md {
margin-left: 3rem;
margin-right: 3rem;
}

.margin-lg {
margin: 5rem;
margin-bottom: 5rem;
}

.side-margin-lg {
margin-left: 5rem;
margin-right: 5rem;
}

.less-width {
max-width: 1000px;
margin: auto;
}

.more-width {
max-width: 1400px;
margin: auto;
} 
section {
  padding: 10rem;
  color: var(--color-7);
}


}

.box-outline {
  outline: 2px solid var(--text-secondary);
  border-radius: var(--border-radius);
  padding-bottom: .25rem;

}

.box-header {
  background-color: var(--text-secondary);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  font-size: 2rem;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 100;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.box-body {
  font-size: 14px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 1.5rem;
}

/* repos  */
.topic {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 100%;
  flex-wrap: wrap;
}

.topic a {
  text-decoration: none;
  color: inherit;
}

.repository {
  box-shadow: var(--shadow-1);
  border-radius: var(--border-radius);
  height: 15rem;
  width: 15rem;
  border: 1px solid var(--color-2);
  margin: 2rem;
  transition: .2s;
}

.web-development {background-image: linear-gradient(to left top, #051937, #004d7a, #008793, #00bf72, #a8eb12);}
.machine-learning {background-image: linear-gradient(to right bottom, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);}
.data-analytics {background-image: linear-gradient(to right bottom, #5841d0, #673ccd, #7536ca, #812fc7, #8c26c3, #a31cba, #b510b1, #c505a7, #db1897, #ea3089, #f5487d, #fb5f74);}
.web-scraping {background-image: linear-gradient(to right bottom, #fe8200, #c59f00, #8cae2b, #54b563, #00b593, #00b3b4, #00afcd, #00a8dc, #009ef0, #0090ff, #4b7dff, #8e5ffb);}
.instructional {background-image: linear-gradient(45deg, #35cbb6, #a1dd75);}
.natural-language-processing {background-image: linear-gradient(138deg, #db52c9, #bd8165);}
.data-engineering {background-image: linear-gradient(11deg, #9db693, #899481)}
.cloud-computing {background-image: linear-gradient(1deg, #56b05d, #b16ea2);}

.repository div {
  position: relative;
  background-color: var(--color-2);
  border: 2px solid var(--color-2);
  top: 7.5rem;
  height: 7.5rem;
  border-radius: 0 0 1.9rem 1.9rem;
  padding: 1rem;
  transition: .2s;
}

.repository div p {
  font-family: ibm-bold;
  color: var(--color-7);
}

.repository div .tag {
  background-color: var(--color-5);
  color: var(--color-2);
  font-size: .8rem;
  padding: .1rem;
  transition: .2s;
}

.repository:hover {
  transform: translate3d(0, -1px,0) scale(1.03);
}


.repository:hover div .tag {
  font-size: .8533rem;
  padding: .10666rem;
}

.portfolio-section {
  padding-top: 5rem;
  padding-bottom: 5rem;
}


@media only screen and (min-width: 1350px) {
  .about-page {
  padding: 0;
    background-color: var(--color-1);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    flex-wrap:nowrap;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    margin:auto;
    max-width: 1000px;
    border-radius: var(--border-radius);
  }

  .about-page div p {
    display: inline;
    margin: 0.5rem;
    font-size: 0.95rem;
  }

  .about-page div {
    display: flex;
    padding: 2.5rem;
    flex-direction: column;
    justify-content:space-between;
    align-content: center;
    width: 50%;
    flex-wrap: wrap;
  }

  .about-page div p {
    font-size: 1rem;
  }

  /* about page */
  .about-img {
    position:relative;
    display: inline;
    left: 0;
    object-fit: contain;
    width: 50%;
    border-radius: var(--border-radius) 0 0  var(--border-radius) ;
  }  
  .d-md {
    display: none;
  }
}

@media only screen and (max-width: 1350px) {
  .d-lg {
    display: none;
  }
  .about-page-md {
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

  }
  .about-img {
    object-fit: contain;
    border-radius: var(--border-radius) var(--border-radius) 0 0;

  }
  .about-page-md div {
    display: flex;
    padding: 3rem;
    flex-direction: column;
    align-content: center;
  }

  .about-page-md div p {
    font-size: 1.3rem;
    font-weight: 600;
  }

}

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

form {
  font-size: 0;
}

input {
  font-size: 1.5rem;
  display: inline;
  height: 2.5rem;
}
input[type='text'] {
  border: 2px solid var(--color-7);
  border-right: none;
  border-radius: 2rem 0 0 2rem;
  background-color: var(--color-1);
  padding: .5rem 1.5rem .5rem 1.5rem;
  line-height: 1em;
}
input[type='text']:focus-visible {
  outline: none;
}

input[type='submit'] {
  border: 2px solid var(--color-7);
  border-left: none;
  border-radius: 0 2rem 2rem 0;
  background-color: var(--color-1);
  /* padding: .5rem 1.5rem .5rem .5rem; */
  padding-right: 1rem;
  line-height: 1em;
  cursor: pointer;
}
.education {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: flex-start;
}

.education img{
  object-fit: cover;
  width: 30%;
}

.education div {
  text-align: center;
  margin: auto;
  font-family: ibm;
  font-size: 1.3rem
}
}

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

  form {
    font-size: 0;
  }
  
  input {
    font-size: 1.5rem;
    display: inline;
    height: 2.5rem;
  }
  input[type='text'] {
    border: 2px solid var(--color-7);
    border-right: none;
    border-radius: 2rem 0 0 2rem;
    background-color: var(--color-1);
    padding: .5rem 1.5rem .5rem 1.5rem;
    line-height: 1em;
    width: 10rem;
  }
  input[type='text']:focus-visible {
    outline: none;
  }
  
  input[type='submit'] {
    border: 2px solid var(--color-7);
    border-left: none;
    border-radius: 0 2rem 2rem 0;
    background-color: var(--color-1);
    /* padding: .5rem 1.5rem .5rem .5rem; */
    padding-right: 1rem;
    line-height: 1em;
    cursor: pointer;
  }
  .education {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
  }
  
  .education img{
    object-fit: cover;
    width: 100%;
  }
  
  .education div {
    text-align: center;
    margin: auto;
    font-family: ibm;
    font-size: 1.3rem
  }
  }

.youtube-a {
  margin-top: 2rem;
  font-size: 1.25rem;
  display: block;
}


/* NAVBAR */
*,
*::before,
*::after {
    box-sizing: border-box;
    line-height: 1.5em;
}

html {
    scroll-behavior: smooth;
}


header {
    background-color: #ffffff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -4px rgba(0, 0, 0, 0.1);
    /* padding: 10px 20px; */
}
header .wrapper {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
header .logo img {
    height: 30px;
    display: block;
}

.navbar {
    position: fixed;
    top: 0;
    left: 100%;
    margin: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-1);
    padding: 20px;
    transition: left 0.3s;
}

.navbar.show {
    left: 0 !important;
}

.hide-scroll {
    overflow: hidden;
}

.navbar ul {
    all: unset;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}
.navbar ul a {
    all: unset;
    color: var(--color-7);
    text-transform: uppercase;
    cursor: pointer;
    font-weight: bold;
    font-size: 28px;
}
.navbar ul a:hover {
    color: #8b52fd;
}

.close-nav {
    text-align: right;
    margin-bottom: 20px;
}
.close-nav button {
    all: unset;
    background: var(--color-1);
    font-size: 42px;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 15px;
    border-radius: 3px;
    color: #444444;
}
.close-nav button:hover {
    color: #222222;
    background: white;
}

.menu-bar button {
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #f7f7f7;
    height: 50px;
    width: 50px;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 3px;
}
.menu-bar i {
    display: block;
    border-top: 3px solid #444444;
    border-bottom: 3px solid #444444;
}
.menu-bar i::after {
    display: block;
    content: "";
    border-top: 3px solid #444444;
    margin: 6px 0;
}
.menu-bar button:hover {
    background: white;
}
.menu-bar button:hover i {
    border-color: #222222;
}
@media (min-width: 550px) {
    .navbar {
        all: unset;
        display: block;
    }
    .navbar ul {
        flex-direction: row;
        gap: 20px;
    }
    .navbar ul a {
        font-size: inherit;
        padding: 20px 5px;
    }
    .close-nav,
    .menu-bar {
        display: none;
    }
    header .logo img {
    height: 40px;
    display: block;
}
}

.portfolio {
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  background-color: var(--color-1);
  margin:auto;
  max-width: 1000px;
  border-radius: var(--border-radius);
  font-family: ibm;
  margin-inline: auto;
}

.item-title {
  font-size: 1.2rem;
  font-weight: 600;
  display: flex;
}

.item .item-header .item-title .category {
  padding: .3rem .6rem .3rem .6rem;
  background-color: var(--accent-1);
  font-size: .7rem;
  color: var(--color-1);
  margin-left: .8rem;
  border-radius: var(--border-radius);
  align-items: center;
}

.portfolio .item .item-header{
  padding: 1rem 2rem 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item .first {
  border-radius: 2rem 2rem 0 0;
}

.item .last {
  border-radius: 0rem 0rem 2rem 2rem;
}

.portfolio .item .item-header:hover {
  background-color: var(--color-2);
  cursor: pointer;
}

.portfolio .item .item-text {
  display: none;
  text-align: left;
  padding: 0rem 2rem 1rem 2rem;
}

a {
  color: var(--color);
  text-decoration: none;
}
a:hover {
  color: #693dc2;
}

.chevron {
  height: .7rem;
  object-fit: cover;  
  transform: rotate(0);
}

.certifications {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
}

.certifications img {
  height: 15rem;
  margin: auto;
}

.studies {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
}

.studies img {
  height: 30rem;
}

.footer-links a {
  color: #f8f9fa;
}

.footer-links a:hover {
  color: #ced4da;
}

.languages-and-tools {
  display: inline-block;
  text-align: center;
}
.languages-and-tools p {
  padding: .7rem;
  margin: .3rem;
  display: inline-block;
  border-radius: 1rem;
  background-color: var(--color-7);
  color: var(--color-2);
}

.languages-and-tools p:hover{
  background-color: var(--color);
  cursor:default;
}