:root{--Marine-blue: hsl(213, 96%, 18%);--Purplish-blue: hsl(243, 100%, 62%);--Pastel-blue: hsl(228, 100%, 84%);--Light-blue: hsl(206, 94%, 87%);--Strawberry-red: hsl(354, 84%, 57%);--Cool-gray: hsl(231, 11%, 63%);--Light-gray: hsl(229, 24%, 87%);--Magnolia: hsl(217, 100%, 97%);--Alabaster: hsl(231, 100%, 99%);--White: hsl(0, 0%, 100%);--1rem: 1rem;--regular: 400;--medium: 500;--bold: 700}@font-face{font-family:Ubuntu;src:url(/fonts/Ubuntu.ttf)}*{margin:0;padding:0;box-sizing:border-box;list-style:none;text-decoration:none}body{font-family:Ubuntu;height:100vh}#root{display:flex;align-items:center;justify-content:center;background-color:var(--Magnolia);height:100vh}.hero{width:70rem;background-color:var(--White);padding:1rem;border-radius:15px;box-shadow:0 0 5px #000}.main-container{display:flex}a:hover{cursor:pointer}.sidebar{background:url(/bg-sidebar-desktop.svg) no-repeat center center;height:35rem;width:17rem;border-radius:12px;padding:2rem}.step-container{display:flex;flex-direction:column;gap:1.5rem}.firstStep{width:100%;display:flex;align-items:center;gap:10px;z-index:1000}.count1{font-size:16px;height:2rem;width:2rem;border:1px solid white;border-radius:50%;padding:5px;display:flex;align-items:center;justify-content:center;color:var(--White);font-weight:var(--bold)}.count1.active{background-color:var(--Light-blue);color:var(--marine-blue)}.steps{color:var(--Cool-gray);font-size:12px;font-family:Ubuntu}.stepHeading{color:var(--White);text-transform:uppercase;font-size:14px;font-family:Ubuntu}.title{font-size:3rem;color:var(--Marine-blue)}.description{font-size:1.3rem;margin-bottom:2rem;font-weight:var(--regular);color:var(--Cool-gray)}input,label{cursor:pointer}.input-area{width:70%;position:relative;padding:1rem 7rem}form>label{display:flex;flex-direction:column;gap:5px;font-weight:var(--regular);color:var(--Marine-blue);font-family:Ubuntu;position:relative}label>input{height:3rem;border-radius:10px;border:1px solid var(--Cool-gray);margin-bottom:1.5rem;padding:1rem;font-size:1rem;font-weight:var(--bold);color:var(--marine-blue);outline:none;font-family:Ubuntu}input:focus{border:.5px solid var(--Purplish-blue)}.alert{position:absolute;right:0;color:red;border:.5px soild red}.btn{height:3rem;width:8rem;border-radius:10px;background-color:var(--Marine-blue);color:var(--Magnolia);font-size:.9rem;font-weight:700;border:none;outline:none;font-family:Ubuntu;margin-left:auto;transition:.4s ease-in}.btn:hover,:focus{cursor:pointer;font-size:1rem}.plans{display:flex;gap:1rem}.plan{border:1px solid var(--Cool-gray);height:13.5rem;width:11.6rem;border-radius:10px;display:flex;flex-direction:column;padding:1rem;transition:.4s}.plan:hover,:focus{border:1px solid var(--Purplish-blue);cursor:pointer}.logo{height:3rem;width:3rem;margin-bottom:auto}.arcade-title{color:var(--Marine-blue);font-family:Ubuntu}.pricing{color:var(--Cool-gray)}.arcade-logo{background:url(/icon-arcade.svg) no-repeat top left}.advance-logo{background:url(/icon-advanced.svg) no-repeat top left}.pro-logo{background:url(/icon-pro.svg) no-repeat top left}.arcade.active,.advance.active,.pro.active{cursor:pointer;border:1px solid var(--Purplish-blue)}.select-plans{position:relative;display:flex;align-items:center;justify-content:center;gap:2rem;background-color:var(--Light-gray);color:var(--Marine-blue);height:3rem;margin:1rem 0;border-radius:10px}.monthly.yearOn,.yearly{color:var(--Cool-gray)}.yearly.monthOn{color:var(--marine-blue)}.toggle{height:41px;display:flex;align-items:center;justify-content:center}.toggle label{width:75px;height:33px;position:relative;display:block;background-color:var(--Marine-blue);border-radius:20px;cursor:pointer;transition:.4s}.toggle label:after{content:"";width:29px;height:29px;position:absolute;top:2px;left:2px;background-color:var(--Alabaster);border-radius:20px;transition:.4s}.toggle input{width:0;height:0;visibility:none}.toggle input:checked+label{background:black}.toggle input:checked+label:after{left:72px;transform:translate(-100%);background:var(--Alabaster)}.btn-container{height:6rem;display:flex;align-items:end;justify-content:space-between;padding-bottom:10px}.backBtn{font-size:1rem;font-weight:var(--bold);color:var(--Marine-blue);transition:.3s}.backBtn:hover{font-size:1.1rem;cursor:pointer}.service{display:flex;align-items:center;border:1px solid var(--Marine-blue);border-radius:10px;padding:.5rem 1rem;margin:1rem 0;color:var(--Marine-blue);height:4rem}.service:hover,:focus{border:1px solid var(--Purplish-blue);cursor:pointer}.service.active{border:1px solid var(--Purplish-blue)}.service input{height:1.3rem;width:1.3rem}.services{margin-right:auto;margin-left:2rem}.service-title{font-size:1rem}.service-description{font-size:.8rem;font-weight:var(--regular);color:var(--Cool-gray)}.checkout-container{margin-bottom:2rem}.selected-plans{background-color:var(--Alabaster);border-radius:10px}.main-plan{margin-bottom:1rem;font-size:1rem}hr{width:90%;margin:auto;color:var(--Light-gray);opacity:30%}.final-plans{display:flex;align-items:center;justify-content:space-between;padding:1rem}.confirm-btn{background:var(--Purplish-blue)}.final-plans a{text-decoration:underline}.final-plan-name{font-size:1rem;color:var(--Marine-blue)}.addon-plan-name{font-size:.8rem;color:var(--Cool-gray);font-weight:var(--regular)}.final-price{font-weight:var(--bold);color:var(--Marine-blue)}.addon-price{font-weight:var(--regular);font-size:.8rem;color:var(--Marine-blue)}.total{color:var(--Cool-gray)}.total-price{font-size:1.2rem;font-weight:var(--bold);color:var(--Marine-blue)}.confirmation-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;width:100%;text-align:center;gap:1rem}.confirmation-text{color:var(--Cool-gray)}@media screen and (max-width: 800px){body{background-color:var(--Light-blue)}#root{display:block;position:relative;height:100vh;width:auto;margin:0;padding:0;box-sizing:border-box}.main-container{flex-direction:column;align-items:center;justify-content:center;width:100vw;padding:0;margin:0;position:relative}.hero{padding:0;margin:0;height:auto;width:auto;border-radius:0}.sidebar{background:url(/bg-sidebar-mobile.svg) no-repeat center center;width:100vw;height:25vh;background-size:cover;padding:2rem;border-radius:0}.step-container{flex-direction:row;align-items:center;justify-content:center;text-align:center;width:100%;gap:1rem}.firstStep{height:3rem;width:3rem}.step{display:none}.count1{height:3rem;width:3rem}.input-area{width:85%;margin-top:-5rem;background-color:var(--Alabaster);padding:2rem;border-radius:1rem}.btn-container{position:fixed;bottom:0;left:0;background:var(--White);width:100vw;height:4rem;padding:.8rem 4rem;display:flex;align-items:center}.nextStep{margin-left:auto}.title{font-size:2rem}.description{font-size:1rem}label>input{height:2.5rem}}