:root {
  --main-color: #000000bf;
  --main-color-trans: rgba(20, 20, 20, 0.65);
  --text-color: #ffffff;
  --text-color-trans: #b4b4b4;
  --main-grad: radial-gradient(to top left, #341741, #1C4B3F);
  --main-grad-trans: radial-gradient(to top left, #341741bf, #1c4b3fbf);
  --accent: #5b63b7;
}

html, body {
  background: #341741;
  background: -webkit-radial-gradient(bottom right, #341741, #1C4B3F);
  background: -moz-radial-gradient(bottom right, #341741, #1C4B3F);
  background: radial-gradient(to top left, #341741, #1C4B3F);
  color: var(--text-color);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: 'Ubuntu', sans-serif;
  overflow-x: hidden;
}

* {
  color: var(--text-color);
  text-decoration: none;
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

a.button,
button.button {
  display: block;
  padding: .75rem 1rem;
  font-size: 1rem;
  background: var(--accent);
  border: 1.5px solid var(--accent);
  width: fit-content;
  border-radius: .6rem;
  transition: background .3s ease;
}

a.button:hover,
button.button:hover {
  background: transparent;
}

nav.top {
  width: calc(100% - 2rem);
  height: 4rem;
  padding: .5rem 1rem;
  margin: 1rem;
  border-radius: .6rem;
  display: flex;
  align-items: center;
  background: var(--main-color-trans);
  transition: transform .3s ease;
}

nav.top>.left {
  width: 20%;
}

nav.top>.left img {
  width: 3rem;
  height: 3rem;
}

nav.top>.center {
  width: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
}

nav.top>.right {
  width: 20%;
  direction: rtl;
}

nav.top>.right span {
  cursor: pointer;
  padding: .25rem .7rem;
  margin: .5rem;

  -webkit-user-select: none; /* Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}

nav.top>.right .menu {
  display: none;
  margin: 0;
}

.nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  min-width: 6rem;
  font-size: 1rem;
  padding: .5rem .7rem;
  margin: .5rem;
}

nav.side {
  background: var(--main-color-trans);
  position: fixed;
  top: 1rem;
  right: 1rem;
  height: calc(100vh - 2rem);
  width: 20rem;
  border-radius: .6rem;
  transition: transform .3s ease;
  transform: translate(21rem);
}

nav.side .menu {
  position: absolute;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
  padding: .25rem .7rem;

  -webkit-user-select: none; /* Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}

nav.side>.list {
  width: min(100%, 100vw);
  height: calc(100% - 6rem);
  padding: 5rem 1rem 1rem 1rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

nav.side>.footer {
  height: 6rem;
  padding: 1rem;
}

nav.side>.footer * {
  color: var(--text-color-trans);
  margin-top: 0;
  margin-bottom: 0;
}

nav.side>.footer #footer-link {
  margin-left: .3rem;
  border-bottom: 1px solid var(--text-color-trans);
}

nav.side .nav-btn {
  width: calc(100% - 1rem);
  justify-content: unset;
} 

@media screen and (max-width: 960px) {
  nav.top>.center>* {
    display: none;
  }
  nav.top>.right .menu {
    display: unset;
  }
  
  #side-toggle:checked ~ nav.top {
    transform: translate(-21rem);
  }

  #side-toggle:checked ~ nav.side {
    transform: translate(0);
  }
  
  #side-toggle:checked ~ main {
    transform: translate(-21rem);
  }
}

main {
  transition: transform .3s ease;
}

section.front {
  --front-height: 400px;
  position: relative;
  background: #74c5bb;
  width: calc(100% - 2rem);
  height: 400px;
  border-radius: .6rem;
  margin: 1rem;
  overflow: hidden;
  transition: height .3s ease;
}

section.front>.cover {
  position: absolute;
  top: 0;
  left: 0;
  height: var(--front-height);
}

section.front>.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--front-height);
  transition: transform .3s ease;
}

section.front>.image-overlay>svg {
  position: absolute;
  top: 0;
  left: 460px;
  height: 100%;
  fill: #132123
}

section.front>.text {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1rem 2rem 1rem 1rem;
  height: var(--front-height);
  width: calc(100% - 620px);
  background: #132123;
  display: flex;
  justify-content: center;
  flex-direction: column;
  transition: transform .3s ease;
}

section.front>.text>h1 {
  font-size: 2.5rem;
  text-align: right;
  margin-bottom: .5rem;
}

section.front>.text>p {
  text-align: right;
  color: var(--text-color-trans);
}

section.front>.bottom-text {
  position: relative;
  left: 0;
  top: var(--front-height);
  height: 0;
  transition: height .3s ease;
  width: calc(100% + 2rem);
  transform: translate(-1rem);
  background: #132123;
  padding: 1rem;
}

section.front>.bottom-text>h1 {
  margin-bottom: .5rem;
  font-size: 1.75rem;
}

@media screen and (max-width: 960px) {
  section.front {
    height: calc(400px + 12rem);
  }
  section.front>.bottom-text {
    height: fit-content;
    transition: height .3s ease;
  }
  section.front>.text,
  section.front>.image-overlay {
    transform: translate(25rem);
  }
}

section.about {
  position: relative;
  background: var(--main-color-trans);
  width: calc(100% - 2rem);
  border-radius: .6rem;
  margin: 1rem;
  padding: 1rem;
  overflow: hidden;

  display: flex;
}

section.about>.image,
section.about>.image img {
  width: min(100%, 450px);
  border-radius: .6rem;
}

section.about>.text {
  margin-right: 1rem;
  padding: 1rem;
  width: calc(100% - 450px);
}

section.about>.text>h1 {
  margin-bottom: .5rem;
  font-size: 2rem;
}

section.about>.text>a {
  margin-top: .5rem;
}

@media screen and (max-width: 960px) {
  section.about {
    display: block;
  }

  section.about>.image,
  section.about>.image a {
    width: unset;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  section.about>.text {
    margin: 0;
    margin-bottom: 1rem;
    width: unset;
  }
}

section.projects {
  margin: 1rem;
  padding: 1rem;
  background: var(--main-color-trans);
  border-radius: .6rem;
}

section.projects>.search {
  position: relative;
  width: 100%;
  padding: .5rem;
  border: 1.5px solid var(--accent);
  border-radius: .6rem;
  padding: .5rem;
  color: var(--accent);
}

section.projects>.search input {
  background: transparent;
  outline: none;
  border: none;
  width: 100%;
  height: 2.5rem;
  font-size: 1rem;
  padding: .5rem 1rem;
}

section.projects>.search span {
  position: absolute;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--accent);
}

section {
  margin: 1rem;
  padding: 1rem;
  background: var(--main-color-trans);
  border-radius: .6rem;
}

section.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .5rem;
  text-align: center;
}

section.footer p,
section.footer a {
  color: var(--text-color-trans);
}

section.footer .social-links {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: .5rem 0;
}

section.footer .social-links svg {
  width: 1.5rem;
}

section.footer a.link:hover {
  border-bottom: 1px solid var(--text-color-trans);
}

section.footer a.icon-link * {
  fill: var(--text-color-trans);
  color: var(--text-color-trans);
  transition: 
    fill .3s ease,
    color .3s ease;
}

section.footer a.icon-link:hover * {
  fill: var(--text-color);
  color: var(--text-color);
}


/* Projects page */
section.project-front p.undertitle {
  transform: translateY(-.5rem);
  padding-bottom: .25rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid var(--text-color-trans);
}

section.project-front .center {
  height: 16rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

span.linebreak {
  display: block;
  height: .35rem;
}

div.projects-grid {
  display: grid;
  --project-item-width: 24rem;

  margin-top: 2rem;

  display: grid;
  grid-template-columns: repeat(auto-fill, calc(var(--project-item-width) + 2rem));
  grid-gap: 1rem;
}

@media (max-width: 600px) {
  div.projects-grid {
    --project-item-width: max(calc(100% - 1rem), 12rem)
  }
}

div.projects-grid>.item {
  background-color: rgb(40, 40, 40);
  padding: 1rem;
  border-radius: 1rem;
  width: var(--project-item-width);
  transition: transform .3s ease;
}

div.projects-grid>.item:hover {
  transform: translateY(-.6rem);
}

div.projects-grid>.item>img {
  width: 100%;
  border-radius: .6rem;
  margin-bottom: .5rem;
}

div.projects-grid>.item>.tag-list {
  min-height: 2rem;
}

div.projects-grid>.item>h1 {
  margin: .5rem 0 .5rem;
}

div.projects-grid>.item>p {
  color: var(--text-color-trans);
}

div.projects-grid>.item>.info>span {
  display: inline-flex;
  align-items: center;
  background: var(--main-color-trans);
  border-radius: .6rem;
  padding: .35rem .55rem .35rem .35rem;
}

div.projects-grid>.item>.info>span>span {
  font-size: 1.25rem;
  margin-right: .5rem;
}

div.inline {
  display: flex;
  align-items: center;
}

div.inline :last-child {
  margin-left: auto;
}

form#add-project {
  padding: 1rem;
  display: flex;
  flex-direction: column;
}

form#add-project>div {
  margin-left: 1rem;
  margin-top: 1rem;
}

form#add-project>div.misc {
  margin-bottom: 1rem;
}

form#add-project>div.misc>div:not(.sect) {
  display: flex;
  flex-direction: column;
}

form#add-project>div.sections>div.section>div:not(.sect) {
  display: flex;
  flex-direction: column;
}

form#add-project>div.misc>:not(:last-child) {
  margin-bottom: .5rem;
}

form#add-project>div.sections>div.section>:not(:last-child) {
  margin-bottom: .5rem;
}

form#add-project input,
form#add-project select,
form#add-project textarea {
  padding: .5rem .7rem;
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: .6rem;
  outline: none;
}

