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

/* Default styles */
:root{
    --padding-left-right: 170px;
    --background-color: #FFF3C2;
    --illustration-container-color: #D6B6A1;
    --button-color: #496CD8;
    --heading-color: #5CE1E4;
    --primary-radius: 20px;
    --text-color: #766D85;
}

/* Body */
body{
    background-color: var(--background-color);
}

/* #### Media Queries #### */
/* Phone */
@media screen and (min-width: 350px){
    /* Body */
    body{
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Logo */
    #logo{
        width: 50px;
        height: 50px;
    }

    /* Nav Menu */
    .nav-menu{
        padding-top: 20px;
    }

    /* navbar */
    .nav{
        justify-content: flex-end;
        align-items: center;
    }
    .menu{
        display: none;
    }

    /* Hamburger Icon */
    .fa-bars{
        display: block;
        font-size: 48px;
        color: var(--heading-color);
    }

    /* ##### Hero section ###### */
    .hero-section{
        margin-top: 50px;
        margin-bottom: 50px;
    }

    /* Sub heading */
    #sub-heading{
        font-size: 18px;
        color: var(--button-color);
        letter-spacing: 10px;
        font-weight: bold;
    }

    /* heading */
    #heading{
        font-weight: bold;
        line-height: 55px;
        color: var(--heading-color);
        font-size: 48px;
    }

    /* Paragraph */
    #paragraph{
        margin-top: 30px;
        font-size: 24px;
        color: var(--text-color);
        line-height: 30px;
    }

    /* Button */
    .get-started-btn{
        width: 100%;
        height: 50px;
        margin-bottom: 20px;
        font-size: 24px;
        border-radius: var(--primary-radius);
        margin-top: 30px;
        background-color: var(--heading-color);
        color: var(--button-color);
        font-weight: bold;
        border: none;
    }

    .get-started-btn:focus{
        background-color: var(--button-color);
        color: white;
    }

    /* Social icons */
    .icons{
        display: inline-flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin-top: 10px;
    }

    .icon{
        color: var(--button-color);
    }

    /* hides the svg */
    .right-column{
        display: none;
    }
}

/* Tablet */
@media screen and (min-width: 700px){
    /* Body */
    body{
        padding-left: 50px;
        padding-right: 50px;
        padding-top: 50px;
    }

    /* Logo */
    #logo{
        width: 100px;
        height: 100px;
    }

    /* Hamburger Icon */
    .fa-bars{
        display: block;
        font-size: 96px;
    }

    /* ##### HERO SECTION ##### */
    .hero-section{
        margin-top: 100px;
    }

    /* sub-heading */
    #sub-heading{
        font-size: 32px; 
    }

    /* paragraph */
    #paragraph{
        font-size: 24px;
        line-height: 40px;
    }

    /* button */
    .get-started-btn{
        width: 100%;

    }

    /*  */
}

