*{
     margin: 0;
     padding: 0;
     color: white;
}
@font-face{
     font-family: font1;
     src: url(Noto.ttf);
}
main{
     background-image: url(b-image.jpg);
     background-size: 100% 100%;
     background-repeat: no-repeat;
     background-attachment: scroll;
     height: 120vh;
}
nav > img{
     width: 100px;
     margin-top: 30px;
     margin-left: 60px;
}
.two{
     float: right;
     margin-top: 30px;
     margin-right: 40px;
}
.two select{
     font-family: font1;
     cursor: pointer;
     padding: 7px 25px;
     border-radius: 5px;
     background-color: rgba(0, 0, 0, 0.7);
}

.two button{
     cursor: pointer;
     padding: 7px 20px;
     font-family: font1;
     background-color: red;
     border-color: red;
}
.signin{
     margin-top: 100px;
}
.signin h1{
     font-family: font1;
     font-size: 50px;
     margin: 30px 15px 15px;
}
.signin p{
     font-family: font1;
}
.signin h1,p{
     text-align: center;
}
.enter{
     display: flex;
     align-items: center;
     justify-content: center;
     padding-bottom: 20px;
}
.enter input{
     background-color: rgba(0, 0, 0, 0.7);
     width: 300px;
     padding: 18px;
     font-size: 15px;
     margin-right: 5px;
     font-family: font1;
     border-color:white;
}
.enter button{
     width: 200px;
     font-size: 20px;
     font-family: font1;
     background-color: red;
     border-color: red;
     padding: 15px 20px;
     cursor: pointer;
     border-radius: 5px;
}
section{
     background-color: black;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 20px;
}
.matter{
     width: 50%;
}
.matter h1{
     text-align: center;
     font-family: font1;
     font-size: 50px;
}
.matter p{
     text-align: center;
     font-family: font1;
}
section >  img{
     width:50%;
}
.faq{
     background-color: black;
}
.faq h1{
     padding: 30px 20px 0;
     text-align: center;
     font-family: font1;
     font-size: 50px;
}
details{
     margin-left: 10%;
     margin-top: 50px;
     margin-right: 10%;
}
summary{
     font-family: font1;
     font-size: 20px;
     font-weight: bold;
     cursor: pointer;
}
details > p{
     text-align: left;
     margin: 30px;
     font-family: font1;
}
.faq > p{
     font-family: font1;
     margin: 50px 10px 20px
}
footer{
     background-color: black;
}
footer > h2{
     font-family: font1;
     padding: 30px 0 30px 30px;
}
.foo{
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
     grid-gap: 20px;
     margin-left: 30px;
     margin-right: 30px;
}
.foo a{
     text-align: center;
     font-size: 13px;
     font-family: font1;
}
.last{
     margin-left: 30px;
}
.last select{
     margin-top: 20px;
     margin-bottom: 15px;
     font-family: font1;
     padding: 7px 25px;
     border-radius: 5px;
     background-color: rgba(0, 0, 0, 0.7);
     cursor: pointer;
}
.last p{
     padding-bottom: 20px;
     font-family: font1;
     text-align: left;
}
@media screen and (max-width:1050px){
     .odd{
          flex-direction: column;
     }
     .even{
          flex-direction: column-reverse;
     }
     .matter h1{
          margin-bottom: 20px;
     }
}
@media screen and (max-width:900px) {
     nav > img{
          width: 100px;
     }
}
@media screen and (max-width:800px){
     .foo{
          grid-template-columns: 1fr 1fr;
     }
}
@media screen and (max-width:750px) {
     .enter input{
          width: 40%;
     }
     .signin h1{
          font-size: 30px;
     }
     .matter h1{
          font-size: 30px;
     }
     .matter p{
          font-size: 15px;
     }
     .faq h1{
          font-size: 30px;
     }
}
@media screen and (max-width:600px) {
     .enter{
          display: flex;
          flex-direction: column;
     }
     .enter input{
          margin-bottom: 10px;
          width: 60%;
     }
     .enter button{
          margin-top: 10px;
     }
     footer > h2{
          font-size: 20px;
     }
}
@media screen and (max-width:450px){
     main{
          height: 130vh;
     }
     nav{
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
     }
     nav > img{
          margin: 30px 0 10px;
     }
     .two{
          margin: 20px 0;
     }
     .enter input{
          padding: 10px;
     }
     .enter button{
          width: 40%;
          padding: 10px;
          font-size: 15px;
     }
     .faq h1{
          font-size: 20px;
          padding: 20px 10px 0;
     }
     summary{
          font-size: 15px;
     }
     details{
          margin-top: 30px;
     }
     details > p{
          font-size: 13px;
          margin: 20px;
     }
     .foo{
          grid-template-columns: 1fr;
     }
}
@media screen and (max-width:400px) {
     .signin > h1{
          font-size: 20px;
     }
     .signin > p{
          font-size: 15px;
     }
     .matter > h1{
          font-size: 20px;
     }
     .matter > p{
          font-size: 13px;
     }
}
@media screen and (max-width:350px) {
     main{
          height: 150vh;
     }
}
@media screen and (max-width:250px){
     .two{
          margin-top: 30px;
          display: flex;
          flex-direction: column;
     }
     .two select{
          margin-top: 5px;
          padding: 5px 0;
          font-size: 12px;
     }
     .two button{
          margin-bottom: 5px;
          padding: 5px 0;
          font-size: 12px;
     }
}