/* style.css */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 

body { 
    background-image: linear-gradient(rgb(30, 30, 30), rgb(80, 80, 80)); 
    background-attachment: fixed; 
    font-family: Arial, Helvetica, sans-serif; 
} 

.resume-builder { 
    padding: 27px 100px; 
} 

.container { 
    padding: 10px 30px; 
    background: rgb(240, 240, 240); 
    border-radius: 10px; 
    height: auto; 
    width: 60%; 
    margin: auto; 
} 

.container h1 { 
    text-align: center; 
    background-color: rgb(50, 50, 50); 
    padding: 10px; 
    color: white; 
    margin-bottom: 20px; 
} 

input, 
textarea { 
    background-color: transparent; 
    margin: 10px 0; 
    padding: 5px; 
    outline: none; 
    border: none; 
    border-bottom: 2px solid black; 
    display: block; 
    width: 100%; 
} 

button { 
    border: none; 
    background-color: white; 
    padding: 15px; 
    border-radius: 7px; 
    font-weight: bold; 
    cursor: pointer; 
    display: block; 
    margin: auto; 
    margin-bottom: 20px; 
} 

button:hover { 
    font-size: medium; 
} 

.output-container { 
    display: none; 
    width: 60%; 
    margin: 10px auto; 
} 

.output { 
    background-color: white; 
    border: 2px solid white; 
    margin-bottom: 10px; 
} 

.heading { 
    padding: 20px 10px; 
    text-align: center; 
    color: white; 
    background-color: rgb(50, 50, 50); 
    text-transform: uppercase; 
} 

.heading h4 { 
    color: rgb(200, 200, 200); 
    padding-top: 9px; 
} 

.info { 
    display: flex; 
    padding: 20px; 
} 

.left { 
    width: 40%; 
    border-right: 2px dashed black; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-evenly; 
} 

.right { 
    width: 60%; 
    padding-left: 20px; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-evenly; 
} 

.box { 
    margin: 10px 0; 
    padding: 5px 10px; 
    height: auto; 
    overflow-wrap: break-word; 
} 

.box h2, 
.box p { 
    margin-bottom: 5px; 
} 

.tip { 
    font-size: small; 
    color: gray; 
    text-align: center; 
} 

.credit { 
    text-align: center; 
    font-weight: bold; 
    padding: 10px 3px; 
    color: rgb(80, 80, 80); 
} 

a { 
    color: black; 
} 

a:hover { 
    color: rgb(247, 28, 12); 
    font-weight: bold; 
} 

/* media queries begin */
@media screen and (max-width: 920px) { 
    .container { 
        width: 100%; 
    } 

    .output-container { 
        width: 87%; 
    } 
} 

@media screen and (max-width: 600px) { 
    .resume-builder { 
        padding: 10px 30px; 
    } 

    h1 { 
        font-size: 160%; 
    } 

    .info { 
        flex-direction: column; 
    } 

    .left { 
        border-right: none; 
        width: 100%; 
    } 

    .right { 
        padding-left: 0; 
        width: 100%; 
    } 
}