* {
    box-sizing: border-box;
}
:root {
    font-size: 100%;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    --main-bg-color: #0080cb;
    --main-sec-color: #c1c1c1;
}

/* ------------ TRYOUT LIGHTBOX ------------------*/

#mainContent img.lightbox {
    cursor: pointer;
}

#mainContent img.lightbox::before {
    content: "<input type="checkbox>";
    width: 30px;
    height: 30px;

}

#mainContent img.lightbox:hover {
   
}


h1,h2,h3,h4,h5,h6 {
    font-weight: 200;
}

h2 span {
    font-weight: 400;
}

.red {
    font-size: 150%;
    color: red;
}

.hidden {
    display: none !important; 
}


#mainHeader {
    position: relative;
  
}

#mainHeader section {
    min-height: 120px;
    background-color: var(--main-bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

#mainHeader section a {
    max-width: 400px;
    height: 150px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

#mainHeader section img {
    display: block;
    width: 90%;
    height: auto;
}

#mainHeader h1 {
    font-size: 1.5rem;
    color: var(--main-bg-color);
    text-align: center; 
    margin-bottom: 2rem;
}

#mainHeader h1 span {
    font-style: italic;
}

#mainContent {
    max-width: 85%;
    margin: 4rem 7.5%;
}

#mainContent .breadCrumbs ul {
    list-style-type: none;
    display: flex;
    padding: 0.5rem 0;
    background-color: white;
}

.breadCrumbs li {
    margin: 0 0.5rem;
}

.breadCrumbs li::after {
    content: "|";
    padding-left: 1rem;
}



#mainContent nav ul, #mainContent article {
    list-style-type: none;
    padding: 0;
    background-color: #f5f5f5;
    border-radius: 16px;
}

#mainContent nav li {
    text-align: center;
}

#mainContent nav img {
    max-width: 136px;
    box-shadow: 4px 4px 4px rgb(0 0 0 / 25%);
    border-radius: 18px;
    margin: 1rem auto;
}

#mainContent nav img[src$=".svg"]{
    border-radius: 10px;
    box-shadow: none;
}

#mainContent .subList {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

#mainContent .subList li:first-of-type, #mainContent h2 {
    background-color: var(--main-bg-color);
    color: white;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    line-height: 2rem;
    text-align: left;
}

#mainContent h2 {
    padding: 1rem;
    margin: 0;
}

#mainContent nav a {
    font-size: 1.25rem;
    font-weight: 200;
    text-decoration: none;
    color: black;

}
#mainContent nav a img {
       transition: all 400ms;
}

#mainContent nav a:hover img {
    max-width: 120px;
    width: 120px;
}

#mainContent .card {
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 2rem;
    gap: 2rem;
}

#mainContent p {
    line-height: 1.5rem;
    padding: 1rem;
    margin: 0;
}

#mainContent .card img {
    display: block;
    max-width: 90%;
    margin: 0 5%;
}

#mainContent .card a {
    font-weight: 700;
    color: var(--main-bg-color);
}

#mainContent .intro figure {
        text-align: center;
}

#mainContent .intro img {
   margin: 1rem auto;
}

#mainContent .intro .controller {
    max-width: 120px;
}

#mainContent li {
    line-height: 1.5rem;
}

#mainContent .exercise li::marker {
    color: var(--main-bg-color);
    font-weight: 600;
}
#mainContent .exercise li {
    margin: 1rem;
}

#mainContent .exercise li img {
    margin: 2rem auto;
}

.theEnd {
    font-size: 6rem;
    text-align: center;
    vertical-align: top;
}

.connectController {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.connectController .controller {
    transform: rotate(-90deg);
    width: 100px;
}

.connectController .cable {
    height: 40px;
}

#mainContent .exercise .connectController img {
    margin: 1rem;
}

.UIbutton {
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    background-color: purple;
    border-radius: 100%;
    background-image: url("../images/extras/1x/ui-editor-start.png");
    background-repeat: no-repeat;
    background-position: top -4px right -15px;
}

.unitList, .hatList {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
    list-style-type: none;
    padding: 0;
}

.unitList li, .hatList li {
    max-width: 75px;
    margin: 0 auto;
}

.unitList figure, .hatList figure {
    max-width: 75px;
    text-align: center;
    margin: 0;
}

article:has(> .unitList), article:has(> .hatList) {
    margin-bottom: 2rem;
} 

.unit {
    max-width: 100%;
}

.exercise .hubs img {
    height: 200px;
    width: auto;
}

.exercise .level3 {
    color: black;
    padding: 0;
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    text-align: center;
}

#mainContent .card .level3 li a {
    color: #000;
    font-weight: 200;
    text-decoration: none;
    font-size: 1.25rem;
}

.exercise .level3 img {
    display: block;
    height: 150px;
}

#mainContent img.exercise-intro {
 width: 250px;
 height: auto;
 margin: 0 auto;
}

.level3-controllers {
    display: flex;
    margin: 1rem auto;
    align-items: center;
}

.level3-controllers img{
    height: 65px;
}

.link {
    text-decoration: none;
    color: black;
}


@media only screen and (min-width: 580px) {        /****************  MQ > 580 **************/

#mainContent nav img {
    max-width: 120px;
}

#mainContent .exercise img.small {
    max-width: 75%;
}

.exercise .hubs {
    display: flex;
}



.level3-controllers img{
    height: 100px;
}



}


@media only screen and (min-width: 1140px) {       /****************  MQ > 1140 **************/

#mainHeader h1 {
    position: absolute; 
    top: 30px;
    right: 20px;   
    font-size: 1.5rem;
    color: white;
    text-align: right; 
}

 #mainContent {
    max-width: 1040px;
    margin: 4rem auto;
}

#mainContent .subList, #mainContent .card  {
    grid-template-columns: repeat(2, 1fr);
}

#mainContent h2, #mainContent .exercise ol, #mainContent .exercise ul, #mainContent .exercise img {
    grid-column: 1 / span 2;
}

#mainContent nav {
    margin: 0 auto;
}

#mainContent .subList {
    grid-template-columns: repeat(3, 1fr);
}

#mainContent nav img {
    max-width: 100px;
}


#mainContent .subList li:first-of-type {
    grid-column-start: 1;
    grid-column-end: 4;
 
}

#mainContent .exercise img.small {
    max-width: 50%;
}

.unitList {
 grid-template-columns: repeat(4, 1fr);
}

.hatList {
    grid-template-columns: repeat(3, 1fr);
}

.hatList li, .hatList figure {
    min-width: 150px;
}

#mainContent .unitList img[src$=".svg"] {
    border-radius: 0;
}

.exercise .level3 {
    grid-template-columns: repeat(3, 1fr);
}

#mainContent .card .continue {
    grid-column: 1 / span 3;
}



}