/* 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." */

body {
  background-image:  url("\JWST_Background.jpg");
  background-repeat:  no-repeat;
  background-attachment:  fixed;
  background-size:  cover;
  color:  black;
  font-family:  Verdana;
}

/* GENERAL */

.center_text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
}

ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "-";
  text-indent: -5px;
}

/* WELCOME PAGE */
/* WELCOME COLORS:
MColor 1: #8DD6D9
MColor 2: #4BC3C2
MColor 3: #009999
CColor 1: #F4F175
CColor 2: #EBD02D

*/


.enter_button {
  background-color: #800020;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1%;
  width: 50%;
  text-decoration: none;
  
}
.enter_button:hover {
  background-color: #5c0017;
  color: black;
  cursor:  pointer;
}
.enter_button:active {
  background-color: black;
  color: white;
  cursor:  pointer;
}

/* HOME PAGE */

.main-div {
  display: flex;
  flex-direction: column;
  border-color: #009999;
  border-style: solid;
  width: 50vw;
  background-color: #8DD6D9;
  
}

.header-div {
  display: flex;
  flex-direction: column;
  height: 20%;
  /* border-color: purple;
  border-style: solid; */
  margin: 1%;
  
  
}

.banner {
 display: flex; 
 justify-content: center;
 height: 200px;
 border:solid;
 border-color:black;
 border-width:5px;
 border-radius:20px;
}
.banner img {
  width:  100%;
  height:  100%;
  object-fit: cover;
  border-radius:15px;
}

.homepage-body {
 display: flex;
 flex-direction: column;
 align-items: center;
 width: 80%;
 padding:1%;
}

.homepage-body .featured-body {
  display: flex;
  flex-direction: column; 
  background-color: #4BC3C2;
  width: 100%;
  border-color:#009999;
  border-style:dashed;
  margin:1%;
  border-radius: 20px;
}
.featured-body > div {
 padding:1%; 
  
}

.homepage-body .second-row {
  display: flex;
  flex-direction: row; 
  background-color: #4BC3C2;
  justify-content: space-evenly;
  width: 100%;
  height: 100%;
  border-color:#009999;
  border-style:dashed;
  margin:1%;
  border-radius: 20px;
}
.second-row > div {
  width: 50%;
  padding:1%;
  
}

.whole-homepage-body {
  display: flex;
  flex-direction: row;
}

.whole-sidebar-body {
  display: flex;
  flex-direction: column;
  width: 20%;
  background-color: #4BC3C2;
  padding: 1%;
}
div.sidebar-group {
  display:  flex;
  flex-wrap: nowrap;
  height: 100%;
  flex-direction:column;
  overflow: hidden;
}
.sidebar-group > a {
  display: flex;
  margin: 1%;
  align-items: center;
  color: black;
  background-color: #4BC3C2;
  width: 100%;
  text-decoration: none;
  font-size:1rem;
  line-height:  1em; 
  max-height:  2em;
  overflow:hidden;
}
.sidebar-group > a:hover {
  color: black;
  background-color: #8DD6D9;
  cursor:  pointer;
}

.featured-carousel-container {
  overflow:  hidden; 
  width:100%;
  height:100%;
  display:flex;
  flex-wrap:nowrap;
  border-color:#009999;
  border-style:dashed;
  margin:1%;
  border-radius: 20px;
  
}

.featured-carousel-items {
 display: flex;
 
 animation: cat-scroll 60s linear infinite;
 width:100%;
 height:100%;
 
}
.featured-carousel-items img {
  height:100%;
  min-width:100%;
  object-fit: cover;
  background-color:#8e4585;
  
  
}
@keyframes cat-scroll {
  0% {
   transform: translateX(0); 
  }
  100% {
   transform: translateX(-500%); 
  }
}

.footer-body {
 display: flex;
 flex-direction: column;
 width: 100%;
 justify-content: center;
 align-items: center;
 background-color: #4BC3C2;
 margin-top: 1%;
}


/* PROJECTS */

.projects-container {
 display: flex;
 flex-direction: row; 
 background-color: #4BC3C2;
 width: 90%;
 border-color:#009999;
 border-style:dashed;
 margin:1%;
 border-radius: 20px;
 padding:2%;
}
.projects-container > div{
  display: flex;
  flex-direction: column;
  width: 35%;
}
.projects-container > img{
 width: 65%;
 height: 100%;
 outline:solid;
 outline-width:5px;
 outline-color:#009999;
 
}


/* HOBBIES */

.hobbies-matrix {
 display: flex;
 flex-wrap: wrap;
 flex-direction: row; 
 background-color: #4BC3C2;
 width: 90%;
 border-color: #009999;
 border-style: dashed;
 margin: 1%;
 border-radius: 20px;
 padding: 1%;
 justify-content: space-evenly;
}
.hobbies-matrix > div {
  display:flex;
  width:40%;
  color:black;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  text-decoration:none;
}
.hobbies-matrix > div:hover {
  display: flex;
  width: 40%;
  color: black;
  background-color: #8DD6D9;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.hobbies-matrix > div > img {
 width:100%;
 height:20%;
 object-fit: contain;
}