/* MarMSX CSS file */

html {
  background: #000000;
  color: #ffffff;
}
p {
  font-size: 18px;
}
a {
  color: #FFFF00;
  text-decoration: none;
}
a:hover {
  color: #CCCC00;
}
div.hint {
  color: #aaa;
  font-size: 18px;
  padding: 5px;
}
div.news {
  font-size: 18px;
  padding: 20 0 0 20;
  height: 150px;
  text-align: left;
}
div.ntitcat {
  padding: 4px;
  font-weight: bold;
  text-align: center;
  font-size: 16px;
  border-bottom: 1px dashed #222222;
}
div.container {
  padding: 10 0 0 10;
  font-size: 16px;
  text-align: left;
}
phr1 {
  color: #AAAAAA;
  font-size: 24px;
  display: block;
  padding-bottom: 20px;
  text-align: center;
}
hh {
  color: #FFFFFF;
  font-size: 24px;
  border-bottom: 2px solid #777;
  text-align: left;
  text-shadow: 2px 2px #333; 
  padding: 5 5 5 10;
  display: block;
  background-image: url('hh_right.png');
  background-repeat: no-repeat;
  background-position: bottom right;
  margin-top: 10px
}
leg d {
  color: #FFFFFF;
  font-style: normal;
  display: block;
}

/* Main goals */
div.goals-container {
  width: 100%;
  height: 100px;
  display: flex;
  margin-bottom: 50px;
  text-align: right;
  padding: 2px;
  background-image: repeating-linear-gradient(45deg, rgb(0,30,40), rgb(0,10,10) .65%);
}
img.goals-img {
  width: 400px;
  height: 100px;
}
div.goals-tt {
  width: 100%;
  margin-left: 20px;
}
div.goals-title {
  color: #aaa;
  font-size: 32px;
}
div.goals-text {
  font-size: 24px;
  padding-top: 20px;
}

/* Project icons */
div.projects {
  margin-bottom: 50px;
}
div.projects-container {
  display: flex;
  flex-flow: row wrap;
  border: 1px dashed #333;
  padding: 5px;
  align-items: flex-start;
  background: repeating-linear-gradient(45deg, #000 3%, #050505 4%)
}
div.projects-header {
  font-weight: bold;
  color: #ccc;
  font-size: 19px;
  padding: 0 0 10px 5px;
}
div.project {
  width: 120px;
  margin: 20px 15px 0px 15px;
}
img.icons {
  width: 120px;
  height: 120px;
  border-radius: 8px;
}
img.icons:hover {
  transform: scale(1.1, 1.1);
}
div.project-description {
  color: #FFFF88;
  text-align: center;
  margin-top: 10px;
}

/* Misc */
#box {
  width: 100%;
  display: inline-block;
  margin-bottom: 20px;
}
#left {
  float: left;
  border: 1px dashed #222222;
  width: 33%;
  height: 140px;
}
#middle {
  float: left;
  border: 1px dashed #222222;
  width: 33%;
  height: 140px;
}
#right {
  float: left;
  border: 1px dashed #222222;
  width: 33%;
  height: 140px;
}