img{
  width:100%;
  max-width:500px;
}

*{
  margin:0;
}
body{
  background:black;
  color:white;
  font-family: sans-serif;
}
main{
  margin-left: auto;
  margin-right: auto;
  max-width:1440px;
  width:100%;
}
nav{
  max-width:1440px;
  height:119px;
  width:100%;
  display:flex;
  justify-content: space-between;
  align-items: center;
  background: #191919;
}
nav > ul >  a > li{
  display: inline-block;
  font-size: 30px;
  margin-left:3%;
  color:white;
}
nav > ul > a{
  text-decoration: none;
}
nav > ul{
  width:100%;
  max-width: 540px;
}
nav > strong{
  font-size: 47px;
  margin-left: 1%;
}
header{
  max-width:1440px;
  width:100%;
  background-color:#191919;
  display:flex;
  justify-content: space-around;
  align-items:center;
  flex-wrap:wrap;
  min-height: calc(100vh - 119px);
}
header img{
  width:100%;
  max-width:550px;
  border-radius:7%;
}
header > h1{
  width:100%;
  max-width:700px;
  font-size: 79px;
}
@media(max-width:700px){
  header > h1{
    font-size:37px;
  }
  /* div.frameOnTheBox:nth-child(4) > div:nth-child(2) > p:nth-child(3) */
  /* div.frameOnTheBox:nth-child(4) > div:nth-child(2) > p:nth-child(3) */
  .frameOnTheBox > div > p:nth-child(3){
    font-size:35px;
  }
}
article{
  max-width:1440px;
  width:100%;
  background-color:#191919;
  display:flex;
  justify-content: space-around;
  align-items:center;
  flex-wrap:wrap;

}
article > h2{
  max-width:1300px;
  width:100%;
  background-color:#191919;
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;

}
.frameOnTheBox{
  width:100%;
  max-width: 1300px;
  min-height:545px;
  border-radius: 32px;
  background: black;
  margin-top:3%;
  margin-bottom:1%;
  display:flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
.frameOnTheBox > img{
  max-width:389px;
  width:100%;
  height:432px;
}
.frameOnTheBox > div{
  width:100%;
  max-width:778px;
  min-height:432px;
  display:flex;
  justify-content: space-around;
  flex-direction: column;
}
.frameOnTheBox > div > span{
  width:50px;
  background:#191919;
  border-radius: 3px;
  padding:5px;
}
.frameOnTheBox > div > p:nth-child(2){
  color: #277227;
}
@media(min-width:700px){
  .frameOnTheBox > div > p:nth-child(3){
    font-size:64px;
  }

}
.frameOnTheBox > div > button{
  width:100%;
  max-width:208px;
  height:51px;
  color:white;
  background: #277227;
  border:green;
  border-radius: 7px;
}
.rectangle{
  display:flex;
  width:100%;
  max-width:1300px;
  display:flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
.rectangle > div > p{
  width:100%;
  max-width:642px;
  height:330px;
  font-size: 18px;/* important */
}
.rectangle > div > span{
  color:#277227;
}
.rectangle > form{
  max-width:522px;
  height:252px;
  width:100%;
}
.rectangle > form > input{
  font-size:30px;
  background-color:#277227;
  color:black;
  width:calc(100% - 7px);
  max-width:522px;
  height:83px;
  border-radius:7px;
  border:1px;
  margin-bottom:7px;

}
.rectangle > form > button{
  width:100%;
  max-width:53px;
  height:29px;
  background: #277227;
  border-radius: 7px;
  border: 2px solid green;
}
.rectangle > form > button:hover{
  color:white;
  background:black;
}
.squareBox{
  display:flex;
  justify-content:space-around;
  align-items:baseline;
  margin-left:14px;
  flex-direction: column;
  background: black;
  width:100%;
  max-width:432px;
  height:321px;
  border-radius:32px;
  margin-bottom:17px;
}
@media(max-width:477px){
  nav > ul{
    display:none;
  }
  body > main > lol > a > li{
    color:green;
    text-decoration: none;
  }
  body > main > lol > a{
    text-decoration:none;
  }
}
@media(min-width:477px){

  #menu{
    /* display:none; */
  }
  #menu > span:nth-child(1){
    display:none;
  }
  #menu > span:nth-child(2){
    display:none;
  }
  #menu > span:nth-child(3){
    display:none;
  }
}
@media(max-width:377px){
  .squareBox{
    margin-left: 0;
    /* width:90%; */
  }
  .squareBox > p{
    font-size:18px;
    width:90%;
    margin-left:0;
    margin-right:0;
    font-size: 10px;
  }
  .squareBox > span{
    margin-left:0;
    width:90%;
  }
  .squareBox > p:nth-child(2){
    margin:0;
    width:90%;
  }
  .squareBox > p:nth-child(3){
    margin:0;
    width:90%;
    margin-left:0;
  }

}
.squareBox > span{
  padding:none;
  margin-left: 9%;
}
.squareBox > p{
  color:white;
  width:100%;
  max-width:313px;
  height:130px;
  font-size:33px;
  margin-left: 9%;
}
/* .squareBox > p:nth-child(3){
  color:grey;
  margin-left: 9%;
}
.leftRight{
  font-size: 18px;
  width:100%;
  max-width:590px;
  height:448px;
} */
/* .leftRight > p:nth-child(3) */
.leftRight > #vse{
  font-size: 33px;
}
/* div.frameOnTheBox:nth-child(4) */
/* div.frameOnTheBox:nth-child(5) > div:nth-child(1) > p:nth-child(3) */
.rectangle > div:nth-child(1) > p:nth-child(2){
  font-size:37px;
}
footer{
  background: #191919;
  width:100%;
  max-width:1440px;
  height:438px;
  margin-left: auto;
  margin-right: auto;
  display:flex;
  justify-content: center;
  align-items: center;
  /* flex-direction: column; */
}
footer > div{
  display:flex;
  justify-content: space-around;
  align-items: baseline;
  /* flex-direction: column; */
  width:100%;
  max-width: 1300px;
  flex-wrap: wrap;
  /* background: green; */
}
footer > div > div:nth-child(4) > span{
  font-size:30px;
}

/* body > main:nth-child(2) > footer:nth-child(4) > div:nth-child(1) > div:nth-child(1) */
footer > div > div:nth-child(1){
  display:flex;
  flex-direction:column;
}
footer > div > div:nth-child(1) > strong{
  font-size:30px;
}
@media(max-width:377px){
  nav > ul{
    display:none;
  }
}
a{
  color:green;
  text-decoration: none;
}
body > #buttonOne > p, body > #buttonTwo > p, body > #buttonThree > p{
  max-width:500px
}
.frameOnTheBox > picture > img{
  width:100%;
  max-width:450px;
  min-height:500px;
  object-fit: cover;
}
@media(min-width:1228px){
  .frameOnTheBox:nth-child(2) > picture > img{
    border-radius: 17px 0 0 17px;
  }
  .frameOnTheBox:nth-child(3) > picture > img{
    border-radius: 17px 0 0 17px;
  }
  .frameOnTheBox:nth-child(4) > picture > img{
    border-radius: 17px 0 0 17px;
    border-radius: 17px 0 0 17p
  }
  .frameOnTheBox:nth-child(5) > picture > img{
    border-radius: 0 17px 17px 0;
  }
}
.rectangle > a{
  font-size: 33px;
  margin-bottom:37px;
}