@import url('main.css');
@import url('https://fonts.googleapis.com/css?family=Syncopate:700');

body{
  margin: 1em 2em;
}


.action-buttons a{
  display: inline-block;
  font-size: 1.2em;
  background: linear-gradient(#303337, #2b2e31);
  padding: 7px;
  margin: 7px;
  border-radius: 3px;
  text-decoration: none;
}


#workspace-accesses-editor{
  display: none;
}

.workspace-access{
  width: 40em;
}

.workspace-tool-link{
  color: #888888;
}

#code-search{
  display: none;
}



#home h1{
  font-size: 4em;
  text-align: center;
  letter-spacing: 0.6em;
  margin-right: -0.6em; /* letter-spacing compensation for centering */
  font-weight: normal;
}

#home h2{
  font-size: 2.2em;
  text-align: center;
  letter-spacing: 0.15em;
  margin-right: -0.15em; /* letter-spacing compensation for centering */
  margin-top: 2em;
}

#home h3{
  font-size: 1.4em;
  text-align: center;
  letter-spacing: 0.4em;
  margin-right: -0.4em; /* letter-spacing compensation for centering */
}

#home .welcome{
  position: relative;
  top: -1em;
  animation: appear 2s ease-in-out;
}

.workspaces-list{
  margin-bottom: 4em;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 25px;
}


.workspaces-list .workspace{
  text-decoration: none;
  margin:  5px;
  padding: 5px;
  background: #1e283b;
  border-radius: 60px 10px 10px 60px;
  color: white;
  min-width: 250px;
  padding-right: 1.5em;
}

.see-more-workspaces{
  color: white;
  font-size: 1.5em;
  margin-top: 35px;
  padding: 10px 0;
  cursor: pointer;
  transition-property: transform;
  transition-duration: 0.3s;
  transform-origin: left;
}

.see-more-workspaces:hover{
  transform: scale(1.2);
}

.workspaces-list .workspace.hidden{
  display: none;
}

.workspaces-list .workspace .image{
  display: flex;
  float: left;
  border-radius: 50%;
  width:  100px;
  height: 100px;
  background-size: 102px 102px;
  background-position: center;
  margin:  6px;
  margin-right: 2em;
  outline: 2px solid #CCCCCC;
  outline-offset: 4px;
}

.workspaces-list .workspace .title{
  display: flex;
  font-family: Syncopate, sans-serif;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.workspaces-list .workspace .date{
  font-size: 0.7em;
  color: #a0a8b7;
}

.workspaces-list .workspace:hover{
  box-shadow: 0 0 4px #FFFFFF;
}

.workspaces-list .workspace:hover .image{
  outline: 2px solid #FFFFFF;
  outline-offset: 6px;
}