*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a{
    color:red;
}
h1 {
    color: red;
}

/* Specific styling for the #well id */
#well {
    color: red;
    font-size: 2rem; /* Responsive font size */
}

/* Styling the container with id #wel */
#wel {
    background-color: greenyellow;
    padding: 20px;
    text-align: center;
    height: auto;
    width: 80%;
    margin: 0 auto;
    border-radius: 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #wel {
        width: 90%; /* Slightly narrower width on smaller screens */
    }

    #well {
        font-size: 1.5rem; /* Slightly smaller font size */
    }
}

@media (max-width: 480px) {
    #wel {
        width: 95%; /* Maximum width for small screens */
        padding: 10px; /* Reduce padding */
    }

    #well {
        font-size: 1.2rem; /* Smaller font size for mobile screens */
    }
}

/* for content */
/* Basic reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

/* Content container styling */
#content {
    background-color: yellowgreen;
    text-align: left; /* Change to left-align for better readability */
    height: auto; /* Let the height be determined by content */
    max-height: 80vh; /* Prevent overflow by setting a max height */
    width: 80%;
    margin: 0 auto;
    overflow-y: auto;
    border: 7px double red;
    border-radius: 20px; /* Simplified for better responsiveness */
    padding: 20px; /* Add padding for better spacing */
}

/* Responsive typography */
h1 {
    font-size: 2rem;
    margin-bottom: 20px;
}

h3 {
    font-size: 1.2rem;
    line-height: 1.5;
}

li {
    list-style-type: none;
    margin: 10px 0;
}

a {
    text-decoration: none;
    color: blue;
}

/* Media queries for responsiveness */
@media (max-width: 768px) {
    #content {
        width: 90%;
        padding: 15px;
    }

    h1 {
        font-size: 1.8rem;
    }

    h3 {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    #content {
        width: 95%;
        padding: 10px;
    }

    h1 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 0.9rem;
    }

    li {
        margin: 8px 0;
    }
}


main{
background-color: black;

}

#intro{
    background-color: transparent;
    color: greenyellow;
    text-align: center;
    height: 70vh;
    width: 80%;
    margin: 0% auto;
    overflow-y: auto;
    border: 7px double darkred;

    
}
#whereto{
    background-color: transparent;
    color: greenyellow;

    text-align: center;
    height: 80vh;
    width: 80%;
    margin: 0% auto;
    border: 7px double darkred;

    overflow-y: scroll;
}

#output{
    background-color: transparent;
    color: greenyellow;
    text-align: center;
    height: 80vh;
    width: 80%;
    margin: 0% auto;
    overflow-y: auto;
    border: 7px double darkred; 
}
#JavaScripSyntax{
    background-color: transparent;
    color: greenyellow;
    text-align: center;
    height: 80vh;
    width: 80%;
    margin: 0% auto;
    overflow-y: auto;
    border: 7px double darkred; 
}
#javascriptcoment{
    background-color: transparent;
    color: greenyellow;
    text-align: center;
    height: 80vh;
    width: 80%;
    margin: 0% auto;
    overflow-y: auto;
    border: 7px double darkred;
}
#javascriptVariable{
    background-color: transparent;
    color: greenyellow;
    text-align: center;
    height: 80vh;
    width: 80%;
    margin: 0% auto;
    overflow-y: auto;
    border: 7px double darkred;
}


#operators{
    background-color: transparent;
    color: greenyellow;
    text-align: center;
    height: 80vh;
    width: 80%;
    margin: 0% auto;
    overflow-y: auto;
    border: 7px double darkred;  
}
#arithmetic{
    background-color: transparent;
    color: greenyellow;
    text-align: center;
    height: 80vh;
    width: 80%;
    margin: 0% auto;
    overflow-y: auto;
    border: 7px double darkred;  
}

#Assignment{
    background-color: transparent;
    color: greenyellow;
    text-align: center;
    height: 80vh;
    width: 80%;
    margin: 0% auto;
    overflow-y: auto;
    border: 7px double darkred;  
}
#jhuhgd{
    background-color: transparent;
    color: greenyellow;
    text-align: center;
    height: 80vh;
    width: 80%;
    margin: 0% auto;
    overflow-y: auto;
    border: 7px double darkred;  
}
#jhuhgd{
    background-color: transparent;
    color: greenyellow;
    text-align: center;
    height: 80vh;
    width: 80%;
    margin: 0% auto;
    overflow-y: auto;
    border: 7px double darkred;  
}
#jhuhgd{
    background-color: transparent;
    color: greenyellow;
    text-align: center;
    height: 80vh;
    width: 80%;
    margin: 0% auto;
    overflow-y: auto;
    border: 7px double darkred;  
}