/*
* Freesuite v1.0.0
* Copyright 2021, Steve Granshaw
* www.freesuite.net
*/

/* ––––– General Styles ––––– */

@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@200;500&display=swap');

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: 'Urbanist', sans-serif;
  color: rgba(33, 33, 33, 1);
}

#container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

/* ––––– Global Navigation ––––– */

nav {
  position: fixed;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.menu-button {
  display: flex;
  align-items: center;
  flex-direction: row;
  margin: 1.6rem;
  padding: 1rem 1.6rem 1rem 1.6rem;
  font-size: 1.6rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 4rem;
  color: rgba(255, 255, 255, 1);
  background-color: rgba(159, 159, 159, 1);
}

.menu-icon {
  width: 1.6rem;
  margin: 0 0.8rem 0 0;
}

/* ––––– Home Screen Header ––––– */

header {
  width: 100%;
  margin: 4.0rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#logo-header {
  width: 50%;
}

.strapline {
  margin: 1.2rem 0 0 0;
  font-size: 1.4rem;
  font-weight: 500;
  color:  rgba(152, 152, 152, 1);
}

/* Larger than phablet */
@media (min-width: 550px) {

  header {
    margin: 4.0rem 0 4.0rem;
  }

  #logo-header {
    width: 30%;
  }
  
  .strapline {
    margin: 1.4rem 0 0 0;
    font-size: 1.6rem;
  }
}

/* Larger than tablet */
@media (min-width: 750px) {

  header {
    margin: 4.8rem 0;
  }
  
  #logo-header {
    width: 30%;
  }
  
  .strapline {
    margin: 1.6rem 0 0 0;
    font-size: 1.8rem;
  }
}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* ––––– Home Screen Apps ––––– */

#app-row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
}

.icon-group {
  width: 33%;
  margin: 2.4rem 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.app-icon-link {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.app-icon {
  width: 70%;
}

.app-name {
  margin: 1.2rem 0;
  font-size: 1.4rem;
  font-weight: 500;
  text-decoration: none;
}

.app-name:link, .app-name:visited, .app-name:active {
  color: rgba(33, 33, 33, 1);
}

.app-name:hover {
  color: rgba(99, 99, 99, 1);
}

/* Larger than phablet */
@media (min-width: 550px) {
  
  .icon-group {
    width: 25%;
    margin: 3.2rem 0 0 0;
  }
  
  .app-icon {
    width: 60%;
  }
  
  .app-name {
    margin: 1.4rem 0;
    font-size: 1.6rem;
  }
}

/* Larger than tablet */
@media (min-width: 750px) {
  
  .icon-group {
    width: 20%;
  }
  
  .app-name {
    margin: 1.6rem 0;
  }
}

/* Larger than desktop */
@media (min-width: 1000px) {}