/* ----------------------------------
    STYLES
---------------------------------- */

:root {
    --deep-purple: #090513;
}

* {
    margin: 0px;
    padding: 0px;
}

body {
    background: #000;
    overflow-x: hidden;
    font-size: 16px;
    color: #fff;
}

#main_wrapper {
    width:100%;
    height:auto;
    background: #000;
    margin: 0 auto;
}


.wrapper {
    width: min(1210px, 100% - 10vw);
    margin-inline: auto;
    position: relative;
}

.wrapper.medium_width {
    width: min(1000px, 100%);
}

/* ----------------------------------
        MARK: Font Styles
---------------------------------- */
p, li {
    --max-font-size: 18;
    --min-font-size: 16;
 }

p {
    margin-block: 1em;
	line-height: 150%;
}

ul {
    margin-block: 0.9375em;
	line-height: 150%;
}

li {
    margin-left: 1.25em;
	margin-top: 0.3125em;
	margin-bottom: 0.4125em;
	line-height: 150%;
}

h1 {
	--max-font-size: 55;
	--min-font-size: 35;
	font-weight: bold;
	line-height: 1.1em;
}

h2 {
	--max-font-size: 50;
	--min-font-size: 32;
	font-weight: bold;
	line-height: 1.1em;
}

h3 {
	--max-font-size: 40;
	--min-font-size: 25;
	font-weight: bold;
	line-height: 1.1em;
}

h4 {
	--max-font-size: 22;
	--min-font-size: 20;
    font-weight: normal;
    line-height: 1.3em;
}


/* ----------------------------------
        MARK: Colors
---------------------------------- */
.white { color:#fff; }
.black { color:#000000; }
.blue { color:#0071c5; }
.lt_blue { color:#00adef; }
.lt_blue2 { color:#69d6ff; }
.dk_blue { color:#003b70; }
.gray { color:#555555; }
.dk_gray { color:#333333; }
.yellow { color:#feda00; }
.green { color:#74a72d; }
.orange { color:#ffa300;  }
.dk_orange { color:#fb4b02; }
.purple { color: #180153; }

.nomargin { margin: 0 !important; }
.notopmargin, .nomargintop {margin-top: 0 !important;}
.nobottommargin, .nomarginbottom {margin-bottom: 0 !important;}


/* ----------------------------------
        MARK: Misc Default Styles
---------------------------------- */
.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}

.section {
    position: relative;
}

.vc {
    display: flex;
    align-items: center;
}

.hc {
    display: flex;
    justify-content: center;
}

.vhc {
    display: flex;
    align-items: center;
    justify-content: center;
}



/* ----------------------------------
        MARK: Custom Code
---------------------------------- */
.full_img {
    width:100%;
    height:auto;
    position: relative;
    display: block;
}

.full_width_img {
    width: 100%;
    height: auto;
    background-position: center top;
    background-repeat: no-repeat;
    display: block;
}


/* ----------------------------------
    MARK: 1 - Title
---------------------------------- */
#bg_1 {
    width: 2240px;
    position: absolute;
    top: 0;
    left:50%;
    translate: -50% 0;
    overflow-y: hidden;
}

#bg_1 img {
    width: 100%;
    height: auto;
    display: block;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

#box_1 .content {
    position: relative;
    padding-top: 345px;
}

#box_1 .image_wrapper,
#box_7 .image_wrapper {
    position: relative;
    display: inline-block;
}
.badge {
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
.device {
    position: relative;
    width: min(1073px, 80vw);
}

#box_1 h1 {
    margin-top: max(-70px, -4vw);
}


/* ----------------------------------
    MARK: 2 - Product Diff
---------------------------------- */
#box_2 {
    padding-top: min(80px, 8vw);
}

/* Wrap all tables in a div with this class so they display correctly on mobile */
.chart {
    overflow-x: auto;
    margin-top: min(65px, 6vw);
}
.touchandswipe {
    display: flex;
    align-items: center;
    margin-top: min(40px, 6vw);
    margin-bottom: -3vw;
}
.touchandswipe img {margin-inline-end: 0.5em;}
.touchandswipe.hide {display: none;}

#chart_2 {
    min-width: 425px;
    display: grid;
    grid-template-columns: 0.5fr 1fr 1fr;
    gap: 2px;
}

#chart_2 img {
    width: min(380px, 100%);
    margin-inline: auto;
    display: block;
}

#chart_2 p {
    margin: 0;
}

/* top device row */
#chart_2 > div:nth-child(2),
#chart_2 > div:nth-child(3) {
    background: #202a71;
    padding: 20px min(30px, 3vw);
}

/* header column */
#chart_2 > div:nth-child(3n+4) {
    background: #12d9ff;
    color: #202a71;
    padding: 20px min(30px, 3vw);
    min-height: min(100px, 15vw);
}

/* main content */
#chart_2 > div:nth-child(3n+5),
#chart_2 > div:nth-child(3n+6) {
    background: #0d184b;
    padding: 20px min(30px, 3vw);
}

#chart_2 > div:nth-child(3n+5) p,
#chart_2 > div:nth-child(3n+6) p {
    --max-font-size: 18;
    --min-font-size: 15;
}

/* everything below top row */
#chart_2 > div:nth-child(1n+4) {
    display: flex;
    align-items: center;
}


