@font-face {
  font-family: SofiaSans;
  src: url(./SofiaSans.ttf);
}
html {
  scroll-behavior: smooth;
}

*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  transition: all var(--_tspeed_fast) ease;
}

:root {
  --_radius: 0.2em;
  --_tspeed_fast: 250ms;
  --_tspeed_slow: 400ms;
  --_ttype_squish: cubic-bezier(0.86, -0.1, 0.27, 1.15);
  --color-white1: 237, 237, 237;
  --color-white2: 222, 222, 222;
  --color-white3: 194, 194, 194;
  --color-black1: 10, 10, 11;
  --color-black2: 18, 18, 23;
  --color-black3: 21, 21, 25;
  --color-blue: 12, 94, 202;
  --color-red: 249, 31, 89;
  --color-green: 174, 224, 128;
  --color-magenta: 195, 128, 224;
  /* light color scheme */
  --primary-bg--light: var(--color-white1);
  --primary-fg--light: var(--color-black2);
  --secondary-bg--light: var(--color-white2);
  --secondary-fg--light: var(--color-black1);
  --muted--light: var(--color-white3);
  --accent--light: var(--color-blue);
  /* dark color scheme */
  --primary-bg--dark: var(--color-black1);
  --primary-fg--dark: var(--color-white2);
  --secondary-bg--dark: var(--color-black2);
  --secondary-fg--dark: var(--color-white1);
  --muted--dark: var(--color-black3);
  --accent--dark: var(--color-blue);
}
:root[data-theme=light] {
  --p-bg: var(--primary-bg--light);
  --p-fg: var(--primary-fg--light);
  --s-bg: var(--secondary-bg--light);
  --s-fg: var(--secondary-fg--light);
  --muted: var(--muted--light);
  --accent: var(--accent--light);
  --text-fg: var(--color-black3);
  color-scheme: light;
}
:root[data-theme=dark] {
  --p-bg: var(--primary-bg--dark);
  --p-fg: var(--primary-fg--dark);
  --s-bg: var(--secondary-bg--dark);
  --s-fg: var(--secondary-fg--dark);
  --muted: var(--muted--dark);
  --accent: var(--accent--dark);
  --text-fg: var(--color-white3);
  color-scheme: dark;
}

/*
*   GENERAL STYLING
*/
p {
  color: rgb(var(--text-fg));
}

a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: rgb(var(--accent));
}
a b {
  text-decoration: underline;
}
a:hover {
  color: rgb(var(--p-fg));
  text-decoration: underline;
}
a.reverse {
  color: rgb(var(--p-fg));
}
a.reverse:hover {
  color: rgb(var(--accent));
}

button {
  display: flex;
  padding: 4px 16px;
  background-color: rgb(var(--s-bg));
  color: rgb(var(--p-fg));
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--_tspeed_slow) ease;
}
button svg {
  width: 18px;
  margin-right: 10px;
}
button:hover {
  color: rgb(var(--accent));
  border: 2px solid rgb(var(--accent));
}

body {
  font-family: "SofiaSans";
  line-height: 1.5;
  background-color: rgb(var(--p-bg));
}

.icon {
  width: 1.4em;
  color: rgb(var(--accent));
}
.icon.external {
  fill: rgb(var(--accent));
}
.icon.ml {
  margin-left: 5px;
}
.icon.mr {
  margin-right: 5px;
}

span.linespacer {
  display: block;
  height: 2px;
  width: 80%;
  margin: 10px auto;
  background-color: rgb(var(--s-bg));
}

.w-telling {
  display: grid;
  grid-template-columns: 60% 40%;
  align-items: center;
}
.w-telling-art {
  width: 300px;
  height: 300px;
  background: none;
  position: relative;
  justify-self: end;
}
[data-theme=dark] .w-telling-art img {
  opacity: 0.4;
}
.w-telling-text p {
  padding: 10px 0 0 10px;
}
.w-telling-text-links {
  display: flex;
  justify-content: space-evenly;
}
.w-telling-text-links a {
  margin: 0 10px;
  border-radius: 6px;
}

.w-button {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  margin: 10px;
  padding: 20px;
  border: solid 2px rgb(var(--s-bg));
  border-radius: 8px;
  color: var(--p-fg);
  cursor: pointer;
}
[data-theme=dark] .w-button {
  box-shadow: 0px 0px 6px 0px black;
  -webkit-box-shadow: 0px 0px 6px 0px black;
  -moz-box-shadow: 0px 0px 6px 0px black;
}
[data-theme=light] .w-button {
  box-shadow: 0px 0px 6px 0px rgb(var(--muted), 0.2);
  -webkitbox-shadow: 0px 0px 6px 0px rgb(var(--muted), 0.2);
  -moz-box-shadow: 0px 0px 6px 0px rgb(var(--muted), 0.2);
}
.w-button-icon {
  width: 50px;
  margin-right: 20px;
  color: rgb(var(--accent));
}
.w-button-text h3 {
  color: rgb(var(--p-fg));
}
.w-button-text p {
  color: rgb(var(--s-fg));
}
.w-button:hover {
  color: rgb(var(--accent));
  border-color: rgb(var(--accent));
}

