html{
    font-size: 16px;
}
body{
    display: grid;
    place-items:center;
    
    font-family: ubuntu;
    background-color: hsl(217, 100%, 97%);
    
}

* {
    box-sizing: border-box;
}
.addOn{ 
    flex:1 1 15%;
    /*border:1px solid red;*/
    place-items: center;
    display:flex;
    border:0.125rem solid hsl(229, 24%, 87%);
    border-radius:7px;
    position:relative;
    cursor:pointer;
}

#monthlyAdd-ons{
    display:flex;
    gap:4%;
    /*border:1px solid green;*/
    margin-top: 5%;
    height:50%;
    flex-direction: column;
}
.attribution { 
    font-size: 11px; 
    text-align: center; 
}

#backButton{
    font-weight: 700;
    color:hsl(231, 11%, 63%);
    position:absolute;
    top:89%;
    left:42.4%;
    border:0px;
    background-color: white;
    font-size:1rem;

}
#backButton:hover{
    color:hsl(213, 96%, 18%);
    cursor:pointer;
}
.bonus{
    color:hsl(213, 96%, 18%);
    font-size:0.9rem;
}

#changePlan{
    display:inline-block;
    text-decoration: underline;
    color:hsl(231, 11%, 63%);
    font-size:0.9em;
    margin-top:1%;
    cursor:pointer;
}
#changePlan:hover{
    color:hsl(243, 100%, 62%);
}

#confirmButton{
    position:absolute;
    font-weight: 700;
    color:white;
    top:87%;
    left:75.5%;
    border:0px;
    background-color: hsl(243, 100%, 62%);
    width:12%;
    height:7.5%;
    border-radius: 6px;
    cursor:pointer;
}
#confirmButton:hover{
    background-color: hsl(243, 82%, 74%);
}

.div{
    /*border:1px solid green;*/
    height:10%;
    position:relative;
}
.divAddOn{
    height:100%;
    margin-right:32%;
}
#divChosenPlan{
    /*border:1px solid red;*/
    border-bottom: 2px solid hsl(229, 24%, 87%);
    height:4rem;
    position:relative;
    
}
#divSummary{
    border-radius: 6px;
    padding:4%;
    background-color: hsl(217, 100%, 97%);
}

#firstForm{
    width:50%;
}
.firstH1{
    font-size:2em;
    color:hsl(213, 96%, 18%);
}
.firstGraph{
    color:hsl(231, 11%, 63%);
}

input[type="text"]{
    height:9%;
    width:94%;
    border-radius: 5px;
    border:2px solid hsl(229, 24%, 87%);
    padding-left:3.5%;
    font-size:1.2em;
    color:hsl(213, 96%, 18%);
    
}
input[type="text"]:focus
{
    outline:2px solid hsl(213, 96%, 18%);
    
}

input:checked + .slider{
    left:49%;
    background-color: white;
    }

    .h4{
        font-size:1.15rem;
        color:hsl(213, 96%, 18%);
        margin-bottom:2%;
    }

    .h4--2{
        color:hsl(243, 100%, 62%);
        position:absolute;
        left:82%;
        top:15%;
    }


    .label{
        display:inline-block;
        color:hsl(213, 96%, 18%);
        font-weight: 500;
        margin-bottom: 1.5%;
        margin-right:39%;
    }
    .label1{
        margin-right: 46%;
        
    }
    .label2{
        margin-right:20.5%;
        display:inline-block;
        color:hsl(213, 96%, 18%);
        font-weight: 500;
        margin-bottom: 1.5%;
    }

main{
    display:flex;
    gap:12%;
    padding: 1.5%;
    width:63rem;
    margin-top: 3%;
    height:40rem;
    max-width:95vw;
    
    border-radius: 12px;
    background-color: white;
    box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.2);
    position:relative;
    

}

#monOrYr{
    display:flex;
    gap:6%;
    align-items: center;
    margin-top:6%;
    height:8%;
    /*border:1px solid green;*/
    border-radius: 5px;
    padding-left: 26%;
    background-color: hsl(231, 100%, 99%);
    color:hsl(213, 96%, 18%);
    font-weight:500;
}

#monthlySelection{
    /*border:1px solid black;*/
    display:flex;
    height:32%;
    margin-top: 6%;
    gap:2%;
}


