@font-face {
  font-family: 'Sen';
  font-style: normal;
  font-weight: 200;
  src: url(https://fonts.gstatic.com/s/sen/v7/6xKjdSxYI9_3kvWNAGn5LEwJ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

header {
  font-family: 'Sen', sans-serif;
  font-size: 30px;
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Sen', sans-serif;
  font-size: 20px;
  text-align: center;
  margin: 0;
}

p {
  font-family: 'Sen', sans-serif;
  font-size: 14px;
  text-align: center;
  margin: 0;
}

#icon {
  width: 30px;
  cursor: pointer;
  display: block;
  margin-left: auto;
}

:root {
  --primary-color: #33475b;
  --secondary-color: #f2f7fb;
}

.dark-theme{
  --primary-color: #f2f7fb;
  --secondary-color: #33475b;
}

body {
  margin: auto;
  width: auto; 
  padding: 50px;
  font-family: 'Sen', sans-serif; 
  color: var(--primary-color);   
  background-color: var(--secondary-color);
      }

.headshot{
  padding: 10px; 
  height: 150px;
  width: 150px;
  border-color: var(--primary-color);
  border-width: 5px;
  border-style: solid;
  border-radius: 200px;
} 

  .adjust {
    -ms-transform: translateX(+30%);
    transform: translateX(+30%);
  }

  .icon-size {
    width: 30px;
    padding: 10px;
  }

  .buttonhover{
    width: 200px;
    height: 60px;
    border-radius: 20px;
    color: var(--secondary-color);
    background: var(--primary-color);
    font: 'Sen';
    font-size: 18px;
    text-decoration: none;
    margin: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 0 #586f86
    
  }
  
  .buttonhover:hover{
    width: 200px;
    height: 60px;
    color: var(--secondary-color);
    background: var(--primary-color);
    font: 'Sen';
    font-size: 18px;
    text-decoration: none;
    margin: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 8px 10px 0 #586f86;
    transition: 0.4s;
    
  }

  .flex-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
  }

  @media (max-width: 800px) {
    .flex-container {
      flex-direction: column;
    }
  }

    @media (min-width: 1000px) {
      .body {
      width: 600px;
      }
    }