:root{
    --first-color: rgb(2, 2, 2);
    --second-color: black;
    --third-color:rgb(177, 177, 38);
    --fourth-color: rgb(157, 156, 156);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: beige;
    color:brown;
    font-family:Georgia, 'Times New Roman', Times, serif;
    margin: 7em;
}

body, html {
    height: 100%;
  }
 
header {
    padding: 3% 5%;
    background-attachment: fixed;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    background-color: antiquewhite;
    background-size: cover;
    background-position: 80%;
    border-radius: 0%;
    border-width: 100%;
    text-decoration: none;
}

header h1 {
    font-weight: bold;
    margin: 0;
    font-size: 36px;
    color: rgb(128, 109, 0);
    text-decoration: none;
}

header nav {
    margin: .75%;
}

header nav ul {
    text-align: right;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    list-style: none;
}

header nav ul li a {
    color:darkblue;
    padding: 10px 15px;
    font-weight: bolder;
    font-size: 2vw;
    font-style: normal;
    text-decoration: none;
}

header nav ul li a:hover {
    background: var(--second-color);
    color: var(--third-color);
    border-radius: 15px;
    text-shadow: none;
  }

/* "about me" section */
.about-section{
    display:flex;
    flex-wrap: wrap;
    border-radius: 20px;
}

 .marker {
    font-size: 48px;
    border-right: 3px solid;
    padding-bottom: 20px;
    text-align: center justify;
    margin: 0 auto 35px auto;
    width: 50%;
    text-align: left;
    border:thick;
    border-style: ridge;
    border: 15px;
    border-color:var(--first-color);
  }

.me {
    font-size: 48px;
    border-bottom: 3px solid;
    color: var(--second-color);
    padding-bottom: 20px;
    text-align: center;
    margin: 0 auto 35px auto;
    width: 50%;

  }

  .me img {
    display:flex;
    border: none;
    margin-left: 50px;
    padding: none;
    max-width: 150px;
    height: 800px;
    width: 120%;
    content:center;
    
  }

/* "work" section */

.run {
    text-align:center;
    font-size: larger;
    font-weight: bold;
    color:darkblue;
}

.projects a:hover{
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  
  .worx {
    border-style: groove;
    border-width: 1.27em;
    border-radius: 20%;
    padding:3em;
    margin: 10px;
    display:flex;
    flex: auto;
    flex-direction: column;
    flex-shrink:inherit;
    background:var(--fourth-color);
    color: var(--first-color);
    content: center;
    text-align: center;
    text-justify: auto;
    width:70%;
  }
  
  .worx img {
    font-size: 48px;
    border-bottom: 3px solid;
    padding-bottom: 20px;
    text-align: center;
    margin: 0 auto 35px auto;
    width: 50%;
  }

  .worx h3 {
    font-size: 28px;
  }
  
  .worx h4 {
    font-weight: lighter;
    font-size: 22px;
    margin-bottom: auto;
  }

  .worxone {
    width: 100%;
    padding: 2%;
    border-radius: 20%;
    border-style: groove;
    border-width: 1.27em;
    flex: auto;
    background: var(--fourth-color);
    color: var(--first-color);
    content: center;
    text-align:center;
    font-size: 25px;
    text-justify: auto;
    font-weight: 800;
  }

  .worxone img {
      width:50%;
      flex-shrink: inherit;
      padding: auto;

  }

/* footer "contact" section */
.ids li {
    text-align:justify;
    text-decoration: none;
    justify-content:space-between;
    padding: 2%;
    font-weight: lighter;
    font-size: 1.25vw;
    display: inline;
}

/* "utilities" */
.flex-row {
    display: flex;
  }