@font-face {
  font-family: 'Quicksand';
  src: local('Quicksand-Regular'), url('../fonts/quicksand/Quicksand-Regular.ttf') format('truetype');
  font-display: swap;
}

:root {
  overflow: hidden;
  --top-button-width: 10em;
  --top-color2: hsl(24deg, 16%, 80%);
  --top-color1: #369;
  --top-bar-margin: 60px;
  --sidebar-width: 0;
}


body {
  position: fixed;
  inset: 0;
  margin: 0;
  font-family: Quicksand, Arial, Helvetica, sans-serif;
  display: flex;
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  overflow-y: hidden;
}

.title {
  display: inline-block;
  font-size: 2em;
  text-align: center;
  margin: 3em;
  margin-left: 50%;
  transform: translate(-50%, 0);
  padding: 10px;
  border: black 2px solid;
}

.page {
    flex-basis: 100%;
    padding-top: 60px;
    padding-bottom: 100px;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 100vw;
    scroll-snap-align: center;
    box-sizing: border-box;
    position: relative;
    transition: clip-path 250ms linear;
    --dot-color: #ccc;
    --dot-bg: local top var(--top-bar-margin) left 0 / 22px 22px repeat radial-gradient(circle, var(--dot-color), transparent 2px);
    --radial-bg: fixed left 0 top var(--top-bar-margin) / 100% calc(100% - var(--top-bar-margin)) no-repeat radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.13) 100%), rgb(243, 243, 243);
    --menu-bg: local left 0 top 0 / 100% var(--top-bar-margin) no-repeat linear-gradient(white, white);
    --default-clip-path: polygon(var(--sidebar-width) 60px,60px 60px, 60px 0, calc(60px + 10em) 0,calc(60px + 10em) 60px,100% 60px,100% 100%,var(--sidebar-width) 100%);
    background: var(--menu-bg), var(--dot-bg), var(--radial-bg);
    clip-path: var(--default-clip-path);
}

.page:not(.page--main){
  clip-path: polygon(
    var(--sidebar-width) 60px,
    calc(100% - ( 4 - var(--tab-index) ) * var(--top-button-width)) var(--top-bar-margin),
    calc(100% - ( 4 - var(--tab-index) ) * var(--top-button-width)) 0,
    calc(100% - ( 3 - var(--tab-index) ) * var(--top-button-width)) 0,
    calc(100% - ( 3 - var(--tab-index) ) * var(--top-button-width)) var(--top-bar-margin),
    100% 60px,
    100% 100%,
    var(--sidebar-width) 100%,
    var(--sidebar-width) calc( var(--top-bar-margin) + 60px + var(--tab-index) * 60px ),
    0 calc( var(--top-bar-margin) + 60px + var(--tab-index) * 60px ),
    0 calc( var(--top-bar-margin) + var(--tab-index) * 60px ),
    var(--sidebar-width) calc( var(--top-bar-margin) + var(--tab-index) * 60px )
  );
}

.page::after {
  pointer-events: none;
  content: " ";
  z-index: 5;
  background: var(--top-color2);
  display: block;
  position: fixed;
  inset: 0 0 0 0;
  transition: clip-path 250ms linear;
}

.page--main::after{
  clip-path: polygon(
    0 0, 
    calc(60px + 10em) 0,
    calc(60px + 10em) 60px,
    60px 60px,
    60px 0
  );

}

.page:not(.page--main)::after{
  clip-path: polygon(
    0 0, 
    calc(100% - ( 3 - var(--tab-index) ) * var(--top-button-width)) 0,
    calc(100% - ( 3 - var(--tab-index) ) * var(--top-button-width)) 60px,
    calc(100% - ( 4 - var(--tab-index) ) * var(--top-button-width)) 60px,
    calc(100% - ( 4 - var(--tab-index) ) * var(--top-button-width)) 0,
    0 0,
    0 calc( 60px + 60px + var(--tab-index) * 60px ),
    var(--sidebar-width) calc( 60px + 60px + var(--tab-index) * 60px ),
    var(--sidebar-width) calc( 60px + var(--tab-index) * 60px ),
    0 calc( 60px + var(--tab-index) * 60px )
  );

}

.page--about { --tab-index: 0 }
.page--skills { --tab-index: 1 }
.page--works { --tab-index: 2 }
.page--contact { --tab-index: 3 }



/* NAVIGATION ICONS */
:is(.navigation__link--about, .pagelink-about)::before{ content: "♔"; }
:is(.navigation__link--works, .pagelink-works)::before{ content: "⚒"; }
:is(.navigation__link--skills, .pagelink-skills)::before{ content: "☑"; }
:is(.navigation__link--contact, .pagelink-contact)::before{ content: "☎"; }


/* NAVIGATION STATES */
:is(.navigation__link, .topbar-button):hover,
:is(.navigation__link, .topbar-button):focus {
  background-color: var(--top-color2);
}

/* TOP BAR */

.top-bar {
  z-index: 2;
  padding: 0 0 0 60px;
  margin: 0;
  position: fixed;
  inset: 0 0 auto 0;
  font-size: 16px;
  height: 60px;
  line-height: 60px;
  text-transform: uppercase;
  border-bottom: var(--top-color1) 1px solid;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
}

.topbar-buttons {
  display: flex;
  flex:1;
  justify-content: flex-end;
}

.topbar-button {
  display: inline-block;
  height: 60px;
  text-decoration: none;
  background: none;
  padding: 0px 20px;
  width: var(--top-button-width);
  box-sizing: border-box;
  text-align: center;
}

.topbar-button:before {
  font-size: 20px;
  margin-right: 0.5em;
}

.topbar-button.home-button{
  width: auto;
}

/* TOP LEFT MENU BUTTON */
.menu-button {
  padding: 0px;
  width: 60px;
  font-size: 40px;
  border: none;
  outline: none;
  z-index: 3;
  position: fixed;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* TOP BAR VERTICAL NAVIGATION */

.navigation {
  box-sizing: border-box;
  position: fixed;
  top: 61px;
  bottom: 0;
  padding: 0;
  margin: 0;
  width: var(--sidebar-width, 0);
  z-index: 3;
  transition: width 250ms linear;
  overflow-x: hidden;
  overflow-y: auto;
}

/* main page */

.main-introduction {
  height: auto;
}

.main-introduction h1 {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -100%);
}

.swipe-notification {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, 200%);
}

/* work page */

.work {
  position: relative;
  margin-bottom: 5em;
  display: flex;
  flex-flow: row wrap;
  gap: 5%;
  margin: 5%;
}
.work-description {
  flex: 1
}
.work-canvas {
  position: relative;
  flex: 0;
  display: inline;
  text-align: center;
}
.work-image {
  border-radius: 3%;
  max-height: 15em;
}