/* ----------------------------------
    MARK: 3 - Proc Power
---------------------------------- */

.top_image {
    width: 100%;
    aspect-ratio: 2.7;
    position: relative;
}
.top_image img {
    left: 50%;
    translate: -50% min(-65px, -10%);
    position: absolute;
    max-width: 100vw;
    top: 0;
}

.top_text {
    position: relative;
}
.feature_box {
    display: grid;
    grid-template-columns: auto 1fr;
    width: 100%;
    margin-top: min(50px, 9vw);
    position: relative;
}

.feature_box .image {
    width: min(400px, 32vw);
}

.feature_box .image img {
    width: 100%;
    display: block;
}

.feature_box .text {
    background: #202a71;
    padding: min(40px, 4vw) min(50px, 4vw);
    display: flex;
    align-items: center;
}

.chart, .feature_box:last-child {
    z-index: 1;
    position: relative;
}




/* ----------------------------------
    MARK: 4 - Design Features
---------------------------------- */
#box_4 .top_image img {
    translate: -50% min(-95px, -14%);
}



/* ----------------------------------
    MARK: 5 - AI Features
---------------------------------- */




/* ----------------------------------
    MARK: 6 - PC Personalization
---------------------------------- */




/* ----------------------------------
    MARK: 7 - Summary
---------------------------------- */
#box_7 {overflow: hidden;}
#bg_7 {
    width: 130%;
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
}

#bg_7 img {
    width: 100%;
    height: auto;
    display: block;
}

#box_7 .content {
    position: relative;
    padding-top: min(530px, 50vw);
    padding-bottom: min(60px, 11vw);
}

#box_7 h2 {
    margin-top: max(-70px, -4vw);
}

/* Quiz section ---------- */
#quiz_box {
    margin-inline: auto;
    margin-top: 2em;
    /* margin-bottom: 3em; */
    text-align: center;
}

#quiz_box .quit_button {
    display: inline-block;
}

#quiz_box .quit_button p {
	--max-font-size: 25;
	/* --min-font-size: 22; */
	line-height: 100%;
	font-weight: bold;
	color: #202a71;
	padding: 0.75em 1.5em;
	margin: 0;
	background-color: #12d9ff;
	cursor: pointer;
    transition: 0.4s all ease;
}

#quiz_box.locked {
    filter: saturate(0%);
    pointer-events: none;
}
#quiz_locked_message {opacity: 0;}
#quiz_box.locked #quiz_locked_message {opacity: 1;}

@media (hover: hover) {
    #quiz_box p:hover {
	    color: #12d9ff;
        background-color: #202a71;
    }
}





/* Keep these near the bottom to make sure your custom code doesn't accidentally overwrite these classes */
.show_on_HD {display: block;}
.show_on_MOB {display: none;}



/* ----------------------------------
        MARK: MEDIA QUERIES
---------------------------------- */

/* TABLET */
@media only screen and (max-width: 1024px) {
	p, ul, li {line-height: 140%;}


    #legal_wrapper_full {padding-block: 8vw;}
}


/* MOBILE */
@media only screen and (max-width: 768px) {
    /* DEFAULT MOBILE STYLING */
    .show_on_MOB {display: block;}
    .show_on_HD {display: none;}

    #bg_1 {
        width: 1024px;
    }
    #box_1 .content {
        padding-top: 158px;
    }

    .feature_box {
        grid-template-columns: 1fr;
    }
    .feature_box .image {
        width: 100%;
    }

}


/* PHONE */
@media only screen and (max-width: 500px) {
    #box_1 .wrapper.medium_width, #box_3 .top_text, #box_4 .top_text, #box_5 .top_text, #box_6 .top_text, #box_7 .content {text-align: start;}

    #box_7 .device {
        width: 90vw;
    }

    .chart {
        margin-left: -5vw;
        width: calc(100% + 10vw);
    }

    .top_image {
        aspect-ratio: 1.9;
    }

    .top_image img {
        max-width: unset;
        width: 130vw;
    }


}