*{
  margin: 0px;
  padding: 0px;
  font-size: 1em;
}


:root{
  /*Colors Primary*/
  --Very-dark-blue: hsl(233, 47%, 7%);
  --Dark-desaturated : hsl(244, 38%, 16%);
  --Soft-violet: hsl(277, 64%, 61%);

  /*Colors Neutral*/
  --White: hsl(0, 0%, 100%);
  --Slightly: hsla(0, 0%, 100%, 0.75);
  --Slightly-transparent-white: hsla(0, 0%, 100%, 0.6)
}
.body{
background-color: var(--Very-dark-blue);
}
.container{

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-top: 25em;
  margin-left: 5em;
  margin-right: 5em;
  margin-bottom: 25em;


}
.item{


  background-color:var(--Dark-desaturated);
  border-radius: .5em 0  0 .5em;


}

.item p{

  font-size: 1em;
  font-family: 'Inter', sans-serif;
  color: var(--Slightly-transparent-white);
  text-align:left;
  line-height: 150%;
  padding-top: 1.5em;
  padding-left: 5em;
  padding-right: 2em;
  padding-bottom: 2em;




  }
  .item h1{
    font-size: 2.5em;
    color:var(--Slightly);
    padding-top: 2em;
    padding-left: 2em;
    padding-right: 2em;

  }
  .image{

  width:100%;
  height: auto;

  background-image: linear-gradient(hsla(277, 64%, 62%,0.4),hsl(277, 64%, 61%,0.55)), url("../images/image-header-desktop.jpg");
  background-size:cover;
  background-repeat: no-repeat;
  border-radius: 0 .5em .5em 0;
  padding-bottom: 2em;
}

  .attribution {
    font-size: 1em;
    text-align:center;
    padding-top: 3em;
    color: var(--White);


  }
  .menu{
    display: flex;
    padding-top: 2em;

    text-align:center;
  }
  .menu ul {
list-style: none;
margin-left: 2.5em;


}



.menu li a{
font-family:  'Inter', sans-serif;
font-size: 1.5em;
color:var(--White);
text-decoration: none;
list-style: none;
display: inline-block;

}

  .submenu{

list-style: none;
text-align:justify;
padding-top: 0;
}
.submenu li a {

display:block;

font-family:  'Inter', sans-serif;
color: var(--Slightly-transparent-white);
font-size: 1em;
padding-bottom: 2em;
text-decoration: none;
list-style-type: none;


}

@media only screen and (max-width:749px)  {

.container{
  flex-direction: column;

  width:100%;

  display: grid;
  grid-template-columns: auto;
  justify-content: center;
  margin-top: 25em;
  margin-left: 3em;
  margin-right: 3em;
  margin-bottom: 25em;
  position: relative;
  text-align: center;



}
.image{
display: block;
height: 100%;
min-height: 375px;
border-radius: 10px 10px 0 0;
grid-column: 1 / 1;
grid-row: 1;




}

.menu {
  font-family:  'Inter', sans-serif;
  font-size: .75em;
  color:var(--White);

  display:inline-block;





}
.menu ul {
list-style: none;
margin-left: 1em;


}

.menu li a{

font-size: 1em;


}



.item p{

  font-size: .85em;
  line-height: 125%;

  padding-left: 3.5em;

}

.item h1{
  font-size: 1.5em;
  color:var(--Slightly);
}

}