nav{
    display:flex;
    flex-direction: column;
    gap:4%;
    width:30%;
    border-radius: 8px;
    background-color: hsl(243, 100%, 62%);
    padding:3%;
    padding-top:4%;
    color:white;

    background-image: url('assets/images/bg-sidebar-desktop.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position-x: center;
    background-position-y: 90%;
}

#nextButton{
    position:absolute;
    font-weight: 700;
    color:white;
    top:87%;
    left:75.5%;
    border:0px;
    background-color: hsl(213, 96%, 18%);
    width:12%;
    height:7.5%;
    border-radius: 6px;
    cursor:pointer;
}
#nextButton:hover{
    background-color: hsl(213, 79%, 34%);
}
.one{
    width:30%;
    color:hsl(231, 11%, 63%);
}
.othersDiv{
    /*border:1px solid purple;*/
    padding:3.5%;
    padding-left:0px;
    display:flex;
    gap:56%;

}

#planName{
    color:hsl(213, 96%, 18%);
    font-weight:500;
}
#planPrice{
    position:absolute;
    left:85%;
    color:hsl(213, 96%, 18%);
    font-weight:500;
}
.priceRate{
    color:hsl(231, 11%, 63%);
    font-size:0.9rem;
}

#span1{
    display:inline-block;
    padding:4%;
    padding-left: 6.2%;
    padding-right: 6.2%;
    border:1px solid white;
    border-radius: 50%;
    pointer-Events:none;
}
#span1A{
    position:absolute;
    top:0%;
    left:20%;
    font-size: 0.9em;
    opacity:80%;

}#span1B{
    position:absolute;
    top:45%;
    left:20%;
}


#span2{
    display:inline-block;
    padding:4%;
    padding-left: 6.2%;
    padding-right: 6.2%;
    border:1px solid white;
    border-radius: 50%;
    pointer-Events:none;
    
}
#span2A{
    position:absolute;
    top:0%;
    left:20%;
    font-size: 0.9em;
    opacity:80%;

}#span2B{
    position:absolute;
    top:45%;
    left:20%;
}

#span3{
    display:inline-block;
    padding:4%;
    padding-left: 6.2%;
    padding-right: 6.2%;
    border:1px solid white;
    border-radius: 50%;
    pointer-Events:none;
    
}
#span3A{
    position:absolute;
    top:0%;
    left:20%;
    font-size: 0.9em;
    opacity:80%;

}#span3B{
    position:absolute;
    top:45%;
    left:20%;
}


#span4{
    display:inline-block;
    padding:4%;
    padding-left: 6.2%;
    padding-right: 6.2%;
    border:1px solid white;
    border-radius: 50%;
    pointer-Events:none;
    
}
#span4A{
    position:absolute;
    top:0%;
    left:20%;
    font-size: 0.9em;
    opacity:80%;

}#span4B{
    position:absolute;
    top:45%;
    left:20%;
}
.spanAddOn{
    font-size:0.9rem;
    color:hsl(231, 11%, 63%);
}
.switch {
    /*border:1px solid blue;*/

    position: relative;
    display: inline-block;
    width: 15%;
    height: 60%;
    border-radius:20px;
    background-color: hsl(213, 96%, 18%);
    cursor:pointer;
  }

  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .slider {
    position: absolute;
    cursor: pointer;
    top: 10%;
    left: 7%;
    right: 0;
    bottom: 0;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
    width:45%;
    height:80%;

  }

#section2{
    /*border:1px solid red;*/
    width:50%;
}
#section3{
    /*display:none;*/
    width:50%;
    
}
#section4{
    width:50%;
}
#section5{
    width:50%;
}

.selectionItems{
    border:2px solid hsl(229, 24%, 87%);
    flex:1 1 20%;
    padding:3%;
    border-radius:10px;
    cursor:pointer;
    
}

.selectionH3{
    color:hsl(213, 96%, 18%);
    position:relative;
    top:30%;
}

.selectionH3--2{
    color:hsl(213, 96%, 18%);
    position:relative;
    top:17%;
    margin-bottom: 23%;
}
#successDiv{
    display:grid;
    place-items: center;
    margin-top: 30%;
}
#successGraph{
    text-align: center;
    color:hsl(231, 11%, 63%);
}
#successH1{
    font-size:1.8rem;
    color:hsl(213, 96%, 18%);
}
#summaryTotal{
    padding:5%;
    display:flex;
    gap:50%;
}
.tick{
    width:3rem;
    padding:2rem;
    /*outline:1px solid blue;*/
    height:1.2rem;
}
.three{
    font-size:1.2rem;
    font-weight: 600;
    color:hsl(243, 100%, 62%);
}
.two{
    color:hsl(213, 96%, 18%);
}

