path: root/static/style.css

@font-face {
    font-family: 'DejaVu Sans';
    src: url('./fonts/dejavu-sans-fontfacekit/web fonts/dejavusans_regular_macroman/DejaVuSans-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DejaVu Sans';
    src: url('./fonts/dejavu-sans-fontfacekit/web fonts/dejavusans_bold_macroman/DejaVuSans-Bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'DejaVu Sans';
    src: url('./fonts/dejavu-sans-fontfacekit/web fonts/dejavusans_oblique_macroman/DejaVuSans-Oblique-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'DejaVu Sans';
    src: url('./fonts/dejavu-sans-fontfacekit/web fonts/dejavusans_boldoblique_macroman/DejaVuSans-BoldOblique-webfont.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'DejaVu Sans';
    src: url('./fonts/dejavu-sans-fontfacekit/web fonts/dejavusans_extralight_macroman/DejaVuSans-ExtraLight-webfont.woff') format('woff');
    font-weight: lighter;
    font-style: normal;
}

@font-face {
    font-family: 'Telegraf';
    src: url('./fonts/Telegraf-Free/PPTelegraf-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Telegraf';
    src: url('./fonts/Telegraf-Free/PPTelegraf-UltraLight.otf') format('opentype');
    font-weight: lighter;
    font-style: normal;
}

@font-face {
    font-family: 'Telegraf';
    src: url('./fonts/Telegraf-Free/PPTelegraf-UltraBold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'DejaVu Sans', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background-image: url("/static/media/grid-background-single-square-light.jpg");
    background-size: 1.25rem 1.25rem;
    background-attachment: fixed;
}

main {
    padding-top: 5rem;
    padding-bottom: 3rem;
    max-width: 60rem;
    margin-left: auto;
    margin-right: auto;
}

article, #intro, .main-bg {
  padding: 1rem 1.75rem;
  background-color: white;
  box-shadow: 0 0 1em 0.4em rgb(224, 224, 224);
}

article, #intro {
  margin-top: 1.75rem;
}

article h2 {
  margin-top: 0;
}

article p:last-of-type {
  margin-bottom: .5rem;
}

main:has(#intro) {
  padding-top: 1rem;
}

.top-bar {
    position: fixed;
    width: 100%;
    display: flex;
    align-items: center;
    padding: .7rem 1.5rem;
    background-color: black;
}

.top-bar a {
  color: white;
}

/* .logo-w-name {
    display: flex;
} */

.logo {
    padding-left: .75rem;
    padding-right: .75rem;
    height: 3rem;
    filter: invert(70%);
}

.landing-page {
  padding: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-text {
  display: flex;
  flex-direction: column;
}

.landing-text span {
  font-size: max(4rem, 10vw);
  font-weight: bolder;
  line-height: 1;
}

.arrow-container {
  position: absolute;
  bottom: 4rem;
}

.down-arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: block;
  padding: 1rem;
  transform: rotate(45deg);
}

h1 {
  font-size: 2.75rem;
  color: rgb(190, 190, 190);
  margin: 0;
}

.subtext {
  margin: 0;
  font-weight: bold;
}

.end {
  text-align: center;
  opacity: 30%;
  font-size: 2.5rem;
}

hr {
  margin-top: 2.5rem;
}

b {
  color:rgb(100, 100, 100);
}

h2, h3, h4, h5, h6 {
/*   margin-top: 2rem;
  margin-bottom: 0.7rem; */
  font-size: 1.5rem;
}

h3, h4, h5, h6 {
  opacity: 50%;
}

p {
  line-height: 1.25;
}

pre {
  white-space: pre-wrap;
}

.name {
  font-weight: bold;
  margin: auto .3rem;
  color: rgb(197, 197, 197);
}

.main-nav-position {
    display: flex;
    justify-content: right;
    flex-grow: 1;
}

.main-nav {
    display: flex;
    gap: 2rem;
}

.main-nav a {
  font-size: .8rem;
}

.toggler, .hamburger {
    display: none;
}

.even-2-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

iframe {
  max-width: 100%;
  aspect-ratio: 16/9;
  display: block;
}

figure {
  max-width: 35rem;
  margin: 2rem auto;
}

figure img:not(:first-child) {
  margin-top: 2rem;
}

figcaption {
  font-style: italic;
  color: rgb(177, 177, 177);
  margin-top: 0.3rem;
}

i {
  color: rgb(177, 177, 177);
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
    font-style: italic;
    color: rgb(177, 177, 177);
    background-color: rgb(73, 73, 73);
}

.thumbnail img {
    width: fit-content;
    aspect-ratio: 16/9;
    object-fit: cover;
}

a {
    color: black;
}

header a, .projects a {
  text-decoration: none;
}

.projects p {
  margin-top: 0.2rem;
  border-right: .5rem solid rgb(196, 196, 196);
  border-top: .12rem solid rgb(196, 196, 196);
}

.footer-logo {
    filter: invert(100%);
    height: 1rem;
    margin-left: .75rem;
}

footer {
    background-color: black;
    padding-left: 1rem;
    padding-right: 1rem;
}

address {
    gap: 2rem;
    font-size: .7rem;
    display: flex;
    justify-content: center;
}

footer * {
    color: white;
}

blockquote {
  font-style: italic;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 1.75rem;
}

@media screen and (max-width: 45rem) {
    nav {
      display: none;
    }
    .footer-logo {
      height: 1.5rem;
    }

    .even-2-col-grid {
        grid-template-columns: 1fr;
    }
    .gallery {
      grid-template-columns: repeat(2, 1fr);
    }

    .toggler{
    /* ALWAYS KEEPING THE TOGGLER OR THE CHECKBOX ON TOP OF EVERYTHING :  */
      visibility: visible;
      display: block;
      z-index: 4;
      height: 45px;
      width: 45px;
      position: fixed;
      top: .15rem;
      right: 1rem;
      cursor: pointer;
      opacity: 0;
      margin: 0;
    }

    .hamburger{
      z-index: 3;
      position: fixed;
      top: .15rem;
      right: 1rem;
      height: 45px;
      width: 45px;
      /*border-bottom-left-radius: 8px;
      background-color: var(--dark-transparent);*/
      /*background-color: black;*/

    /* FOR DISPLAYING EVERY ELEMENT IN THE CENTER : */

      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* CREATING THE MIDDLE LINE OF THE HAMBURGER : */

    .hamburger > div{
      position: relative;
      top: 0;
      right: 0;
      background: white;
      height: 2px;
      width: 60%;
      transition: all  0.4s ease;
    }

    /* CREATING THE TOP AND BOTTOM LINES :
    TOP AT -10PX ABOVE THE MIDDLE ONE AND BOTTOM ONE IS 10PX BELOW THE MIDDLE: */

    .hamburger > div::before,
    .hamburger > div::after{
      content: '';
      position: absolute;
      top: -10px;
      background: white;
      width: 100%;
      height: 2px;
      transition: all  0.4s ease;
    }

    .hamburger > div::after{
      top: 10px;
    }

    /* IF THE TOGGLER IS IN ITS CHECKED STATE, THEN SETTING THE BACKGROUND OF THE MIDDLE LAYER TO COMPLETE BLACK AND OPAQUE :  */

    .toggler:checked + .hamburger > div{
      background: rgba(0,0,0,0); /*Not bothering with var because one-off*/
    }

    .toggler:checked + .hamburger > div::before{
      top: 0;
      transform: rotate(-45deg);
    }

    /* AND ROTATING THE TOP AND BOTTOM LINES :  */

    .toggler:checked + .hamburger > div::after{
      top: 0;
      transform: rotate(45deg);
    }

    /* MAIN MENU WITH THE WHITE BACKGROUND AND THE TEXT :  */

    .main-nav {

    /* APPLYING TRANSITION TO THE MENU :  */

      display: flex;
      flex-direction: column;
      position: fixed;
      top: 0;
      right: 0;
      z-index: 2;
      background-color: rgba(0, 0, 0, 0.75);
      padding: 6rem 2rem 1rem 2rem;
      align-items: center;

    /* HIDDEN INITIALLY  :  */

      visibility: hidden;
    }

    .main-nav > a {
      margin-top: 15px;
      margin-bottom: 15px;
      font-size: 34px;
      z-index: 4;
    }

    /* IF THE TOGGLER IS CHECKED, THEN INCREASE THE WIDTH OF THE MENU TO 30% , CREATING A SMOOTH EFFECT :  */

    .toggler:checked ~ .main-nav{
      visibility: visible;
      animation: fadeIn 0.8s ease;
    }
    .toggler:checked ~ .bg-nav-block {
      visibility: visible;
      animation: fadeIn 0.8s ease;
    }
    .toggler:checked ~ .hamburger {
      background-color: #00000000;
    }
}

@media screen and (max-width: 27rem) {
  .logo {
    height: 10vw;
  }
  .address {
    font-size: .5rem;
  }
}