/** Fonts **/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz@8..144&display=swap');

body {
  background-color: rgb(236, 236, 236);


  margin: 0px;

  width: auto;


  overflow-x: hidden;
  overflow-y: scroll;


  display: flex;
  flex-wrap: nowrap;
}

a, a:hover, a:focus, a:active {
    text-decoration: none;
    color: inherit;
}

.body-container{
  width: 100%;
  display: flex;
  justify-content: center;
}

.body-content {
  padding: 10px 20px;
  width: 100%;
  max-width: 1500px;


  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.taskbar {
  width: 100%;
  min-height: 80px;

  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;

}

.icons-box {
  width: 22%;
  max-width: 225px;
  height: 100%;

  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.icon-twos {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 50%;
  justify-content: space-around;
  align-items: center;
}

.icon {
  padding: 2px;

  max-width: 30px;
  max-height: 30px;

  transition: transform .2s;

  display: block;

}

.icon:hover {
  transform: scale(1.3);
}

.menu-box {
  min-width: 35%;
  max-width: 75%;
  height: 100%;

  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.menu-button {
  background-color: rgb(199, 197, 197);

  width: 25%;
  min-width: 70px;
  height: 60%;
  margin: 0px 2px 0px 2px;

  border-radius: 25px;
  border: 2px solid rgb(92, 92, 92);

  display: flex;
  justify-content: center;
  align-items: center;

  transition: transform .2s;

}

.menu-button:hover {
  transform: scale(1.1);

  background-color: rgb(255, 190, 248);
  border: 2px solid rgb(232, 166, 225);
}

.menu-button-text{
  font-family: 'Roboto Flex', sans-serif;
  font-size: min(4vw,95%);;
}

.footer {

  min-height: 70px;
  height: auto;
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

}

.footer-container{

  height: 60%;
  width: 80%;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
}

.email-footer{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50%;
}

.footer-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50%;
  display: flex;
  padding: 0px 5px;
}

.website-footer{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50%;
}

.foot-text{
  display: flex;
  justify-content:center;
  align-items: center;
  flex-direction: row;

  text-align: center;

  font-family: 'Roboto Flex', sans-serif;
  font-size: 10px;
  color: rgb(92, 92, 92);
}

.ghimage {
  padding: 0px 5px;

  width: 17px;
  height: 17px;

  transition: transform .2s;

  display: block;
}

.ghimage:hover {
  transform: scale(1.4);
}