@import "navbarmain.css";                  /* Contiene anche i CSS per Login e PopLang */
@import "login.css";


@import '/templates/whowe/css/whowe.css';
@import '/templates/cart/css/cart.css';
@import '/templates/contacts/css/contacts.css';
@import '/templates/creations/css/creations.css';

@import '/addon/counter/css/counter.css';

/* MAIN VARIABLES     -----------------------------------------*/
:root{
  --main-title-color              : #45fa45;
  --main-title-shadow             : #022402;
  --secondary-title-color         : #e812ef;
  --secondary-title-shadow        : #27105e;
  --tfooter-text-color            : grey;
  --tfooter-text-color-dark       : rgb(35, 34, 34);
}


/*@@@@@@@@@ BASE SETTINGS - First Mobile Site   max-width:575 orientation portartrait                  */

/* HTML main Settings                       */
html{
  height: 100%;
  margin: 0;}

/* MAIN-WRAPPER Settings                    */
.main-wrapper{
  height: 100%;
  display: flex;
  flex-direction: column;}

/* WINDOW MANAGER Settings                  */
#wm{
  flex          : 1;
  overflow      : auto;
  margin-bottom : 5px;
  margin-top    : 5px;}

/* WINDOW MANAGER - Start Page  Settings    */
#wm.startpage{
  background-color: rgba(231, 221, 221, 0.8);}

/* MAIN TITLE - Main Container Settings     */
.main-title-div{
  display       : flex;
  flex-flow     : column wrap;
  text-align    : center;
  align-content : space-around;}

/* FOOTER - Start Page Settings */
.tfooter.startpage{
  background    : rgba(.2,.2,.2,.1);
  color         : white;
  font-weight   : bold;}

/* APP CLASS - Background page for different sections   */
.app-class{
  height        : 100%;
  padding       : 15px;
  border-radius : 10px;
  display       : block;}



/*@@@@@@@@ CHANGE in other DEVICES MODE         */

/* BODY:
    - background-image          
*/
body{
  height: 100%;
  margin: 0;
  background-image: url("/img/mainpage_mobile.jpg");      /*C*/
  background-size: cover;}

  /* MAIN TITLE:
    - font size
    - text-shadow
*/
.main-title{
  color         : var(--main-title-color);
  font-style    : oblique;
  font-weight   : bold;
  font-family   : 'Segoe UI';
  font-size     : 60px;                                   /*C*/
  text-shadow   : 4px 4px 4px var(--main-title-shadow);   /*C*/
  height        : 50vh;
  align-content : center;}

/* SECONDARY TITLE:
    - font-size
    - text-shadow
*/
.secondary-title{
  color: var(--secondary-title-color);
  font-weight: bold;
  font-family:'Cochin';
  font-size: 30px;                                          /*C*/
  text-shadow: 3px 3px 2px var(--secondary-title-shadow);   /*C*/
  height: 20vh;
  align-content: last baseline;}

/* FOOTER TEXT:
    - font-size
*/
.tfooter{
  background    : rgba(.2,.2,.2,.7);
  font-size     : 14px;                     /*C*/
  text-align    : right;
  color         : var(--tfooter-text-color) /*C*/;
  padding-right : 40px;}

/* FOOTER - Author Settings         
  - font-size
*/
.tfooter .author-class{
  font-size     : 8px;         /*C*/}

/* BASE TEXT SETTINGS   
    - font-size
*/
.normal-text{
  font-size: 25px;}

/* Per Decidere i margini da utilizzare per la pagina principale    */
.main-wrapper{
  padding:5px 5px;      /*C*/
}



/*------------------------ MOBILE -------------------------------*/
/* MOBILE - LandScape             */
@media screen and (max-height:599px) and (orientation:landscape){
  /* CHANGES:
    ■ body:
      - background-image
    ■ main-title:
      - font-size
      - text-shadow
    ■ secondary-title:
      - font-size
      - text-shadow
    ■ tfooter:
      - font-size
    ■ tfooter (startpage):
      - color
  */
  body{
    background-image: url("/img/mainpage.jpg");      /*C*/}

  .main-title{
    font-size: 60px;
    text-shadow: 4px 4px 4px var(--main-title-shadow);}

  .secondary-title{
    font-size: 30px;
    text-shadow: 4px 4px 4px var(--main-title-shadow);}

  .tfooter{
    font-size: 14px;}

  .tfooter.startpage{
    color: rgb(99, 99, 99);}
}
/*------------------------ TABLET -------------------------------*/
/* TABLET - Portrait              */
@media screen and (min-width:599px) and (max-width:1279px) and (orientation:portrait){
  /* CHANGES:
      ■ main-title:
        - font-size
        - text-shadow
      ■ secondary-title:
        - font-size
        - text-shadow
      ■ tfooter (startpage):
        - color
  */
  
  .main-title{
    font-size   : 100px;
    text-shadow : 8px 8px 6px var(--main-title-shadow);}

  .secondary-title{
    font-size   : 50px;
    text-shadow : 3px 3px 2px var(--secondary-title-shadow);}
  
  .tfooter.startpage{
    color       : var(--tfooter-text-color-dark);}
}
/* TABLET - LandScape             */
@media screen and (min-height:599px) and (max-height:1279px) and (orientation:landscape){
  /* CHANGES:
      ■ body:
        - background-image
      ■ main-title:
        - font-size
        - text-shadow
      ■ secondary-title:
        - font-size
        - text-shadow
      ■ tfooter.startpage:
        - font-size
        - text-shadow
  */
  
  body{
    background-image: url("/img/mainpage.jpg");}

  .main-title{
    font-size     : 100px;
    text-shadow   : 8px 8px 6px var(--main-title-shadow);}

  .secondary-title{
    font-size     : 50px;
    text-shadow   : 3px 3px 2px var(--secondary-title-shadow);}
  
  .tfooter.startpage{
    color         : var(--tfooter-text-color-dark);}
}

/* 
  Al momento non risultano essere necessari altri MEDIASCREEN    
*/


/* DESKTOP - TV - SCREEN          */
/* HDMI (min widht  1280 - 720) - LandScape                */
@media screen and (min-width:1280px) and (min-height:720px) and (orientation:landscape){

}

/* HDMI (min  1280 x 720) - Portrait                 */
@media screen and (min-width:720px) and (min-height:1280px) and (orientation:portrait){

}

/* FULL HDMI (min 1920 x 1080) - LandScape                  */
@media screen and (min-width:1920px) and (min-height:1080px) and (orientation:landscape){

}

/* FULL HDMI (min 1920 x 1080) - Portrait                   */
@media screen and (min-width:1080px) and (min-height:1920px) and (orientation:portrait){

}

/* BASE RISOLUZIONI   
    HD  =>  1280 x 720
    FHD =>  1920 x 1080
    QHD =>  2560 x 1440
    UHD =>  3860 x 2160
*/