@font-face {
    font-family: Roboto-Slab;
    src: url(../fonts/RobotoSlab-VariableFont_wght.ttf);
}
@font-face {
    font-family: Tech-Body;
    src: url(../fonts/ShareTechMono-Regular.ttf);
}
/* Default Colour Palette */
:root{
    --main-bg-colour: black;
    --text-colour: white;
    --text-hover-colour: rgba(255, 255, 255, 0.5);
    --tiles-bg-colour: rgb(39, 39, 39);
    --low-opacity-bg: rgb(39, 39, 39, 0.7);
    --tiles-border-colour: rgb(88, 88, 88);
    --bg-transition: background-color  1s, color 1s linear;
    --border-transition: border-color  1s, color 1s linear;
    --text-hover-transition: color 0.3s ease-out;
}
/* Light Colour Palette */
[data-theme = "light"] {
    --main-bg-colour: white;
    --text-colour: black;
    --text-hover-colour: rgba(0, 0, 0, 0.5);
    --tiles-bg-colour: rgb(216, 216, 216);
    --tiles-border-colour: rgb(167, 167, 167);
}
p, h1, h2, h3, a, button {
  color: var(--text-colour);
  transition: var(--bg-transition), var(--border-transition);
}
#mainTitle{
    font-family: Roboto-Slab, Georgia, serif;
    font-size: 35px;
    grid-area: 1 / 4 / 2 / 8;
    text-align: center;
    margin-top: 7.5%;
}
html{
    scroll-behavior: smooth;
}
html, body{
    margin: 0;
    padding: 0;
}
body{
    min-height: 100vh;
    min-width: 100vw;

    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(20, 180px);
    grid-auto-rows: 200px;
    grid-column-gap: 0px;
    grid-row-gap: 0px;

    background-color: var(--main-bg-colour);
    color: var(--text-colour);
    transition: var(--bg-transition), var(--border-transition);


}


/* Light/Dark Mode */
#lightDark{
    position: absolute;
    margin: 0;
    padding: 0;
    top: 30px;
    right: 10px;
    border-color: var(--tiles-border-colour);
    border-width: 2px;
    border-radius: 10px;
    border-style:solid;
    width: 80px;
    display: flex;
    margin: 0;
    padding: 0;
    justify-content: space-between;
    grid-area: 1 / 9 / 2 / 10;
    transition: var(--bg-transition), var(--border-transition);
}
.lightDark{
    scale: 1;
    width: 30px;
    height: 30px;
}
#moonIcon{
    fill: black;
}
#sunIcon{
    fill: white;
}

/* Panels */
.panel{
    background-color: var(--tiles-bg-colour);
    transition: var(--bg-transition), var(--border-transition);
    border-color: var(--tiles-border-colour);
    border-radius: 1px;
    border-style: solid;
    border-radius: 10px;
    scroll-margin-top: 50px;
}
.panelHeader{
    font-family: Roboto-Slab;
    font-weight: bold;
    align-self: center;
    font-size: 170%;
    padding-bottom: 0;
}
.panelBody{
    font-family: Tech-Body;
    font-size: 120%;
    padding-top: 0;
}


/* Nav Panel */
#navPanel{
    grid-area: 2 / 1 / 5 / 2;
    margin-left: 10px;
    position: sticky;
    top: 20%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: 0;

}
#navPanel > a{
    font-size: 1em;
    font-family: Tech-Body;
    text-decoration: none;
}
#navPanel > a:hover{
    color: var(--text-hover-colour);
    text-decoration: underline;
    transition: var(--text-hover-transition);
}

/* Introduction Panel */
#introductionPanel{
    text-align: center;
    grid-area: 3 / 4 / 5 / 8;
    padding: 2%;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

/* Project Panel */
#projectPanel{
    text-align: center;
    grid-area: 7 / 3 / 11 / 9;
    padding: 2%;
    display: grid;

    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 1fr 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
.projectShow{
    margin: 2%;
    border-radius: 10px;
    font-family: Roboto-Slab, Georgia, serif;
    background-color: var(--tiles-border-colour);
}
.projectShow:hover{
    transform: scale(1.2);
    transition: transform 0.3s ease;
}
.projectShow *{
    pointer-events: none;
}

/* Experience Panel */
#experiencePanel{
    text-align: center;
    grid-area: 13 / 3 / 17 / 9;
    padding: 2%;
    background-color: transparent;
    display: grid;
    grid-template-rows: 10% 30% 30% 30%;
}
.experienceDetails{
    margin: 2%;
    display: grid;
    grid-template-rows: 25% 1fr;
    font-size: 90%;
    padding: 0px;
    overflow: auto;
}

/* About Me Panel */
#aboutMePanel{
    text-align: center;
    grid-area: 19 / 4 / 21 / 8;
    padding: 2%;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

/* Contact Details Panel */
#contactPanel{
    text-align: center;
    grid-area: 23 / 4 / 25 / 8;
    padding: 2%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    overflow: scroll;
    margin-bottom: 5%;
}

#contactPanel > a{
    text-decoration: none;
}

#contactPanel > a:hover{
    color: var(--text-hover-colour);
    text-decoration: underline;
    transition: var(--text-hover-transition);
}

/* Modals */

.modalContainer{
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--low-opacity-bg);
}

.modalContent{
    background-color: var(--tiles-bg-colour);
    width: 70%;
    height: 70%;
    margin-top: 15vh;
    margin-left: 15vw;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: auto;
}

.modalTitle{
    font-family: Roboto-Slab, Georgia, serif;
    font-size: 2em;
    padding: 5%;
    
}

.modalBody{
    font-family: Tech-Body, Georgia, serif;
    font-size: 1.25em;
}

.modalTileTitle{
    font-family: Roboto-Slab, Georgia, serif;
    font-size: 1.3em;

}

#modalTab1{
    display: flex;
    grid-area: 2/1/2/1;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
}


#copyright{
     grid-area: 26 / 1 / 26 / 12;
     margin-top: 8vw;
     font-family: 'Times New Roman', Times, serif;
     font-size: 1.25em;
     background-color: var(--main-bg-colour);
     padding-top:  0.75%;
     display: flex;
     align-items: center;
     justify-content: center;
}

@media (max-width: 700px){
    #navPanel{
        display: none;
    }
    #aboutMePanel{
        grid-area: 16 / 3 / 18 / 9;
    }
    #contactPanel{
        grid-area: 19 / 3 / 21 / 9;
    }
    #introductionPanel{
        grid-area: 3 / 3 / 5 / 9;
    }
    #projectPanel{
        grid-area: 6 / 2 / 10 / 10;
    }
    #experiencePanel{
        grid-area: 11 / 3 / 15 / 9;
    }
    #copyright{
        grid-area: 22 /1 / 22 / 12;
        margin-top: 20vw;
    }
}