/* ---- */
/* ROOT */
/* ---- */

  :root{
  --bg:#FDD50B;
  --border:#E870A0;
  --text:#78226D;  
}

/* -------------  */
/* MY CUSTOM FONT */ 
/* -------------- */

@font-face {
    font-family: 'Connection'; 
    src: url('../assets/fonts/connection/Connection.otf') format('truetype'); 
    font-weight: normal;  /* Waga fonta. Jakby bylo bold to bedzie gruby wszedzie. */
    font-style: normal; /* Style fonta normlany. Można dać jeszcze italic czy oblique. Będzie wtedy bardziej pochylony */
}

/* font-family: 'JetBrainsMono-Regular';
src: url('../assets/fonts/JetBrainsMono-2.304/fonts/webfonts/JetBrainsMono-Regular.woff2') format('truetype'); */

/* font-family: 'Retroscape';
src: url('../assets/fonts/retroscape/Retroscape.ttf') format('truetype'); */

/* font-family: 'SHPinscher-Regular';
src: url('../assets/fonts/SHPinscher-Regular.otf') format('truetype'); */

/* font-family: 'Connection'; rodzina fontów? Wybiera po prostu nazwe mojego fonta. */
/* src: url('../assets/fonts/connection/Connection.otf') format('truetype'); Daje dokladna sciezke do naszego plku .otf. truetype to format pliku. */

/* -----------------  */
/* WHOLE BODY OF HTML */
/* -----------------  */

body {
    margin: 15px; /* If the bigger value than futher from edge of the page */
    background: linear-gradient(90deg, #78226d, #772141, #582177); /* gradient - "to right" = poziomo do prawej, pierwszy kolor góra, drugi dół. */
    color: var(--bg); /* color of our? whole body? What's inisde the body is have this color! */
    font-family: 'Connection', monospace; /* our font and a additonal font if SHPinscher-Regular wouldn't load */
    font-size: 1em; /* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-size */
    text-align: center; /* text-aling center w caluktim naszym body do center! */ 
}

p {
text-align: justify;  /* https://www.w3schools.com/cssref/pr_text_text-align.php */
text-align-last: center; /* https://www.w3schools.com/cssref/css3_pr_text-align-last.php */
}

li {
  text-align: left;  /* This looks better!!! Gosh! */ 
}

/* ================ */ 
/* Rainbow animated */
/* ================ */
@keyframes rainbow {
  0%    { color: red; }
  16%   { color: yellow; }
  33%   { color: lime; }
  50%   { color: cyan; }
  66%   { color: blue; }
  83%   { color: magenta; }
  100%  { color: red; }
}

.rainbow {
  animation-name: ranibow;         /* name of the animation*/
  animation-duration: 2s;        /* time duration */
  animation-iteration-count: infinite; /* infinite!  */
  /* bonus styling */
  font-size: 24px;
  font-weight: bold;
}

/* Download cursor https://www.rw-designer.com/cursor-detail/12845 (ONLY .cur because static is for firefox)*/
/* body {
cursor: url('../assets/cur/3D fninger.cur'), auto;
} */

/* ------- */
/* FLEXBOX */
/* ------- */

.flexbox{
    display: flex; 
    justify-content: center;
    align-items: flex-start;
    gap: 22px; /* This is a gap between flexboxe's */
    flex-wrap: wrap; /* This. If something doesen't fit side it goes down! */
}

/* ------------------------ */
/* LEFT-COLUMN RIGHT-COLUMN */
/* ------------------------ */

.left-column, .right-column {
        display: flex;
        flex-direction: column;
        width: auto;
        gap: 16px;
        flex-shrink: 0;
}

/* --------------------------- */
/* Wrappers for navigation bar */
/* --------------------------- */

.homelab-wrapper, /* If something is the same you can type pyte after a colen.*/
.find-me-here-wrapper,
.foss-journal-wrapper,
.home-wrapper,
.about-me-wrapper{
    position: relative;
}


/* --------------------------------- */
/* GIFS for navigation bar wrapper's */
/* --------------------------------- */

.edd-wave {
  width: 80px;
  position: absolute; 
  top: -80px;
  right: 20px;
  z-index: -1; 
}

.tux-rotate {
  width: 80px;
  position: absolute; 
  top: -60px;
  right: 45px;
  z-index: -1;
}

.glorp-type{
  width: 80px;
  position: absolute; 
  top: -60px;
  right: 45px;
  z-index: -1;
}

.home{
  width: 70px;
  position: absolute; 
  top: -60px;
  left: 10px;
  z-index: -1; 
}

.clap-bocchi{
  width: 70px;
  position: absolute; 
  top: -60px;
  left: 5px;
  z-index: -1;   
}


/* ----------------------- */
/* MAIN BOX + LEFT + RIGHT */
/* ----------------------- */

.main, 
.left-box, .right-box, .gustebook {
  background-color: var(--bg);
  border: 12px groove var(--border);
  color: var(--text);
  border-radius: 5px;
  padding: 20px;
}

.main {
  flex: 1;
        max-width: 600px; /* nie urośnie szerzej niż tyle */
        min-width: 300px; /* nie skurczy się za bardzo */
}

.left-box, .right-box {
  max-width: 400px;
  min-width: 300px;
}
  
.right-box a img{ 
    width:150px; 
    display:block; 
    margin:8px auto; 
}

/* ---------------------------------------------------------- */

/* --------- */
/* GUESTBOOK */
/* --------- */

.gustebook iframe {
  width: 100%;     /* 100% szerokości RODZICA (.gustebook) */
  height: 420px;
}

/* ---- */
/* CHAT */
/* ---- */
.chat iframe {
  width: 100%;     /* 100% szerokości RODZICA (.gustebook) */
  height: 420px;
}

/* ------ */
/* NAVBAR */
/* ------ */

.navbar {
    margin-top: 70px; /* place for give which one are above the navigation */
} 

.site-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
    padding: 16px 0;
}

