/*
  solarized colors from https://ethanschoonover.com/solarized/  
  $base03:    #002b36;
  $base02:    #073642;
  $base01:    #586e75;
  $base00:    #657b83;
  $base0:     #839496;
  $base1:     #93a1a1;
  $base2:     #eee8d5;
  $base3:     #fdf6e3;
  $yellow:    #b58900;
  $orange:    #cb4b16;
  $red:       #dc322f;
  $magenta:   #d33682;
  $violet:    #6c71c4;
  $blue:      #268bd2;
  $cyan:      #2aa198;
  $green:     #859900;
*/

html {
  background-color: white;
  font-family: 'Inconsolata', monospace;
}

h1 {
  font-size: 150%;
  /* color: #cb4b16;
  color: #b58900; */
  font-weight: normal;
}

#container {
  width : 40%;
  margin: 2rem auto 0 auto;
  padding-top : 2rem;
  color: #657b83;
}

#profile {
  display: block;
  margin: 0 auto 2em auto; 
  height: 10em;
  border-radius: 50%;
}

.emphasis {
  color: #268bd2;
}

.underline {
  text-decoration: underline;
}

.bold {
  font-weight: bold;
}

.italics {
  font-style: italic;
}

.tab {
  color: #859900;
  margin-right: 20px;
}

.me {
  color: #b58900;
  color: #cb4b16;
}

.hobby-container {
  margin-top: 40px;
  font-style: normal;
}

.hobby-container-title {
  color: #6c71c4;
  margin-bottom: 10px;
}

.hobby-row {
  display: flex;
  flex-wrap: wrap;
}

.hobby-title {
  color: #d33682;
  flex: 20%;
  min-width: 8rem;
}

.hobby-body {
  padding-bottom: 10px;
  flex: 80%;
}

@media screen and (max-width: 700px) {
  html {
    font-size: 1rem;
  }

  h1 {
    font-size: 1.3rem;
  }

  #profile {
    height: 6rem;
  }

  #container {
    width : 85%;
  }
  .hobby-container {
    margin-top: 20px;
  }

  .tab {
    margin-right: 10px;
  }
}