@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap');

body {
    font-family:  'Poppins', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color:white;
    background-color:black;
    padding-top: 3vw;
}
.navTitle {
    font-size:2.3vw; 
    font-weight: 600;
    z-index: 1;
    margin-left:1.5vw;
    margin-right:1.5vw;
    margin-bottom: 1.3vw;
    text-decoration: none;
    color:white;
    position: relative;     
}
description{
    display: none;
}
label{
    font-size:1.6vw;
}
h1{
    position:relative;
    text-align: center;
    color:white;
    padding-top:7.5vw;
    font-size:2.2vw;
}
ul{
    padding-left:8%; 
    font-size:2.6vw;
    text-align:left;
}
.listItem{
    font-size:1.5vw;
    text-align: left;
    padding-top:0.5vw;
    padding-left:4vw;
    padding-bottom:0.5vw;
}
.quantity{
    font-size:2.7vw;
    position:relative;
    text-align: right;
    padding-right:6vw;
    margin-bottom:1vw;
    margin-top:3vw;
}
select {
    font-size:1.8vw;
    margin-left:2vw;
    font-family: 'Poppins', 'Arial Narrow', Arial, sans-serif;
}
.rightnav {
    position: fixed;
    padding-top:1.4vw;
    width:100%;
    left:0%;
    padding-bottom: 1.4vw;
    top:0%;
    text-align:right;
    background-color: black;
    z-index: 2;
    border-bottom: 1px solid white;
}
.main { 
    text-align:center;
    width:80%;
    position: absolute;
    left:10%;
    top:10vw;
}
.mainPrebuilt{
    text-align:center;
    width:99%;
    position: absolute;
}
.component {
    text-align:center;
}
.item{
    position: relative;
}
.itemClass {
    width:50%;
    padding-left:2vw;
    border: white;
    border-width: 0.1vw;
    border-style: solid;
    margin-top: 1vw;
    padding-top:2vw;
    padding-bottom:1vw;
    min-width:55vw;
    display:inline-block;
}
.itemName{
    font-size: 1.5vw;
    padding-left:2vw;
    width: 40vw;
    display:inline-block;
}
.desc{
    font-size: 1.4vw;
    padding-bottom:1.4vw;
}
.price{
    display: inline-block;
    text-align:right;
    font-size: 2vw;
}
.power{
    text-align:center;
    font-size:2.6vw;
    text-transform: uppercase;
    font-weight: bold;
}
#inputPower{
    margin-left:5vw;
}
.totalPrice{
    font-weight:900;
    font-size:1.8vw;
    text-align: center;
    margin-top:1vw;
    margin-bottom: 1vw;
}
#inputPrice{
    margin-left:18vw;
}
.customMain{
    position: absolute;
    align-items: center;
    max-width: 100%;
    padding-top:2vw;
}
.rightMain {
    position:fixed;
    display:block;
    left:60%;
    top:20vh;
    width:40vw;
    align-self: center;
    align-items: center;
}
.perHead{
    width:60%;
    text-align: center;
    margin-top:0vw;
    font-size:3.6vw;
    margin-top:1.5vw;
}
.perDesc{
    width:60%;
    text-align: center;
}
.perArrow {
    position: relative;
    height:2.5vw;
    width:5vw;
    top:-2vw;
    left:55%;
}


.buyButton{
    position: relative;
    left:63.5%;
    margin-top:1vw;
    font-size: 1.8vw;
    font-weight:600;
}
.category {
    position: relative;
    padding-top:2vw;
    padding-bottom: 2vw;
    max-width: 98%;
    display: inline-block;
    align-self:center;
}
.categoryDesc{
    margin-bottom: 2vw;
    padding-right:2vw;
    font-size:1.6vw;
}
.spec {
    position: relative;
    display: inline-block;
    align-items: center;
    border: white;
    border-width: 0.1vw;
    border-style: solid;
}
.specTitle{
    font-size: 2.2vw;
    text-transform:uppercase;
    padding-bottom: 2vw;
    padding-top:1vw;
}
.prebuiltTitle {
    font-size: 2vw;
    text-align: center;
    text-transform:uppercase;
    padding-bottom:1.5vw;
}
.categoryTitle{
    font-size: 2.6vw;
    text-transform:uppercase;
    padding-bottom: 2vw;
}
.prebuiltPart {
    font-size: 1.5vw;
    height:1.1rem;
    text-align: left;
    text-transform:uppercase;
    padding-bottom: 1vw;
    display:inline-block;
    min-width:32%;
}
.prebuiltPartTitle {
    position: relative;
    text-align: left;
    display:inline-block;
    min-width:10vw;
    left:2vw;
}
.prebuiltPartName{
    position: relative;
    text-align: left;
    display:inline-block;
    min-width:20vw;
}
.computer{
    position: relative;
    padding-bottom: 3vw;
}
.buyPrebuilt {
    font-size: 1.3vw;
    font-weight: 700;
    margin-left: 5%;
    margin-right:5%;
    margin-bottom:12%;  
}
.buyPrebuiltNow {
    font-size: 1.3vw;
    font-weight: 700;
    margin-left: 5%;
    margin-right:5%;
    margin-bottom:12%;  
}
.buyNow {
    position: relative;
    font-size:3.2vw; 
}
.totalPrebuiltPrice {
    position: relative;
    font-weight:900;
    font-size:2.6vw; 
}
.content{
    width:100%;
    position: absolute;
    top:15%;
}
#mainBuy{
    display: block;
    margin-top:3vw;
    width:60vw;
    margin-left:auto;
    margin-right:auto;
}

