html {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
    font-family: "Montserrat", sans-serif;
}

body {
    margin: 0rem;
}

:root {
    --black: #161616;
    --white: #ececec;
    --yellow: #ba9207;
}

.shellan-black {
    background: var(--black);
    color: var(--white);
}

#index-title {
    text-align: center;
    padding: 2rem;
}

.main-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 12rem 15rem;
    gap: 1rem;
    padding: 2rem 10rem 2rem 10rem;
}

.sub-grid-container {
    display: grid;
    grid-template-columns: 1;
    grid-template-rows: 1;
    height: 100%;
}

.sub-grid-container > button {
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
    border: none;
    padding: 1rem;
    transition: font-size 3s, color 2s, background-color 3s, pointer-events 3s;
}

.part-title {
    text-decoration: underline;
}

figure > img {
    vertical-align: middle;
    transition: scale 3s;
}

figure > img:hover {
    outline: 2px solid var(--yellow);
    scale: 1.1;
}

figcaption {
    border: 2px solid var(--black);
    padding: 0.75rem;
}

a {
    text-decoration: none;
    color: var(--black);
}

.sub-grid-container > .active {
    background: none;
    color: var(--yellow);
    font-size: 20px;
    color: rgba(186, 146, 7,0);
    pointer-events: none;
}

.sub-grid-container > .figures {
    grid-column: 1;
    grid-row: 1;
    z-index: 0;
}

.figure-grid-container-1 {
    display: grid;
    grid-template-columns: 1;
    grid-template-rows: 1;
}

.figure-grid-container-1-1 {
    display: grid;
    grid-template-columns: 1;
    grid-template-rows: repeat(2, 1fr);
}

.figure-grid-container-2-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.figure-grid-container-2-1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr 2fr;
}

.figure-grid-container-2-3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

.figure-2-cols {
    grid-column: span 2;
}

figure > img {
    width: 100%;
    cursor: pointer;
}

#starting-out {
    grid-column: 1/ span 2;
    grid-row: span 3;
}

#part-1 {
    grid-column: 3;
    grid-row: span 3;
}

#part-2 {
    grid-column: 1/ span 2;
    grid-row: span 3;
}

#part-3 {
    grid-column: 3;
}

#part-4 {
    grid-column: 3;
    grid-row: span 2;
}

#part-5 {
    grid-column: 1/ span 3;
    grid-row: span 3;
}

#part-6 {
    grid-column: 1/ span 2;
    grid-row: span 3;
}

#part-7 {
    grid-column: 3;
    grid-row: span 2;
}

#part-8 {
    grid-column: 3;
}

@media only screen and (orientation: landscape) {
    a {
        pointer-events: none;
    }

    .main-grid-container {
        padding: 1rem;
    }
}

@media only screen and (max-width: 900px) {
    a {
        pointer-events: none;
    }
    
    .main-grid-container {
        grid-template-areas: 
            "starting-out starting-out part-1"
            "starting-out starting-out part-1"
            "starting-out starting-out part-1"
            "part-2 part-2 part-3"
            "part-2 part-2 part-4"
            "part-2 part-2 part-4"
            "part-5 part-5 part-5"
            "part-5 part-5 part-5"
            "part-5 part-5 part-5"
            "part-6 part-6 part-7"
            "part-6 part-6 part-7"
            "part-6 part-6 part-8";
        padding: 1rem;
    }

    #starting-out {
        grid-area: starting-out;
    }
    
    #part-1 {
        grid-area: part-1;
    }
    
    #part-2 {
        grid-area: part-2;
    }
    
    #part-3 {
        grid-area: part-3;
    }
    
    #part-4 {
        grid-area: part-4;
    }
    
    #part-5 {
        grid-area: part-5;
    }
    
    #part-6 {
        grid-area: part-6;
    }
    
    #part-7 {
        grid-area: part-7;
    }
    
    #part-8 {
        grid-area: part-8;
    }
}

@media only screen and (max-width: 600px) {
    .main-grid-container {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "starting-out"
            "starting-out"
            "starting-out"
            "starting-out"
            "part-1"
            "part-1"
            "part-2"
            "part-2"
            "part-2"
            "part-3"
            "part-4"
            "part-4"
            "part-5"
            "part-5"
            "part-5"
            "part-5"
            "part-5"
            "part-5"
            "part-6"
            "part-6"
            "part-6"
            "part-7"
            "part-7"
            "part-8";
            justify-content: center;
    }

    div[class^="figure-grid"] {
        grid-template-columns: 1fr;
      }
}