/* === Main === */

body > main {
   min-height: 70vh;
}

/* === Header === */

body > header {
   padding-block: 0px;
}

header {
   display: flex;
   justify-content: center;
   margin-top: 40px;
   position: relative;
}

header a:hover,
nav a:hover {
   text-decoration: underline;
}

.search-and-theme-col {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   position: absolute;
   top: 0%;
   right: 0px;
   gap: 15px;
}

.search-and-theme-col input {
   width: 0px;
   background-image: var(--search-icon);
   background-position: right 0px center;
   margin-bottom: 0;
   background-repeat: no-repeat;
   background-size: 23px 23px;
   height: 23px;
}

.search-and-theme-col input:focus {
   border-bottom: 1px solid var(--pico-color);
   width: 100%;
}

.lang-and-rss-col {
   display: flex;
   flex-direction: column;
   position: absolute;
   top: 0%;
   left: 0px;
   gap: 15px;
}

.theme {
   --width: 27px;
   margin-top: 7px;
   background-image: var(--theme-icon);
   width: var(--width);
   height: var(--width);
   background-repeat: no-repeat;
   background-size: var(--width) var(--width);
}

.rss {
   --width: 18px;
   margin-top: 5px;
   background-image: var(--rss-icon);
   width: var(--width);
   height: var(--width);
   background-repeat: no-repeat;
   background-size: var(--width) var(--width);
}

.header-action {
   cursor: pointer;
}

.text:hover {
   text-decoration: none !important;
}

.text > h1 {
   font-size: 50px;
   margin-top: 10px;
   margin-bottom: 0px;
}

.text > p {
   margin-left: 15px;
   margin-top: 5px;
   margin-bottom: -15px;
}

.logo {
   background-image: var(--logo);
   background-size: contain;
   height: 220px;
   width: 120px;
   position: absolute;
   top: -30px;
   right: calc(50% + 140px);
}

.greekHeader .logo {
   right: calc(50% + 154px);
}

.greekHeader .text {
   margin-left: -10px;
}

/* === Nav === */

nav {
   padding-left: 130px;
   margin-top: 30px;
   border-top: 2px solid var(--pico-color-2);
   border-bottom: 3px solid var(--pico-color-2);
   min-height: 40px;
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 15px;
}

/* === Footer === */

footer {
   position: relative;
   left: 50%;
   right: 50%;
   margin-left: -50vw;
   margin-right: -50vw;
   width: 100vw;
   background-color: var(--pico-background-color-2);
   display: flex;
   justify-content: center;
}

footer > div {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   box-sizing: border-box;
}

.footer-actions {
   display: flex;
   gap: 100px;
}

.footer-actions > a {
   color: #ebdbb2;
}

.footer-more {
   display: flex;
   align-items: center;
   gap: calc(var(--pico-typography-spacing-vertical) / 2);
}

.footer-more span {
   margin-left: var(--pico-typography-spacing-vertical);
   color: white;
}

.footer-more img {
   margin-bottom: 5px;
   width: 70px;
}

.git {
   --width: 32px;
   background-image: url(/assets/git.png);
   width: var(--width);
   height: var(--width);
   background-repeat: no-repeat;
   background-size: var(--width) var(--width);
}

/* === Other === */

.page h2 {
   margin-bottom: calc(1.5 * var(--pico-typography-spacing-vertical));
}

.tags span {
   margin-right: 10px;
}

/* === Responsiveness === */

@media (max-width: 1536px) {
   .footer-actions {
      display: flex;
      gap: 70px;
   }
}

@media (max-width: 1280px) {
   header {
      justify-content: flex-start;
      gap: 20px;
      margin-bottom: -20px;
   }

   .lang-and-rss-col {
      gap: 10px;
      top: 38%;
      left: inherit;
      right: 1.33%;
   }

   .search-and-theme-col {
      right: 1%;
      top: -15%;
   }

   .logo {
      margin-top: 20px;
      position: relative;
      right: initial;
      width: 80px;
      height: 150px;
   }

   .greekHeader .logo {
      right: initial;
   }

   .text > h1 {
      padding-top: 15px;
      margin-left: -10px;
      font-size: 40px;
   }

   .text > p {
      margin-left: -10px;
   }

   nav {
      margin-top: 0px;
      padding-left: 0px;
   }

   .footer-actions {
      display: flex;
      gap: 50px;
   }

   .theme {
      margin-top: 0px;
   }
}

@media (max-width: 768px) {
   .logo {
      margin-top: 10px;
   }

   .lang-and-rss-col {
      right: 2%;
   }

   .text > h1 {
      padding-top: 15px;
      font-size: 40px;
   }

   nav {
      margin-top: 0px;
      padding-left: 0px;
   }

   .footer > div {
      gap: 20px;
      flex-direction: column;
      align-items: flex-start;
   }

   .footer-actions {
      flex-direction: column;
      gap: 0px;
   }
}

@media (max-width: 500px) {
   nav {
      gap: 7px;
      width: 100vw;
      margin-left: calc(-1 * var(--pico-spacing));
   }
}

@media (max-width: 400px) {
   body {
      --pico-spacing: 1rem;
   }
}

@media (max-width: 375px) {
   header {
      margin-bottom: 0px;
      gap: 0px;
   }

   nav {
      margin-top: -10px;
      flex-direction: column;
      padding-top: 10px;
      padding-bottom: 10px;
   }

   .bullet {
      display: none;
   }

   .logo {
      margin-top: 10px;
      width: 90px;
      height: 130px;
   }

   .greekHeader .text {
      margin-left: 0px;
      margin-left: -10px;
   }

   .text {
      padding-top: 15px;
      margin-left: -10px;
   }

   .text > h1 {
      margin-top: -15px;
      margin-left: 0px;
      font-size: 30px;
   }

   .text > p {
      margin-bottom: 0px;
      margin-left: 0px;
   }

   .search-and-theme-col {
      top: -30px;
   }

   .lang-and-rss-col {
      right: 5px;
      gap: 9px;
      top: 33%;
   }

   .rss {
      --width: 15px;
   }

   .theme {
      margin-top: 0px;
   }
}