.textselector {
  display: flex;
  margin-top: 40px;
  position: relative;
  justify-content: center;
}
.textselector > * {
  position: absolute;
}
.textselector > *:not(.show) {
  opacity: 0;
}

.w-grid4 {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto auto;
}

/*
*   NAVBAR STYLING
*/
header .container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 20px 10%;
}
header .container > * {
  margin: 0 50px;
}
header .container .title {
  font-size: 1.1em;
}
header .container .title svg {
  fill: rgb(var(--accent));
  width: 1.7em;
  margin-right: 10px;
}
header .container .links a {
  display: inline-block;
  padding: 0 14px;
}
header .container .other {
  display: flex;
  align-items: center;
}
header .container .other .themeswitch {
  opacity: 0;
  margin-left: 20px;
  padding: 2px;
  display: flex;
  border: solid 2px rgb(var(--accent));
  border-radius: 50%;
  cursor: pointer;
  transition: opacity --_tspeed_slow ease;
}
header .container .other .themeswitch svg {
  margin: 0;
  padding: 2px;
}
header .container .other .themeswitch:hover svg {
  fill: rgb(var(--accent));
}
.ontop header .container {
  position: absolute;
  width: 100%;
  z-index: 10;
}
header .hero {
  width: 100%;
  height: 800px;
  background-color: rgb(var(--p-bg));
  background-image: url("../img/hero.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: -1;
}

/*
*   Content STYLING
*/
main {
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  width: 60%;
  padding: 10px;
}
.content > * {
  margin: 100px 0;
}

section.aboutme {
  margin-top: 100px;
}
section.aboutme p {
  font-size: 1.1em;
}

section.skills h2 {
  text-align: center;
  margin-bottom: 20px;
}
section.skills .textselector > * {
  width: 60%;
}
section.skills .textselector > * .title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
section.skills .textselector > * .title .icons {
  display: flex;
}
section.skills .textselector > * .title .icons svg {
  width: 40px;
  margin: 0 5px;
}
section.skills .textselector > * p {
  font-size: 1.1em;
}

section.projects .title h2 {
  text-align: center;
  margin-bottom: 20px;
}
section.projects .project-list {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
}
section.projects .project-list .project {
  margin: 40px;
  cursor: pointer;
  width: 300px;
}
section.projects .project-list .project-art {
  width: auto;
  height: 160px;
  background: none;
  position: relative;
  justify-self: end;
}
[data-theme=dark] section.projects .project-list .project-art img {
  opacity: 0.4;
}
section.projects .project-list .project-details {
  padding: 30px 20px 10px 20px;
  background-color: rgb(var(--p-bg));
  z-index: 2;
}
section.projects .project-list .project-details h3::after {
  content: "Click for information";
  margin-left: 15px;
  font-size: 0.7em;
  color: rgb(var(--accent));
}
section.projects .project-list .project:hover h3 {
  color: rgb(var(--accent));
}
section.projects .project-list > * {
  margin: 40px;
}/*# sourceMappingURL=styles.css.map */

#w-telling-art-mobile {
  display: none;
  text-align: center;
  margin: auto auto 40px auto;
  width: 240px;
  height: 240px;
}

.mobilemenu {
  margin-left: 20px;
  display: none;
}


@media only screen and (min-width: 860px) and (max-width: 1300px) {

  .content {
    width: 96%;
  }

  header .container > * {
    margin: 10px 10px;
  }

  section.projects .project-list {
    grid-template-columns: repeat(2, auto);
  }
}

@media only screen and (max-width: 860px) {
  #w-telling-art-mobile {
    display: block;
  }

  #w-telling-art-default {
    display: none;
  }

  .content {
    text-align: center;
    width: 95%;
  }

  .w-telling {
    padding: 0;
    text-align: center;
    grid-template-columns: 100%;
    grid-template-rows: auto auto;
  }

  header .container > * {
    margin: 10px 10px;
  }

  header .container .links{
    display:none;
  }

  section.aboutme {
    margin-top: 10px;
  }

  header .container {
    padding: 20px 0px;
  }

  header .other .contact {
    display: none;
  }

  .mobilemenu {
    display: flex;
  }

  .w-button-text {
    display: none;
  }

  .w-grid4 {
    display: grid;
    grid-template-columns: 70px 70px 70px 70px;
    grid-template-rows: auto;
    justify-content: space-evenly;
  }

  .w-button {
    display: flex;
    padding: 8px;
    color: rgb(var(--accent));
  }

  .w-button-icon {
    text-align: center;
    margin: auto;
  }

  .textselector {
    width: 100%;
  }

  section.skills .textselector > * {
    width: 100%;
  }

  section.projects .project-list {
    grid-template-columns: repeat(1, auto);
  }
}

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

.active-skill-button {
  border-color: rgb(var(--accent));
}