/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
   
/* || General setup */

html {
  margin: 0;
  padding: 5px;

  background-color: grey;
}

body {
  width: 70%;
  margin: 0 auto;
  background-color: #0D0E0C;
  padding: 3em;
  border: 1mm solid;
}

/* || typography */

body {
  color: white;
}

.title, .job_title {
  text-shadow: 2px 2px 5px red;
}

.navigation {
  text-transform: uppercase 
}

h1, h2, h3 {
  
   font-family: verdana;
}

input {
  
}

article p , article dt, article dd, article li, article h1, article h2, article h3 {
  color: white;
  font-family: Arial;
}

article h1, article h2, article h3 {
 padding: 2px; 
}

article dt {
 padding: 5px; 
}



/* typography */

/* Title */

.title {
  color:  #ff2222;
  /* padding: 10px; */
  text-align: center;
  font-weight: bold;
  border: 3px solid #ff2222; 
}

.job_title {
  padding: 0px;
  border: 0;
}

/* title */

/* index only */

.Welcome { /* welcome text at the index */
  text-align: center;
  color: grey;
  
}

.Entrance {
/* width: 70%; */
 margin: 0 auto;
}

.EnterButton {
 text-align: center;
}

.EnterButton a:link {
  color: white;
}

.EnterButton a:visited {
  color: white; 
}

.EnterButton a:Hover {

}


/* index only* /


/* links */

a:link { 
 color: #00FFFF; 
}

a:visited {
 color: #00FFFF;
}

a:hover {
 color: pink;
 text-decoration: none; /* remove underline while hovering */
}

/* links*/

/* Contact Box */

.ContactBox {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  box-sizing: border-box;
}

.ContactBox input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

.ContactBox input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.ContactBox input[type=submit]:hover {
  background-color: #45a049;
}

.ContactBox label {
 padding: 5px; 
}

/* Contact box */

/* Home */

.MainWrapper {
  display: flex;
  gap: 10px;
}

.MainText {

}

.News {
 flex: 20%;
 border-style: dotted;
 background-color: #282828;
}

.News h2, h3 {
  text-align: center;
}

.NewsArticle {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 2px;
  padding-left: 2px;
}

/* Home */


/* Image Links */

.LinkGalleryHorizontal {
  justify-content: center;
  display: flex;
  flex-wrap: nowrap;  
}

.LinkGalleryItemImg {
   padding: 2px;
text-align: center;
  position: relative;
  display: inline-block;
}

.LinkGalleryItemImg img {
  vertical-align: bottom;
}


.LinkGalleryItemDescriptionLayer {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
 /* background: rgba(36, 62, 206, 0.6); */
  color: #fff;
  visibility: hidden;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  
  transition: opacity .2s, visibility .2s; 
}

.LinkGalleryItemImg:hover .LinkGalleryItemDescriptionLayer {
  visibility: visible;
  opacity: 1;
}

.LinkGalleryItemDescriptionLayer {
  transition: .2s;
  transform: translateY(1em);
}

.LinkGalleryItemImg:hover .LinkGalleryItemDescriptionLayer {
  transform: translateY(0);
}

/* /ImageLinks */


.gallery {
  justify-content: center;
  display: flex;
  flex-wrap: nowrap;
}

@media only screen and (max-width: 700px) {
  .gallery {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}


/* projects' gallery */

.galleryItem {
  margin: 5px;
  border: 1px solid #ccc;
  width: 180px;  
  display: inline-block;
}

@media only screen and (max-width: 700px) {
  .galleryItem {
    margin: 0 auto;
  }
}

.galleryItem:hover {
  border: 1px solid #777;
}

.galleryItem img {
  width: 100%;
  height: auto;
}

.galleryItemDescription {
  padding: 5px;
  text-align: center;
}

.galleryItemLink {
  padding: 2px;
  text-align: center;
}

.galleryItem p {
 text-align: center;
}

/* projects' gallery */



/* Video gallery */

.short {  
  padding: 2px;
text-align: center;
  display: inline-block;
}

/* Video gallery */


/* illustration gallery */

.Illus {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

.Illus:hover {
  border: 1px solid #777;
}

.Illus img {
  width: 200;
  height: 200;
}

.IllusDesc {
  padding: 0px;
display: flex;
  align-items: center;
  justify-content: center;
}


/* illustration gallery */


/* WebGL Page */

.WebGLArticle {
   margin: auto;
text-align: center;
 /* border: 3px solid green; */
  padding: 10px;
}

/* webGL page