.darkTheme{
    background-color: #222;
    max-width: 100%;
    max-height: 100%;
    margin-top: 100px;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

.darkTheme #themeToggleButton{
    padding:0.5em 1em;
    border-radius: 10px;
}

.darkTheme #themeToggleButton:hover{
    cursor: pointer;
}

.darkTheme nav{
    background-color: #333;
    border-bottom: 2px solid grey;
}

.darkTheme nav a{
    color: black;
    text-decoration: none;
}

.darkTheme nav a.active{
    color: white;
    font-weight: bold;
}


.darkTheme nav a:hover{
    color: white;
    cursor: pointer;
    position: relative;
    bottom: 5px;
    opacity: 50%;
}

.darkTheme nav a:visited{
    text-decoration: none;
}

.darkTheme nav a:visited:hover{
    color: white;
    transition: 0.3s;
}

.darkTheme h1 {
    text-align: center;
    color: white;
}

.darkTheme h1:hover{
    color: grey;
    transition: 0.5s;
}

.darkTheme #themeToggleButton{
    background-color: darkslategrey;
    border: 1px solid black;
    color: white;
}

.darkTheme #themeToggleButton:hover{
    background-color: grey;
    border: 1px solid black;
    color: black;
}

.darkTheme .introInformation{
    background-color: darkslategrey;
    border: 2px solid black;
    border-radius: 10px;
}

.darkTheme .gmailBtn{
    background-color: darkslategrey;
    border: 1px solid black;
    color: white;
    transition: 0.3s;
}

.darkTheme .gmailBtn:hover{
    background-color: grey;
    border: 1px solid black;
}

.darkTheme .whatsappBtn{
    background-color: darkslategrey;
    border: 1px solid black;
    color: white;
}

.darkTheme .whatsappBtn:hover{
    background-color: grey;
}


.darkTheme .linkedinBtn{
    background-color: darkslategrey;
    border: 1px solid black;
    color: white;
}


.darkTheme .linkedinBtn:hover{
    background-color: grey;   
}

.darkTheme .gitHubBtn{
    background-color: darkslategrey;
    border: 1px solid black;
    color: white;
}

.darkTheme .gitHubBtn:hover{
    background-color: grey;
    border: 1px solid black;
    transition: 0.3s;
}

.darkTheme .skillsBox{
    background-color: #333;
    border: 2px solid black;
}

.darkTheme .skillsBox div{
    background-color: darkslategrey;
    border: 2px solid black;
    color: whitesmoke;
}

.darkTheme .skillsBox div:hover{
    background-color: grey;
    color: black;
}

.darkTheme .summary{
    background-color: darkslategrey;
    border: 2px solid black;
}

.darkTheme #aboutLink{
    color: white;
    text-decoration: underline;
}

.darkTheme #aboutLink:hover{
    color: grey;
    transition: 0.3s;
}

.darkTheme .introAbout{
    background-color: grey;
    border: 2px solid black;
}


.darkTheme .skill-set{
    background-color: lightslategray;
    border: 2px solid black;
}


/* Projects Page */

.darkTheme .introProjects{
    background-color: darkslategray;
}

.darkTheme .project-group-title{
    color: white;
}

.darkTheme .project-group{
    background-color: #333;
}

.darkTheme .project-set{
    background-color: darkslategray;
    border: 2px solid black;
}

.darkTheme .project-set:hover{
    background-color: lightslategrey;
}


/* Contact Page */


.darkTheme .main-page-contact{
    background-color: darkslategrey;
}


.darkTheme .contact-options{
    background-color: lightslategrey;
}


.darkTheme .gibberish{
    background-color: lightslategray;
}


.darkTheme .loading-screen{
    border: 2px solid lightseagreen;
}

.darkTheme .laoding-bar{
    background-color: grey;
}