/* ==========================================
   ZERO9HUNDRED PROTOTYPE P001
   style.css
========================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {

    font-family: Arial, Helvetica, sans-serif;

    background: #0b1016;

    color: #f5f7fa;

    display: flex;

    justify-content: center;

    padding: 40px;

}

.container {

    width: 100%;
    max-width: 900px;

}

/* ==========================
   HEADER
========================== */

header {

    text-align: center;

    margin-bottom: 40px;

}

header h1 {

    letter-spacing: 6px;

    font-size: 38px;

    font-weight: 700;

}

.tagline {

    color: #4da3ff;

    margin-top: 10px;

    letter-spacing: 2px;

    font-size: 14px;

}

/* ==========================
   CARD
========================== */

.exercise-card {

    background: #121923;

    border: 1px solid #243140;

    border-radius: 18px;

    padding: 30px;

    box-shadow: 0 12px 30px rgba(0,0,0,.35);

}

/* ==========================
   TITLE
========================== */

.exercise-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

}

.exercise-header h2 {

    font-size: 28px;

    letter-spacing: 2px;

}

.difficulty {

    color: #63b3ff;

    font-size: 13px;

    letter-spacing: 1px;

}

/* ==========================
   BLUEPRINT AREA
========================== */

.blueprint {

    position: relative;

    height: 420px;

    margin: 20px 0;

    border-radius: 14px;

    border: 1px solid #223245;

    overflow: hidden;

    background-color: #07111b;

    background-image:

        linear-gradient(rgba(70,120,180,.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(70,120,180,.12) 1px, transparent 1px);

    background-size: 30px 30px;

}

/* ==========================
   FIGURE
========================== */

#exerciseFigure {

    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: 240px;
    height: 220px;

}

/* Head */

.head {

    position: absolute;

    width: 24px;
    height: 24px;

    border: 3px solid white;

    border-radius: 50%;

    left: 105px;
    top: 10px;

}

/* Body */

.body {

    position: absolute;

    width: 3px;
    height: 90px;

    background: white;

    left: 116px;
    top: 34px;

}

/* Arms */

.arm {

    position: absolute;

    width: 70px;
    height: 3px;

    background: white;

    top: 70px;

}

.arm.left {

    left: 48px;

    transform: rotate(-20deg);

}

.arm.right {

    left: 118px;

    transform: rotate(20deg);

}

/* Legs */

.leg {

    position: absolute;

    width: 80px;
    height: 3px;

    background: white;

    top: 125px;

}

.leg.left {

    left: 42px;

    transform: rotate(28deg);

}

.leg.right {

    left: 118px;

    transform: rotate(-28deg);

}

/* ==========================
   BUTTON
========================== */

#animateBtn {

    width: 100%;

    margin-top: 25px;

    padding: 16px;

    border: none;

    border-radius: 12px;

    background: #1788ff;

    color: white;

    font-size: 16px;

    cursor: pointer;

    transition: .25s;

}

#animateBtn:hover {

    background: #2c98ff;

}

/* ==========================
   TIERS
========================== */

.tiers {

    display: flex;

    gap: 12px;

    margin-top: 30px;

}

.tier {

    flex: 1;

    padding: 14px;

    background: #182331;

    color: white;

    border: 1px solid #2d4258;

    border-radius: 12px;

    cursor: pointer;

    transition: .25s;

}

.tier:hover {

    border-color: #4da3ff;

}

.tier.active {

    background: #1788ff;

}

/* ==========================
   PANELS
========================== */

.info {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

    margin-top: 30px;

}

.panel {

    background: #121923;

    border: 1px solid #243140;

    border-radius: 14px;

    padding: 20px;

}

.panel h3 {

    color: #63b3ff;

    margin-bottom: 14px;

    letter-spacing: 1px;

}

.panel p,
.panel li {

    color: #d6dde6;

    line-height: 1.8;

}

.panel ul {

    padding-left: 18px;

}

/* ==========================
   MOBILE
========================== */

@media (max-width:700px){

.info{

    grid-template-columns:1fr;

}

.exercise-header{

    flex-direction:column;

    gap:10px;

    text-align:center;

}

.tiers{

    flex-direction:column;

}

}