html {
  margin-left: 10%;
  margin-right: 10%;
  background-color: #f0f0f0;
}

h{
  font-size: 180%;
}

h1{
  font-size: 120%;
}


.logo-div{
  background-color: lightgrey;
}

.logo-img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
  background-color: white;
}


#about-me{
width: 84%;
}

#profile-pic{
  width: 47%;
  float: left;
  padding-right: 3%;
}


.page-links{
    display: flex;
    justify-content: space-around;
    font-size: 150%;
    text-align: center;    
  a{
    border: dashed;
    color: blue;
    text-decoration: none;
  }
}

.contents-left{
  margin-right: 50%;
}

.buttons{
}

.bloglink{
  color: black;
  text-decoration: none;
  width: 50%;
  clear: right;
  a{
    color: blue;
    text-decoration: none;
  }
}

.bloglink-content{
  border: solid;
  overflow: hidden;
}

.bloglink-content:hover{
  background-color: #e3e3e3;
}

.bloglink-text{
  width: 48%;
  float: right;
}

blog-text {
  clear: right;
}
.thumbnail{
  width: 50%;
}

#project-list{
  position: relative;
  left: 4%;
}

.project-thumbnail{
  width: 100%;
}

.img-L {
  float: right;
  width: 50%;
  padding: 2%;
}

.img-M {
  width: 25%;
  padding: 2%;
}

.projectlink{
  color: black;
  text-decoration: none;
  width: 18%;
  display: inline-block;
  padding-bottom: 4%;
  a{
    color: blue;
    text-decoration: none;
    display: contents;
  }
}

.projectlink-content{
  border: solid;
  overflow: hidden;
  width: 84%;
}
.projectlink-content:hover{
  background-color: #e3e3e3;
}

#sidebar-icons{
  position: fixed;
  left: 1%;
  top: 2%;
  width: 10%;
  display: grid;
}

.icon{
  width: 30%;
  cursor: pointer;
}

.icon:hover{
  filter: contrast(75%);
}

.projectlink-text{
    font-size: 90%;
    text-align: center;    
    padding: 5%;
    h1{
      font-size: 140%;
    }
}


#copy-link-tooltip{
  visibility: hidden;
}

project-text {
  clear: right;
  float: right;
}


@media only screen and (hover: none) and (pointer: coarse){
  html {
    font-size: 100%;
  }

  h{
    font-size: 240%;
  }


  .tagline{
    visibility: hidden;
  }

  .logo-img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    background-color: white;
  }

  .page-links{
    left: 1%;
    display: flex;
    justify-content: space-around;
    font-size: 400%;
    line-height: 150%;
  }


  .contents-left{
    font-size: 110%;
    margin-right: 0%;
  }

  .references{
    white-space: nowrap;
    overflow: scroll;
    font-size: 300%;

  }

.bloglink{
  color: black;
  text-decoration: none;
  width: 100%;
  clear: right;
  font-size: 300%;
  a{
    color: blue;
    text-decoration: none;
  }
}

.bloglink-content{
  font-size: 50%;
  overflow: scroll;
  border: solid;
}

.bloglink-content:hover{
  background-color: white;
}


.bloglink-text{
  font-size: 200%;
  width: 48%;
  float: right;
  
}

.thumbnail{
  width: 50%;
}

.projectlink{
  color: black;
  text-decoration: none;
  width: 40%;
  display: inline-block;
  padding-bottom: 4%;
  a{
    color: blue;
    text-decoration: none;
    display: contents;
  }
}


.projectlink-content{
  border: solid;
  overflow: hidden;
  width: 95%;
}

.projectlink-content:hover{
  background-color: white;
}

.projectlink-text{
    font-size: 180%;
    text-align: center;    
    padding: 1%;
    h1{
      font-size: 140%;
    }
}


.img-L {
  width: 100%;
  padding: 2%;
}

.img-M {
  width: 100%;
  padding: 2%;
}

#project-list{
  position: relative;
  left: 10%;
}


.icon{
  width: 60%;
  cursor: pointer;
}

#sidebar-icons{
  top: unset;
  bottom: 1%;
  width: 13%;
}

#dark-mode{
  display: none;
  order: 1;
}

}