#yearlyAdd-ons{
    display:flex;
    gap:4%;
    /*border:1px solid green;*/
    margin-top: 5%;
    height:50%;
    flex-direction: column;
}
#yearlySelection{
    /*border:1px solid black;*/
    display:flex;
    height:32%;
    margin-top: 6%;
    gap:2%;
}

@media only screen and (max-width:500px){
    main{
        flex-direction: column;
        background-color:hsl(217, 100%, 97%);

        gap:0%;
        padding: 0%;
        width:100vw;
        margin-top: 0%;
        height:150vh;
        max-width:95vw;
        
        border-radius: 0px;
        background-color: white;
        box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.2);
        position:relative;
    }
    nav{
        /*position:relative;*/
        padding-top: 27%;
        padding-left:0px;
        padding-right:10%;
        flex-direction: row;
        gap:4%;
        width:100%;
        height:35vh;
        border-radius: 0px;
        justify-content: space-around;
    
        background-image: url('assets/images/bg-sidebar-mobile.svg');
        background-position-y:100%;
        
    }
    .addOn{
        width:100%;
    }

    .advanced{
        margin-top:5%;
        width:20%;
    }
    .arcade{
        margin-top:5%;
        width:20%;
    }
    #backButton{
        position:fixed;
        top:92%;
        left:15%;
    }
    .bonus{
        position:relative;
        left:24%;
        top:-10%;
    }
    #confirmButton{
        width:30%;
        position:fixed;
        top:90%;
        left:60%;
    }
    .divAddOn{
        margin-right:15%;
        width:50%;
    }
    #firstForm{
        padding:5%;
        /*border:1px solid red;*/
        width:95%;

    }
    .firstH1{
        font-size:1.5em;
    }
    .h4{
        font-size:1rem;
    }
    .h4--2{
        font-size:0.9rem;
    }

    input[type=text]{
        height:15%;
    }
    #monthlySelection{
        /*border:1px solid black;*/
        flex-direction: column;
        height:70%;
        margin-top: 6%;
        gap:2%;
    }
    #nextButton{
        width:30%;
        position:fixed;
        top:90%;
        left:60%;
    }
    .one{
        width:70%;
        font-size:0.9rem;
    }
    .othersDiv{
        gap:40%;
    }
    #planPrice{
        left:80%;
        font-weight:500;
    }
    .priceRate{
        font-size:0.9rem;
        position:absolute;
        left:25%;
        top:48%;
    }
    .pro{
        margin-top:5%;
        width:20%;
    }
    #section2{
        width:95%;
        padding:5%;
    }
    #section3{
        width:95%;
        padding:5%;
    }
    #section4{
        width:95%;
        padding:5%;
    }
    #section5{
        width:95%;
        padding:5%;
    }
    .selectionH3{
        position:absolute;
        top:7%;
        left:25%;
    }
    .selectionH3--2{
        position:absolute;
        top:7%;
        left:25%;
    }
    .selectionItems{
        position:relative;
        border:2px solid hsl(229, 24%, 87%);
        flex:1 1 20%;
        padding:3%;
        
    }
    #span1{
        padding:70%;
        padding-left: 120%;
        padding-right: 120%;
    }
    #span1A{
        display:none;
    }
    #span1B{
        display:none;
    }
    #span2{
        padding:70%;
        padding-left: 120%;
        padding-right: 120%;
    }
    #span2A{
        display:none;
    }
    #span2B{
        display:none;
    }
    #span3{
        padding:70%;
        padding-left: 120%;
        padding-right: 120%;
    }
    #span3A{
        display:none;
    }
    #span3B{
        display:none;
    }
    #span4{
        padding:70%;
        padding-left: 120%;
        padding-right: 120%;
    }
    #span4A{
        display:none;
    }
    #span4B{
        display:none;
    }
    .spanAddOn{
        font-size:0.9rem;
    }
    #summaryTotal{
        display:flex;
        gap:30%;
    }
    #yearlySelection{
        /*border:1px solid black;*/
        flex-direction: column;
        height:70%;
        margin-top: 6%;
        gap:2%;
        
    }
}