#currencySelect{
    margin-top:0.4vw;
    font-size: 1.2vw;
    margin-right: 3vw;
}

.priceBuyItem {
    position: absolute;
    display: inline-block;
    left:88%;
    font-size: 1.8vw;
}
.boughtName{
    position: relative;
    left:30%;
    font-size: 1.6vw;
}
.categoryName {
    position: absolute;
    font-size:1.6vw;
    left:5%;
}
.inputInfo {
    text-align: center;
    margin-top:2vw;
}
.inputHeader {
    margin-bottom: 2vw;
}
input{
    margin-top:0.5vw;
    margin-bottom: 1vw;
    font-family: 'Poppins', 'Arial Narrow', Arial, sans-serif;
}
.confirmPurchase{
    text-align: center;
}
.paymentOption{
    text-align: left;
    font-size:1.8vw;
    margin-top:3vw;
    margin-bottom: 1vw;
}
.buyItem{
    padding-bottom:1vw;
}
#purchaseButton{
    font-size:3.2vw;
    font-weight:700;
}
#rightImage{
    position: relative;
    display:block;
    width: 50vh;
    height:50vh;
    padding-top:2vh;
    margin-left:auto;
    margin-right:auto;
   
}
.prebuiltImage{
    width:25vw;
    height: 25vw;
}
.imageBox{
    position: relative;
    height:25vw;
    align-items: center;
    padding-top:2vw;
}
.links{
    padding-top:1.5vw;
    max-width:100%;
}
.link{
    font-size:2.6vw;
    font-weight:600;
    padding-left:5%;
    padding-right:5%;
    text-decoration: none;
    color:red;
}
.pickup{
    text-align: center;
}
.paymentText{
    text-align: left;
    margin-left:5vw;
}
.LHR{
    font-size:2.6vw;
    text-align: right;
    margin-right:6.5vw;
    padding-top:1vw;
}
input[type=checkbox]
{
    margin-left:3vw;
    transform: scale(2);

}
.indexImage {
    width:21vw;
    padding-top:5vw;
    padding-right:5vw;
}
.listSplit{
    padding-bottom:1vw;
    padding-top:1vw;
    text-align: left;
    font-size:1.6vw;
}

.resetHolder{
    text-align: center;
    padding-top:1vw;
    position: relative;
    top: -3vw;
    width:17vw;
}
#reset{
    font-weight:bold;
    display: inline-block;
}
#additional{
    display: block;
    margin-top:2vw;
    width:60vw;
    margin-left:auto;
    margin-right:auto;
}
.leftImage{
    width:5%;
    position:fixed;
    top:0%;
    left:0%;
}

#majorSelect{
    width:90vw;
    left:-90vw;
    top:-3vw;
}
.prebuiltText{
    text-align: center;
    position: relative;
    left:5%;
    width:90%;
}
.arrow{
    position: relative;
    margin-left: 90%;
    margin-bottom: -3vw;
    padding:0.5vw 0.5vw 0.5vw 0.5vw;
    top:-4vw;
    width:3vw;
    height:1.5vw;
    z-index:3;
}
.text{
    font-size: 1.2vw;
}

@media only screen and (max-width:1030px){
    .rightMain{
        position: relative;
        width:100%;
        left:0%;
    }
    .itemClass{
        width:95%;
    }
    .item{
        padding-bottom: 2vw;
    }
    .itemName{
        width:68vw;
    }
    input{
        position: relative;
        top:1vw;
    }
    .text{
        font-size: 2.4vw;
    }
    .smallText{
        font-size:2.2vw;
    }
    .priceText{
        font-size:3vw;
        margin-left:0vw;

    }
    .navTitle{
        font-size:2.6vw;
    } 
    .bigText{
        font-size:4vw;
    }
    .perHead{
        width:95%;
    }
    .perDesc{
        width:90%;
    }
    .perArrow{
        left:75vw;
        transform: scale(2);
    }
    .rightMain{
        top:10vw;
    }
    .arrow{
        width:6vw;
        height:3vw;
        top:-6vw;
    }
    .imageBox{
        width:60%;
        position: relative;
        left:20%;
        height:60%;
    }
    .prebuiltImage{
        width:100%;
        height:100%;
    }
    .prebuiltPart{
        min-width:90%;
        padding-bottom: 0vw;
        height:0vw;
    }
    .prebuiltPartTitle{
        min-width:30%;
    }
    .spec{
        max-width:90%;
    }
    .mainPrebuilt{
        max-width: 98%;
    }
    .category{
        width: 80%;
    }
    .buyPrebuilt{
        font-size:3vw;
    }
    .buyPrebuiltNow{
        font-size:3vw;
    }
    .totalPrebuiltPrice{
        font-size: 6vw;
    }
    .leftImage {
        width:9%;
    }
    .indexImage {
        width:80vw;
        padding-top:5vw;
        padding-right:5vw;
    }
    #currencySelect{
        margin-top:0.4vw;
        font-size: 2.2vw;
        margin-right: 3vw;
    }
    #mainBuy{
        margin-top: 10vw;
        text-align: left;
    }
}
@media only screen and (min-width:1030px){
    .text{
        font-size:1vw;
    }
    .priceText{
        font-size:1.3vw;
    }
    .smallText{
        font-size:0.8vw;
    }
    .navTitle{
        font-size:1.3vw;
    }
    .bigText{
        font-size:1.3vw;
    }
    .spec{
        max-width:32%;
    }
    input[type=checkbox]{
        transform: scale(2);
    }
    input[type=radio]{
        transform: scale(2);
    }
    .price{
        margin-left:4vw;
    }
    
}

.fullScreenImage {
    width:25%;
    height:100%;
}