form#add-project textarea {
  resize: vertical;
}

form#add-project div.section select.type option span::before {
  content: "\F462";
}

fieldset {
  border: none;
  display: flex;
  width: 100%;
  
--grid-layout-gap: 1rem;
--grid-column-count: 4;
--grid-item--min-width: 8rem;

--gap-count: calc(var(--grid-column-count) - 1);
--total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
--grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

display: grid;
grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
grid-gap: var(--grid-layout-gap);
}

label.radio-choice {
  width: 1fr;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  border: .2rem solid transparent;
  border-radius: .6rem;
}

label.radio-choice img {
  margin: .5rem;
  width: 6rem;
}

label.radio-choice p {
  margin: 0 1rem .5rem 1rem;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;

}

div.section {
  position: relative;
}

div.section>img {
  position: absolute;
  top: 0;
  right: 0;
  width: 2rem;
}

input#text:checked ~ label[for="text"] {
  border: .2rem solid var(--accent);
}

input#image:checked ~ label[for="image"] {
  border: .2rem solid var(--accent);
}

input#image_text_l:checked ~ label[for="image_text_l"] {
  border: .2rem solid var(--accent);
}

input#image_text_r:checked ~ label[for="image_text_r"] {
  border: .2rem solid var(--accent);
}

div.section>div:not(.inline) {
  margin-left: 1rem;
}

div.section:not(:first-child) {
  border-top: .2rem solid var(--accent);
  padding-top: .5rem;
  margin-top: .5rem;
}

div.section:last-child {
  margin-bottom: 1rem;
}