/* Desktop */
@media screen and (min-width: 1100px){
    /* Nav menu */
    .nav-menu{
        padding-left: var(--padding-left-right);
        padding-right: var(--padding-left-right);
    }

    /* Hero section */
    .hero-section{
        padding-left: var(--padding-left-right);
        padding-right: var(--padding-left-right);
    }

    /* Logo */
    #logo{
        width: 100px;
        height: 100px;
    }

    /* Hamburger Icon */
    #hamburger-icon{
        display: none;
    }
    /* Menu list */
    .menu{
        display: block;
        list-style: none;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 30px;
        font-size: 24px;
        font-weight: bold;
        color: var(--heading-color);
    }

    /* Hover */
    .menu li{
        cursor: pointer;
    }

    .menu li:hover{
        border-bottom: solid var(--heading-color) 3px;
    }

    /* button */
    .get-started-btn{
        background-color: var(--heading-color);
        width: 100%;
        height: 50px;
        border-radius: var(--primary-radius);
        font-size: 24px;
        font-weight: bold;
        color: var(--button-color);
        border: none;
    }

    /* Button hover */
    .get-started-btn:hover{
        background-color: var(--button-color);
    }

    .get-started-btn:focus{
        background-color: var(--heading-color);
        color: var(--button-color);
        box-shadow: none;
    }

    /* icons */
    .icons{
        display: flex;
        gap: 10px;
    }

    .icon{
        height: 50px;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 70px;
        background-color: var(--button-color);
    }

    /* Icon hover */
    .icon:hover{
        border: var(--heading-color) solid 3px;
    }

    /* ##### HERO SECTION ##### */
    .hero-section{
        margin-top: 100px;
        margin-bottom: 200px;
        align-items: center;
    }

    /* Right column */
    .right-column{
        background-color: var(--illustration-container-color);
        width: 470px;
        height: 470px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100px;
    }

    .right-column > img{
        width: 500px;
        height: 400px;
    }

    .hero-inner{
        gap: 80px;
        align-items: center;
    }

    /* body */
    body{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    /* ##### Select your Pizza section #### */
    .select-pizza{
        margin-top: 100px;
        background-color: white;
        border-top-left-radius: 160px;
        border-top-right-radius: 160px;
        padding-left: var(--padding-left-right);
        padding-right: var(--padding-left-right);
        padding-top: 100px;
        text-align: center;
    }

    /* heading */
    #select-heading{
        font-size: 48px;
        font-weight: bold;
        color: var(--heading-color);
        margin-bottom: 30px;
    }

    /* pizza cards */
    .pizza-card{
        box-shadow: 0px 4px 60px 10px rgba(73,108,216, 0.4);
        padding: 20px;
        width: 240px;
        border-radius: 40px;
    }

    /* Pizza Name on card */
    .card-title{
        font-weight: bold;
        color: var(--button-color);
        margin-top: 20px;
    }

    /* Pizza price */
    .card-body{
        margin-top: -30px;
        color: var(--text-color);
    }

    .card-body span{
        font-weight: bold;
    }

    /* card button */
    .card-button{
        margin-top: -20px;
        font-size: 24px;
        font-weight: bold;
        width: 100%;
        border-radius: 20px;
    }

    /* Pizza second row */
    .pizza-second-row{
        margin-top: 70px;
        margin-bottom: 200px;
        /* scroll-behavior: smooth; */
    }

    /* #### MODAL #### */
    .modal-header{
        border: none;
    }

    .modal-body{
        border: none;
    }

    .modal-footer{
        border: none;
    }

    .modal-content{
        border-radius: 40px;
        padding: 40px;
    }

    /* Modal Header */
    .modal-header-gap{
        display: inline-flex;
        gap: 80px;
    }

    /* radio */
    .radio-label{
        color: var(--button-color);
    }

    .radio-buttons{
        display: inline-flex;
        gap: 20px;
    }

    /* radio button group */
    .radio{
        display: inline-flex;
    }

    #radio-form{
        display: flex;
        gap: 40px;
    }

    /* Select */
    #select-label{
        font-weight: bold;
        letter-spacing: 2px;
        color: var(--text-color);
    }

    #select-crust{
        border-radius: 20px;
    }

    /* Pizza name */
    #pizza-name{
        color: var(--text-color);
    }

    #initial-price-pre-text{
        color: black;
    }

    #initial-price-text{
        color: var(--button-color);
    }

    /* Quantity */
    #quantity-label{
        color: var(--button-color);
        font-size: 24px;
        letter-spacing: 15px;
        font-weight: bold;
    }

    #order-type-label{
        color: var(--text-color);
        font-size: 24px;
        font-weight: bold;
    }

    /* label styles */
    .form-labels{
        font-weight: bold;
        color: var(--text-color);
        font-size: 18px;
    }

    /* buttons */
    #calculate, #checkout{
        width: 100%;
        background-color: var(--button-color);
        border-radius: 15px;
        height: 50px;
        font-size: 24px;
    }

    /* Total Output */
    #total-output{
        font-size: 40px;
        font-weight: bold;
        color: var(--button-color);
    }

    /* output heading */
    #order-summary{
        text-align: center;
        margin-top: 40px;
        color: var(--text-color);
        font-size: 48px;
    }

    .title{
        font-weight: bold;
        font-size: 24px;
        color: rgba(73,108,216, .5);
    }
    
    .summary{
        font-size: 18px;
        color: var(--text-color);
    }

    .title{
        display: none;
    }
}