body {
    font-family: 'Titillium Web', sans-serif;
    width:85%;
    margin:auto; 
    background-color: white; 
    color:black;
}

.darkmode {
    background-color:rgb(17, 17, 17);
    color:rgb(219, 219, 219);
}

#header {
    display:flex;
    flex-direction: column;
    text-decoration: double;
}

#myname {
    text-align: center;
    padding:30px;
    padding-bottom:5px;
    font-size:1.8em;
    font-weight:300;
}

#locationline {
    text-align: center;
    padding:10px;
    font-size:1.3em;
    font-weight:200;
}

#socials {
    display:flex;
    justify-content: flex-end;
}

#navbar {
    display:flex;
    justify-content: space-evenly;
    align-items: center;
    border-top:solid;
    border-bottom:solid;
}

#aboutmecontainer {
    display:flex;
    border-bottom:solid;
    max-height:50vh;
}

#aboutmecontent {
    padding:2%;
    font-size: larger;
}

#aboutmephoto {
    padding:2%;

}

.mainContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    border-bottom: solid;
}

.sigils {
    width: 10vw;
    margin: 15;
    max-width: 200;
    max-height: 200;
}

.socialsimg {
    width: 50px;
    height: 50px;
    margin: 10px;
}

.navbarel {
    padding: 30px;
    color: black;
}

.navbarlink {
color:black;
font-size: larger;
font-weight: bolder;
}

.navbarlinkdark {
    color:rgb(219, 219, 219);
    font-size:larger;
    font-weight: bolder;
}

.titleline {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.indextitleline {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.activitydiv {
    width:30%;
    padding:1%;
}

.aboutimage {
    width:350; 
    height:400; 
    max-width:30vw; 
    max-height:30vh;
}

@media only screen and (max-width: 1500px) {
    .mainContainer {
      flex-direction: column;
    }
    .activitydiv {
        width:90%;
    }
    .indextitleline {
        align-items: flex-end;
    }
    .sigils {
        width: 12vw;
    }
    
  }

.mainlist{
    font-size:1.0em;
}

.minibutt:hover {
    cursor: pointer;
}

.minibutt {
padding:10px;
}

.minisdiv {
margin-top:10px;
}

.minisimg{
width:100%;
max-height:400px;
}

.darkbutton {
    cursor: pointer;
    background-color: white;
    padding-inline: 6px;
    border-width: 0px;
    border-style: none;
    border-image: none;
}

.darkdarkbutton {
    cursor: pointer;
    background-color: rgb(17, 17, 17) ;
    padding-inline: 6px;
    border-width: 0px;
    border-style: none;
    border-image: none;
}