.site-nav a {
    display: inline-block; /* Wyświetlanie liniowe oznacza to, że nasze <a> wyświetlą się w linii blokowo? */
    padding: 8px; /* Czyli tak jakby pakował karton i masz padding w środku. Czyli? Ile miejsca masz zanim dojdzie do tekstu czy tego co jest w środku? Czyli w naszym przypadku <a> bo jest site-nav a? */
    border-radius: 12px; /* Zaokrąglanie ramki! Radius Zaokrąglanie! */
    color: var(--text); /* Kolor tekstu naszego <a> znajdującego się w .site-nav! */
    background: var(--bg); /* Kolor background naszego <a> znajdującego się w .site-nav! */
    text-decoration: none; /* Dekoracja tekstu? Tutaj mam none, czyli bez żadnej dekoracji! */
    border: 8px groove var(--border); /* Czyli ramka 8 pikseli, styl groove czyli tak chyba 3D? no i kolor samej ramki. */
    transition: transform 0.5s ease, box-shadow .12s ease; /* Zakładam że dodaję jakiś cień czy coś i transformuję w parę sekund, 0.8 nawet nie sekundy */
}

.site-nav a:hover,
.site-nav a:focus {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(120, 34, 109, 0.08);
    outline: 3px solid rgba(120, 34, 109, 0.12);
    z-index: 2; 
}

/* ------------------------- */
/* Random GIFS fixed postion */
/* ------------------------- */

.noise-idle {
  position: fixed; /* Zostaje w miejscu na stronie. Jak scrollujesz znika bo strona jedzie w górę razem z nim. */
  top: 100px; /* -100 pikseli od górnej krawędzi przeglądarki */
  right: 5px; /* 10 pikseli od lewej krawędzi */
  width: 120px; /* szerokośc 200 pikseli */
  z-index: -1
}

.fake-noise {
  position: fixed; /* Zostaje w miejscu na stronie. Jak scrollujesz znika bo strona jedzie w górę razem z nim. */
  top: 50px; /* 500 pikseli od górnej krawędzi przeglądarki */
  right: 5%; 
  width: 200px; 
  z-index: -1
}

.miku-gleep {
  position: absolute; /* Zostaje na ekranie. Jak scrollujesz — nadal go widzisz zawsze. */
  top: 80px; /* 500 pikseli od górnej krawędzi przeglądarki */
  left: 130px; /* 300 pikseli od lewej krawędzi */
  width: 80px; 
  z-index: 1;
}

/* ------------------- */
/* GIF for leftwrapper */
/* ------------------- */

.left-box-wrapper,
.guestbook-wrapper{
    position: relative;
}