body{
    overflow: auto;
}
*{
    font-family: "Century Gothic";
    font-size: 15px;
    color: rgb(0, 0, 0);
}
a{
    text-decoration: none;
    color: rgb(0, 0, 0);
    font-size: 15px;
}
.main{
    display: grid;
    gap: 1rem;
    grid-template-areas: 
        "title"
        "subtitle"
        "maceli"
        "tc"
        "faq" 
        "bg"
        "footer";
    grid-template-rows: 6.5vh 1fr 5vh 3vh 3vh 75vh 20vh;
    margin-top: 15vh;
    justify-content: space-around;
}

.title,.subtitle,.selecttitle,.selectdesc,.tc,.faq,.bgtitle{
    padding-left: 10vw;
    padding-right: 10vw;
}

.title{
    grid-area: title;
    text-align: center;
    font-weight: 700;
    display: inline-block;
}

.title1,.title2,.selecttitle1,.selecttitle2,.select,.subtitle,.selectdesc,.tc,.faq{
    width: 80vw;
}

.title1,.title2bg,.bgtitle{
    font-size: 20px;
}

.title2bg{
    background-color: #FAD702;
    border-radius: 30px;
    width: 20vw;
    padding-left: 2vw;
    padding-right: 2vw;
    border-radius: 10px;
}

.subtitle{
    grid-area: subtitle;
    text-align: center;
    display: inline-block;
}

.maceli,.maceli2{
    display: grid;
    grid-template-rows: 5vh;
    grid-template-columns: 45vw;
    padding-left: 4vw;
    padding-right: 4vw;
    column-gap: 2vw;
    width: 90vw;
}

.maceli{
    grid-area: maceli;
    grid-template-areas: 
    "mac eli";
}

.maceli2{
    grid-area: maceli2;
    grid-template-areas: 
    "mac2 eli2";
}

.tc a,.faq a{
    display: grid;
    font-size:12px;
    text-align: center;
}

.tc{
    grid-area: tc;
}

.faq{
    grid-area: faq;
}

.bg{
    grid-area: bg;
    width:100vw;
    background-image: url(../img/iphone-repair-back-battery.jpg);
    display: grid;
    background-repeat: no-repeat;
    background-size: 175vw 93vh;
    height: 681px;
    background-position-x: -40vw;
    background-position-y: -16vh;
    grid-template-areas: 
    "bgtitle" 
    "dpp" 
    "apple" 
    "other" 
    "maceli2";
    row-gap: 1vh;
    grid-template-rows: 8vh 23vh 15vh 16vh 5vh;
}

.bgtitle{
    grid-area: bgtitle;
    font-weight:700;
    color:rgba(255, 255, 255, 1.0);
    padding-left: 5vw;
    padding-right: 5vw;
    width: 90vw;
    text-align: center;
    padding-top: 2vh;
}

ul {
  list-style: none;
  padding-left: 4vw;
  margin-top: 1vh;
}

ul li:before {
  content: '✓';
}

.dpp{
    grid-area: dpp;
    display: grid;
    grid-template-areas: 
    "dpptitle" 
    "dpplist";
    grid-template-rows: 6vh 16vh;
}

.dpptitle{
    grid-area: dpptitle;
    background: #FAD702;
}

.dpplist{
    grid-area: dpplist;
}

.apple{
    grid-area: apple;
    display: grid;
    grid-template-areas: 
    "appletitle" 
    "applelist";
    grid-template-rows: 4vh 10vh;
}

.appletitle{
    grid-area: appletitle;
    background: rgba(0, 0, 0, 1.0);
    color: rgba(255, 255, 255, 1.0);
}

.applelist{
    grid-area: applelist;
}

.other{
    grid-area: other;
    display: grid;
    grid-template-areas: 
    "othertitle" 
    "otherlist";
    grid-template-rows: 4vh 10vh;
}

.othertitle{
    grid-area: othertitle;
    background: #676767
}

.otherlist{
    grid-area: otherlist;
}

.dpp,.apple,.other{
    padding-left:25vw;
    padding-right: 25vw;
    width: 50vw;
}

.dpptitle,.othertitle,.appletitle{
    text-align: center;
    padding-top: 1vh;
    font-weight: 700;
}

.dpptitle,.othertitle,.appletitle,li{
    font-size: 12px;
}

.dpptitle,.othertitle,.appletitle,.dpplist,.applelist,.otherlist{
    border: 2px solid #000000;
    box-shadow: 3px 3px 0px #000000;
}

.dpplist,.applelist,.otherlist{
    background: rgba(255, 255, 255, 1.0);
}

.copy{
    font-size: 10px;
    padding: 0vh 20vw;
    text-align: center;
    word-wrap: break-word;
    display: grid;
}
.curtain{
    z-index: 1001;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.7);
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    visibility: hidden;
}

.pop{
    position: fixed;
    visibility: hidden;
    background: white;
    height: 25vh;
    width: 75vw;
    z-index: 1002;
    top: 35vh;
    left: 5vw;
    margin-left: 5vw;
    display: grid;
    grid-template-areas:  
    "poptitle" 
    "popconfirm" 
    "popback";
    grid-template-rows: 9vh 5vh 5vh;
    grid-template-columns: 75vw;
    gap: 2vh;
    padding: 1vh 2vw;
    text-align: justify;
}

.poptitle{
    grid-area: poptitle;
    font-size: 20px;
    font-weight: 700;
    width: 75vw;
    text-align: center;
    padding-top: 3vh;
}

@media screen and (min-width:1000px){

    .bg{
        background-size: cover;
        background-position-x: 0vw;
        background-position-y: 0vh;
        height: auto;
    }

    .footer{
        margin-top: -1em;
    }
}