/** GLOBAL THEME **/

:root {
    --primary-text-color: #fa0404;
    --body-font: 'Georgia', serif;
    --body-font-size: 20px;
    --title-font: Georgia;
    --body-color: #313131;
    --link-color: rgb(68, 125, 190); 
    /* --theme-color: rgb(155, 184, 175); */
    /* --theme-color-dark: rgb(111, 146, 135); */
    /*--theme-color: rgb(228, 181, 156);
    --theme-color-dark: rgb(66, 34, 7);*/
    --theme-color: hsl(218, 33%, 32%);
    --theme-color-dark: rgb(35, 50, 75);

    
    /*--light-color: rgba(239,234,222,1); */
    --light-color: rgb(243, 238, 232);

    --title-bar: 500px;
}

/* Whole document */
html { height: 100%; }

/* Body of the document */
body { font-family: var(--body-font); font-size: var(--body-font-size);           /* text        */
       letter-spacing: 0.5px; margin: 0; padding: 0;                              /* location    */
       background: var(--light-color); /*rgba(239,234,222,0.2)/*                                       /* background  */
       min-height: 100%; display: flex; flex-direction: column; }
    
    /* cover */
.header {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)),
              url('img/background2.jpg') no-repeat center center;  
  height: 350px;  width: 100%; }                                /* size        */
              
    /* site name */
    .site { font-family: var(--title-font); color: var(--light-color);
        font-size: 28px;
        position: fixed;
        z-index: 200;
        padding: 4px; padding-left: 12px; }
    
    /* navigation bar */
    .navbar { padding: 10px; text-align: right;
              background: rgba(0,0,0,0.65);
              position: fixed;
              top: 0;
              left: 0;
              right: 0;
              z-index: 100; }

    /* links of the navbar */
    .navbar-link { text-decoration: none; color: var(--light-color);              /* text        */
                   font-size: 18px;
                   padding: 4px; }                                                /* location    */

    /* indicator of current section */
    .navbar-active { border-bottom: 7px solid var(--light-color); }

    /* sub-bar */
    .line {background: var(--theme-color);                           
            height: 10px ; width: 100%; }   

    /* title of the page */
    .title { font-size: 80px; color: var(--light-color); font-family: var(--title-font);      /* font        */
             margin-top: 70px; text-align: center; }                              /* location    */
    
    /* subtitle of the page */
    .subtitle { font-size: 32px; color:var(--light-color); font-family: var(--title-font);   /* font        */
                margin-top: 10px; text-align: center; }                           /* location    */

    /* main block */
    .main { padding-top: 40px;                                                    /* location    */
            box-sizing: border-box; flex-wrap: wrap; flex-grow: 1;
            margin: auto; margin-right: auto; }                                   /* size        */

    /* textual block */
    .info { margin-top: 10px; text-align: justify; width: 100%; }                /* location    */

    /* home - picture */
    .profile { float: left; margin-top: 40px;
            margin-bottom: 40px; margin-right: 60px; flex: 0 0 auto;  
            max-width: 300px; height: auto; 
            border-radius: 5%;}

    /* home - textual block */
    .info-home { margin-top: 10px; margin-left: auto; float: left;               /* location    */
                 text-align: justify; flex: 1;                     
                 min-width: 30%; max-width: 500px }                              /* size        */

    /* in-page documents */
    .doc { margin: auto; margin-right: auto;                                     /* location    */
           box-sizing: border-box; flex-wrap: wrap; flex-grow: 1;
           width: 100%; margin-bottom: -50px }                                   /* size        */

    /* footer */
    .footer { padding-top: 20px; margin-top:50px;                                /* location    */      
              background: var(--theme-color);                                    /* background  */
              height: 150px ; width: 100%;                                       /* size        */
              color: var(--light-color); font-size: var(--body-font-size); }     /* text        */

    /* footer bar */
    .footer-bar { width: 90%; text-align: center; margin: auto; 
                  display: grid; grid-template-columns: 1fr 300px 1fr; }
    .footer-bar a img { margin: 10px; text-align: center;                        /* location    */
                        width: 30px; height: auto; }                             /* size        */               
     
    /* markdown font */
    .markdown-font { font-family: var(--body-font);
                     color: var(--body-color); 
                     font-size: var(--body-font-size); }

    /* cv frame */
    .cv-frame { width: 100%; height: 100vh; margin: auto; }

/* Links */
a { color: var(--link-color); text-decoration: underline }

/* Smaller screens */
@media (max-width: 450px) {
    
    .header {flex: 1 auto;}

    .site{ display:none; font-size: var(--body-font-size); padding: 12px; padding-left: 12px; }

    .navbar-link { font-size: var(--body-font-size); }

    .title {font-size: 60px; }

    .subtitle {font-size: 22px; }

    .main{ width: 70%; flex-direction: column; }  /* min-height: 135vh; */
    
    .profile,
    .info-home { flex-basis: 100%; max-width: 100%; text-align: left; }

    .footer-bar { width: 90%; grid-template-columns: 1fr 230px 1fr; }

    .footer-bar a img { margin: 4px; width: 27px; }

    :root {
        --title-bar: 350px;
        --body-font-size: 16px;
    }
  }

/* Smaller screens */
@media (min-width: 451px) and (max-width: 899px) {
    
  .header {flex: 1 auto;}

  .site{ font-size: var(--body-font-size); padding: 12px; padding-left: 12px; }

  .navbar-link { font-size: var(--body-font-size); }

  .title {font-size: 60px; }

  .subtitle {font-size: 22px; }

  .main{ width: 70%; flex-direction: column; }  /* min-height: 135vh; */
  
  .profile,
  .info-home { flex-basis: 100%; max-width: 100%;}

  .footer-bar { width: 90%; grid-template-columns: 1fr 230px 1fr; }

  .footer-bar a img { margin: 4px; width: 27px; }

  :root {
      --title-bar: 350px;
      --body-font-size: 16px;
  }
}

@media (min-width: 900px) and (max-width: 1600px) {
    
  .main { max-width: 80%; } /* min-height: 60vh; */

.profile { max-width: 300px; margin-top: 110px; }
  
.info-home { flex-basis: 50%; max-width: 50%; margin-top: -10px; }
  :root {
    --body-font-size: 18px;
}
}

/* Bigger screens */
@media (min-width: 1601px) {
    
    .main{ max-width: 70%; } /* min-height: 80vh; */
    
    .profile { max-width: 300px; margin-top: 110px; }
    
.info-home { flex-basis: 50%; max-width: 50%; margin-top: -10px; }
}