/* fonts */
@font-face {
  font-family: Nimbus-reg; /* set name */
  src: url(/fonts/AlphaLyrae-Medium.woff); /* url of the font */
}

@font-face {
  font-family: bagnard; /* set name */
  src: url(/fonts/NimbusSanL-Regu.ttf); /* url of the font */
}



/*simple set-up*/
html {
  box-sizing: border-box;
  font-size: 1rem;
  line-height: 1em;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
}

ol, ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

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

a:focus, a:hover {
    background-color: rgb(255, 227, 227);
}                   

.whole-page {
    display: grid;
    grid-template-columns:80px 20fr 80px;
    min-height: 100vh;
    align-items: start;
}

.page-content {
    grid-column: 2 / 3;
    font-family: bagnard;
    font-size: 2rem;
    line-height: 3rem;
    background-color: rgb(255, 255, 255);
    padding:4rem;
    text-align: left;
}

.page-content h1 {
    font-family: Nimbus-reg;
    padding-bottom: 1.2rem;
    border-bottom: 2px solid rgb(255, 227, 227);
    margin-bottom: 2rem;
}

.page-content h2 {
  font-size: 2.2rem;
  padding-bottom: 0.6rem;
}

.page-content h3 {
  font-size: 1.5rem;
  border-bottom: 2px solid rgb(255, 227, 227);
  border-top: 2px solid rgb(255, 227, 227);
}

.page-content article {
  padding: 2rem;
}

/*freelance*/

.freelance img {
  padding-top:1rem;
  padding-bottom:3rem;
}

/*projects*/


.projects img, article {
  padding-top:1rem;
  padding-bottom:3rem;
}


/*about*/

.about-content {
    margin: 2rem 10rem 0rem 10rem; 
}

.about-content p {
    margin-bottom: 1rem; 
}



/*media enquiries*/
@media (max-width: 700px) {



.whole-page {
    display: grid;
    grid-template-columns:50px 1fr 50px;
    min-height: 100vh;
    align-items: start;
}


.page-content {
    grid-column: 2 / 3;
    font-family: bagnard;
    font-size: 1.5rem;
    line-height: 2rem;
    padding:1rem;
    text-align: center;
}

.page-content article {
  padding: 0rem;
}

/*projects*/


/*about*/
.about-content {
    margin: 1rem 1rem 0rem 1rem; 
}

.about-content p {
    margin-bottom: 1rem; 
}

}