/* Give to body design */
body {
    font-family: sans-serif;
    background-color: white;
    text-align: center;
    color: #445361;
}
/********** h1 ************/
h1 {
    text-align: center; /* Centering the heading */
    margin-bottom: 20px; /* Spacing between the h1 and the popup */
}

/**** Main band selection and calculation Area***/
.calculator-area {
    margin: auto;
    background-color: #faebd7;
    padding-top: 20px;
    padding-bottom: 20px;
}

/**************** Instruction Pop up window *********/
.popup {
    position: fixed;  /* Changed to 'fixed' to stay positioned relative to the viewport */
    top: 0;           /* Align the top edge of the popup at the top edge of the viewport */
    left: 0;          /* Align the left edge of the popup at the left edge of the viewport */
    right: 0;         /* Align the right edge of the popup at the right edge of the viewport */
    bottom: 0;        /* Align the bottom edge of the popup at the bottom edge of the viewport */
    margin: auto;     /* Automatically margin to center both vertically and horizontally */
    width: 50%;       /* Optional: Set the width of the popup */
    max-width: auto; /* Maintain a max-width for larger displays */
    height: 60%;     /* Height can be 60% based on content */
    border: 1px solid grey;
    background-color: burlywood;
    padding: 20px;
    box-shadow: 0px 0px 50px 1px rgba(0, 0, 0, 0.863);
    text-align: justify;
    z-index: 1000;    /* Ensure it is above other content */
} 

#popupTrigger{
    margin-bottom: 20px;
}

/*** Instruction pop-up ***/
.popup h2 {
    margin-top: 0;
    text-align: center;
}

.popup p {
    margin-bottom: 0;
}

#instructions {
    list-style-type: upper-roman;  
}

#close {
    position: absolute;
    top: 5px;
    right: 10px;
    cursor: pointer;
}

/******** Band select div styling ************/
.band-select {
    display: flex;/* Use flexbox to arrange items */
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Ensures elements wrap if they exceed the container width */
}

/*Add margin to each child element for spacing */
.band-select > div {
    margin: 15px; /* Adjust as needed */
}

/******* Style for the resistor image *******/
.resistor {
    display: flex;
    /* Use flexbox layout */
    justify-content: space-between;
    /* Distribute items evenly */
    width: 30%;
    /* Set width to 30% of the container */
    margin: 0 auto;
    /* Center the resistor horizontally */
    background-color: burlywood;
}
/********* Each band size of resistor colour*******/
.band {
    display: inline-block; /* Display the color bands inline */
    height: 100px; /* Set the height of each color band */
}

#band1, #band2, #band3, #band4 {
    width: 20px; /* Set the width of each color band */
    margin: 0 1px;
    /* Add margin between color bands */
    margin-right: 2px;
    /* Add margin between color bands */
    margin-left: 10px;
    /* Expand the fifth band to take up more space */
}
#band5 {
    width: 20px; /* Set the width of each color band */
    margin: 0 2px; /* Add margin between color bands */
    margin-left: 50px; /* Add larger margin after the third band */
}
#band6 {
    width: 20px; /* Set the width of each color band */
    margin: 0 2px; /* Add margin between color bands */
    margin-right: 20px; /* Add larger margin after the third band */
}

/*Resistor colour image to be used in JS for band colour selection*/
.band-black {
    background-color: black;
}
.band-brown {
    background-color: brown;
}
.band-red {
    background-color: red;
}
.band-orange {
    background-color: orange;
}
.band-yellow {
    background-color: yellow;
}
.band-green {
    background-color: green;
}
.band-blue {
    background-color: blue;
}
.band-violet {
    background-color: violet;
}
.band-grey {
    background-color: grey;
}
.band-white {
    background-color: white;
}
.band-gold {
    background-color: gold;
}
.band-silver {
    background-color: silver;
}

/*****************Local storage buttons*******************/
.controls {
    text-align: center;
    margin-top: 20px;
}

/****************** Footer ***************************************/
footer {
	background-color:white;
    margin-bottom: 0%;
}

footer>h3 {
	text-transform: uppercase;
	text-align: center;
	color:#445361;
}

footer>p {
	text-align: center;
	color:#445361;
	font-weight: bolder;
	font-size: 18px;
}



#social-networks {
	text-align: right;
	/*the footer social icons to be in the right*/
	padding: 10px;
	/*gives padding of the icons*/
	display: flex;
	/* places them side by side horizontally*/
	justify-content: center;
	/*place icons to center*/
	list-style-type: none;
}

/*Social - networks i elements. ***/
#social-networks i {
	font-size: 160%;
	padding: 5%;
	color:#445361;
	margin: 0 5px;
	/*space icons*/
}

/**********************Media query ***************/
/* Style for the resistor image */
/* Media query: tablets and lower (768px and down) */
@media screen and (max-width: 768px) {
    .resistor {
        display: flex;
        /* Use flexbox layout */
        justify-content: space-between;
        /* Distribute items evenly */
        width: 70%;
        /* Set width to 80% of the container */
        margin: 0 auto;
        /* Center the resistor horizontally */
        background-color: burlywood;
    }
}

/* Band-select div styling */
/* Media query: tablets and lower (768px and down) */
@media screen and (max-width: 810px) {
    /* Band select div styling */
    .band-select {
        flex-direction: column; /* Arrange items vertically */
        align-items: center; /* Align items vertically in the center */
        justify-content: space-between;/* Distribute items evenly with space between them */
        display: flex; /* Use flexbox to arrange items */
        padding: 5px;
        flex-wrap: wrap; /* Ensures elements wrap if they exceed the container width */
    }
    /*divs inside the band-select div*/
    .band-select > div {
        flex: 1; /* Each div will take up equal space */
        margin: 10px 0;/* Add margin between divs */
    }
}

/* Pop up window*/
/* Media query: tablets and lower (768px and down) */
@media screen and (max-width: 768px) {
    .popup {
        width: 95%;       /* Wider popup to utilize more screen space */
        padding: 10px;    /* Slightly reduced padding to save space */
        padding-top: 20px;
        max-height: 75vh; /* Max height to avoid taking over the entire screen */
        overflow-y: auto; /* Enable scrolling if content exceeds the height */
    }
}