@import url('https://rsms.me/inter/inter.css');

* {
  box-sizing: border-box;
}


html {
  font-size: 18px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: #111111;
  min-width: 300px;
  background-color: white;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-y: scroll;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

html, body, p {
  margin: 0;
  padding: 0;
}

body {
  line-height: 1.5;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

/*@media (min-width: 1200px) {*/
/*  .container {*/
/*    max-width: 1140px;*/
/*  }*/
/*}*/

@media screen and (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}

@media screen and (min-width: 1216px) {
  .container {
    max-width: 1152px;
  }
}

@media screen and (min-width: 1408px) {
  .container {
    max-width: 1344px;
  }
}


a, a:visited {
  text-transform: none;
  text-decoration: none;
  color: #111111;
}

.intro p:not(:last-child) {
  padding-bottom: 2rem;
}

.landing-page {
  min-height: 100vh;
  max-height: 1000px;
  display: flex;
  align-items: center;
}

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

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

.links {
  display: flex;
  justify-content: space-around;
}

.icon svg {
  height: 2rem;
  width: 2rem;
  padding: 0 0.5rem;
}

.about {
  border: 8px solid tan;
  padding: 3rem 1.5rem;
}

.content {
  width: 70%;
  font-size: 2rem;
}

span.web-dev {
  color: #9aadad;
}

span.devops {
  color: #b19cd9;
}

span.machine {
  color: lightcoral;
}

span.location {
  color: #77dd77;
}

a.food-carts-link {
  white-space: nowrap;
  position: relative;
  color: cornflowerblue;
}

a.food-carts-link:before {
  content: "";
  position: absolute;
  width: 0;
  height: 5px;
  bottom: 0;
  left: 0;
  background-color: #ffb6c1;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

a.food-carts-link:hover:before {
  visibility: visible;
  width: 100%;
}

a.github, a.linkedin {
  color: cornflowerblue;
  position: relative;
}

a.github:before, a.linkedin:before {
  content: "";
  position: absolute;
  width: 0;
  height: 5px;
  bottom: 0;
  left: 0;
  background-color: #ffb6c1;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

a.github:hover:before, a.linkedin:hover:before {
  visibility: visible;
  width: 100%;
}

.intro-name {
  font-size: 4rem;
}



#resume {
  border: 1px solid red;
  height: 5000px;
}

@media screen and (min-height: 1000px) {
  .landing-page {
    min-height: 1000px;
  }
}

@media screen and (max-width: 1408px) {
  .content {
    width: 90%;
  }
}

@media screen and (max-width: 1216px) {
  .intro-name {
    font-size: 3.2rem;
  }
  .content {
    font-size: 1.6rem;
  }
}

/*@media screen and (max-width: 1122px) {*/
/*  .intro-name {*/
/*    font-size: 3.2rem;*/
/*  }*/
/*  .content {*/
/*    font-size: 1.6rem;*/
/*  }*/
/*}*/

@media screen and (max-width: 992px) {
  .content {
    width: 85%;
  }

  .intro-name {
    font-size: 2.25rem;
    line-height: 1.25;
  }
}

@media screen and (max-width: 768px) {
  .intro-name {
    font-size: 2.25rem;
    line-height: 1.25;
  }
  .content {
    width: 100%;
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 576px) {
  .intro-name {
    font-size: 2rem;
    line-height: 1.2;
  }
  .content {
    font-size: 1.25rem;
  }
}

@media screen and (max-width: 450px) {
  .intro-name {
    font-size: 1.5rem;
    line-height: 1;
  }
  .content {
    font-size: 1rem;
  }
}



/*@media screen and (max-height: 700px) {*/
/*  .intro-name {*/
/*    font-size: 1.5rem;*/
/*    line-height: 1;*/
/*  }*/
/*  .content {*/
/*    font-size: 0.75rem;*/
/*  }*/
/*}*/

@media screen and (max-width: 321px) {
  .intro-name {
    font-size: 1rem;
    line-height: 1;
  }
  .content {
    font-size: 0.75rem;
  }

  .intro p:not(:last-child) {
    padding-bottom: 0.75rem;
  }

}