@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap');

:root {
  --pale-blue: hsl(225, 100%, 94%);
  --bright-blue: hsl(245, 75%, 52%);
  --very-pale-blue: hsl(225, 100%, 98%);
  --desaturated-blue: hsl(224, 23%, 55%);
  --dark-blue: hsl(223, 47%, 23%);
  --font-family: 'Red Hat Display', sans-serif;
}

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


@media screen and (min-width: 377px) {
    body {
        background-color: var(--pale-blue);
        background-image: url(/images/pattern-background-desktop.svg);
        background-repeat: no-repeat;
        background-size: contain;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-family: 'Red Hat Display';
    }
    .class-container {
        height: auto;
        width: 40rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        background-color: white;
        border-radius: 1rem;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    }
    .class-container_heroImg{
        width: 100%;
        border-top-right-radius: 1rem;
        border-top-left-radius: 1rem;
    }
    .class-container_body-section{
        display: flex;
        flex-direction: column;
        padding:3rem;
        align-items: center;
        gap: 3rem;
    }
    .class-container_body-section_head-section{
        display: flex;
        flex-direction: column;
        margin-bottom: -2rem;
    }
    .class-container_body-section_head-section_text1{
        font-size: 2.5rem;
        font-weight: 900;
        color: var(--dark-blue);
    }
    .class-container_body-section_head-section_text2{
        padding: 3rem;
        font-size: 1.5rem;
        color: var(--desaturated-blue);
        font-weight: 500;
        margin-top: -1rem;
    }
    .class-container_body-section_plan-section {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12rem;
    }
    .class-container_body-section_plan-section_left-section {
        display: flex;
        gap: 1.5rem;
        align-items: center;
    }
    .class-container_body-section_plan-section_left-section_container{
        display: flex;
        flex-direction: column;
    }
    .class-container_body-section_plan-section_left-section_container_text1{
        font-size: 1.1rem;
        font-weight: 900;
        color: var(--dark-blue);
    }
    .class-container_body-section_plan-section_left-section_container_text2{
        font-size: 1.1rem;
        color: var(--desaturated-blue);
        font-weight: 500;
    }
    .class-container_body-section_plan-section_change{
        font-weight: 700;
        font-size: 1.2rem;
    }
    .class-container_body-section_plan-section_change:hover{
        cursor: pointer;
        text-decoration: none;
        color: var(--desaturated-blue);
    }
    .class-container_body-section_btn{
        width: 80%;
        height: 4rem;
        background-color: var(--bright-blue);
        border: none;
        color: white;
        font-size: 1.2rem;
        font-weight: 700;
        border-radius: 1rem;
        box-shadow: 0 20px 20px rgba(37, 87, 207, 0.3);
    }
    .class-container_body-section_btn:hover{
        cursor: pointer;
        background-color: var(--desaturated-blue);
    }
    .class-container_body-section_cancelText{
        color: var(--desaturated-blue);
        font-size: 1.2rem;
        font-weight: 900;
    }
    .class-container_body-section_cancelText:hover{
        cursor: pointer;
        color: var(--dark-blue);
    }
} 

@media screen and (max-width: 376px) {
    body {
        background-color: var(--pale-blue);
        background-image: url(/images/pattern-background-desktop.svg);
        background-repeat: no-repeat;
        background-size: center;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-family: 'Red Hat Display';
    }
    .class-container {
        margin: 1rem;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        background-color: white;
        border-radius: 1rem;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    }
    .class-container_heroImg{
        width: 100%;
        border-top-right-radius: 1rem;
        border-top-left-radius: 1rem;
    }
    .class-container_body-section{
        display: flex;
        flex-direction: column;
        padding:2rem;
        align-items: center;
        gap: 3rem;
    }
    .class-container_body-section_head-section{
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .class-container_body-section_head-section_text1{
        font-size: 1.5rem;
        font-weight: 900;
        color: var(--dark-blue);
    }
    .class-container_body-section_head-section_text2{
        font-size: 1rem;
        color: var(--desaturated-blue);
        font-weight: 500;
        padding:0 1rem;
        line-height: 1.6rem;
    }
    .class-container_body-section_plan-section {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4rem;
    }
    .class-container_body-section_plan-section_left-section {
        display: flex;
        align-items: center;
        gap: 1.5rem;
    }
    .class-container_body-section_plan-section_left-section_container_text1{
        font-size: 1rem;
        font-weight: 900;
        color: var(--dark-blue);
    }
    .class-container_body-section_plan-section_left-section_container_text2{
        font-size: 1rem;
        color: var(--desaturated-blue);
        font-weight: 500;
    }
    .class-container_body-section_plan-section_change{
        font-weight: 700;
        color: var(--bright-blue);
    }
    .class-container_body-section_plan-section_change:hover{
        cursor: pointer;
        text-decoration: none;
        color: var(--desaturated-blue);
    }
    .class-container_body-section_btn{
        width: 100%;
        height: 3rem;
        background-color: var(--bright-blue);
        border: none;
        color: white;
        font-size: 1rem;
        font-weight: 700;
        border-radius: 1rem;
        box-shadow: 0 20px 20px rgba(37, 87, 207, 0.3);
    }
    .class-container_body-section_btn:hover{
        cursor: pointer;
        background-color: var(--desaturated-blue);
    }
    .class-container_body-section_cancelText{
        color: var(--desaturated-blue);
        font-size: 1rem;
        font-weight: 900;
    }
    .class-container_body-section_cancelText:hover{
        cursor: pointer;
        color: var(--dark-blue);
    }
}