/* Box Model Hack */
* {
  box-sizing: border-box;
}

/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.clear {
	clear: both;
}

/******************************************
/* BASE STYLES
/*******************************************/

body > *{
font-family: sans-serif;
overflow-x: hidden;
}


/******************************************
/* LAYOUT
/*******************************************/
header, footer{
width: 100%;
padding-bottom: 5px;
clear: both;
background: rgb(223, 218, 218);
}

h1,h2{
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

main{
    color: whitesmoke;
    background-image:
    url("../img/dark-green-background-2560x1440-for-ipad-2.jpg");
    width: 100%;
    clear: both;
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     background-attachment: fixed;
     
}

.brocco-img{
  border: solid green 2.5px;
  border-radius: 10%;
  margin-top: 0.5%;
  margin-left: 1.3%;
  width:15px ;
  height:10px ;
}

.broccolito{
  font-family:Impact, 'Arial Narrow Bold', sans-serif;
  color: green;
  display: block;
  margin-left: 0.5%;
  width:3.5%;
  font-size: 40%;
}

button{
  padding-left: 2.5%;
  padding-right: 2.5%;
  padding-top: 0.5%;
  padding-bottom: 0.5%;
  border-radius: 0.8rem;
  margin-top: 2%;
  border: none;
  margin-right: 3%;
}


.hover:hover{
  background: rgb(223, 144, 223);
}
.circle{
  border: solid white 0.5px;
  border-radius: 1rem;
  margin-top: 2%;
}



a :hover{
background: rgb(223, 144, 223);
border-radius: 0.5rem;
}

.ulbox{
  display: flex;
  justify-content:space-around;
  margin-top: -1%;
}


.mainbox{
  display: flex;
  justify-content:space-evenly;
  margin-top: -3%;
   padding-left: 3%;
}


div > h1{
  width: 80%;
  padding-left: 19%;
  margin-top: 6%;
}


a{
  text-decoration: none;
  color: black;
}

li{
  list-style: none;
}

.headerbox{
  color: rgb(0, 0, 0);
  font-weight: bolder;
}

div{
  text-align: center;
}
div > p{
  width: 45%;
  margin-left: 25%;
}
 
.box{
  text-align: start;
}


.madia-scroller{
display: grid;
grid-auto-flow: column;
grid-auto-columns: 40%;
background: rgb(223, 218, 218);
border: solid rgb(165, 161, 161) 8px;
a,h3{
  color: rgb(0, 0, 0);
}
li{
  list-style: circle;
}

overflow-x: auto;
margin-top: 8%;
margin-bottom: 8%;
}

footer {
text-align: center;
font-size: larger;
padding-top: 5px;
}

.others >p{
  width: 100%;
  margin-left: 0%;
}

.others > h2{
  width: 70%;
  margin-left: 16%;
}

/******************************************
/* ADDITIONAL STYLES
/*******************************************/
@media(min-width:130px) and (max-width:500px){

  header{
    color: whitesmoke;
    background-image:
    url("../img/dark-green-background-2560x1440-for-ipad-2.jpg");
    width: 100%;
    clear: both;
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     background-attachment: fixed;
     
}

.headerbox{
  color:white;
  font-weight: bolder;
}

 h1,h2,p{
  font-size: 90%;
 }
h1{
  width: 90%;
  padding-left: 5%;
}


h2{
  margin-left: 2%;
}

.brocco-img{
  margin-top: 2%;
  margin-left: 6%;
  width:30px ;
  height:20px ;
}

.broccolito{
  font-size: 65%;
  margin-left: 3%;
}

div > p{
  width: 95%;
  margin-left: 2%;
  text-align:center;
}


button{
  
  border: none;
  

   background-image: none;
}


.madia-scroller{
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100%;
background: rgb(223, 218, 218);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment:scroll ;
color:rgb(232, 227, 255);

a{
  color: rgb(0, 0, 0);
}
li{
  list-style: circle;
  padding-bottom: 4%;
}

overflow-x: scroll;
scrollbar-width: none;
}

.ms{
  margin-bottom: 10%;
}

.madia-element{
  width: 255px; 
  height: 150px;
  padding-bottom: 10%;
  clear: both;
  padding-top: 2%;
  font-size: smaller;
}

.box{
  width: 100%;
}

.others >p{
  width: 90%;
  margin-left: 5%;
  
}

.ulbox{
  display: table-row;
  margin-top: -2%;
} 


.off-screen-menu{
  background-color: #000;
  height: 30vh;
  width: 15%;
  max-width: 450px;
  position: fixed;
  top: 0;
  right: -450px;
  transition: .1s ease;
  font-size: 2rem;
  padding-right: 35%;
  padding-top: 14%;
}

.off-screen-menu.active{
  right: 0;
}



.ham-menu{
  height: 50px;
  width: 70px;
  position: relative; 
  margin-left: auto;
  margin-top: -10%;
}

.ham-menu > span{
  height: 6px;
  width: 55%;
  background-color: #000;
  border: solid white 1px;
  border-radius: 25px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: .1s ease;
}

.ham-menu span:nth-child(1){
  top: 25%;
}


.ham-menu span:nth-child(3){
  top: 75%;
}

.ham-menu.active span:nth-child(1){
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.ham-menu.active span:nth-child(2){
  opacity: 0;
}

.ham-menu.active span:nth-child(3){
   top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

}