@import url('default.css');

 .container {
     position: absolute;
     top: 1em;
     left: 0;
     flex-direction: column;
     align-items: flex-start;
     width: 75%;
 }

 .container.italian,
 .container.english {
     display: none;
     /* Spenti di default, vengono accesi (flex) dal js in base alla lingua */
 }

 h1,
 h2 {
     width: 100%;
     padding: .1em;
     background-color: var(--tm-div-bg);
 }

 ul {
     list-style-position: outside;
     margin: 0px;
     padding: 20px;
 }

 .box1,
 .box2 {
     background-color: rgba(255, 255, 255, .6);
     border-top: var(--tm-border-allbox2);
     border-right: var(--tm-border-right);
     border-bottom: var(--tm-border-allbox2);
     border-left: var(--tm-border-allbox2);
     margin: 10px;
     padding: 20px;
     width: 100%;
 }

 .box1-content {
     margin-top: 0.5em;

     p {
         padding: 0.3em;
         line-height: 1.3em;
     }
 }

 h2,
 .box1,
 .box2 {
     border-right: var(--tm-border-right);
 }

 .copyText {
     cursor: pointer;
     font-size: 0.8em;
     padding: .1em;
     background: var(--tm-yellow);
     border: var(--tm-border-allother);
     text-align: center;

 }

 @media screen and (min-width: 1088px) {
     .container {
         width: 65%;
         flex-direction: row;
         align-items: stretch;
     }

     .box1,
     .box2 {
         width: 50%;
         /* Ogni DIV occupa metà della larghezza del container */
     }
 }

 @media screen and (min-width: 1408px) {
     .container {
         width: 915px;
         flex-direction: row;
         align-items: stretch;
     }

     .box1,
     .box2 {
         width: 50%;
         /* Ogni DIV occupa metà della larghezza del container */
     }
 }