/* CSS styles */
h1 {
  /* font-family: Impact, sans-serif; */
  font-size: 400%;
  margin-left: auto;
  margin-right: auto;
  color: #bce1ff;
  text-align: center;
}

body {
  height: 200%;
  background-image: linear-gradient(90deg, rgb(14, 38, 104) 8%, rgb(4, 25, 83) 20%,  rgb(4, 25, 83) 80%,rgb(14, 38, 104) 92%);
  color: #bce1ff;
}

p {
  /* display: flex; */
  /* flex-direction: row; */
  width: 96%;
  margin-left: 2%;
  margin-right: 2%;
  /* height: auto; */
  /* margin: 1%; */
  align-self: center;
  color: #bce1ff;
  /* color: black; */
  text-decoration: none!important;
  /* text-decoration-color: transparent; */
  /* -moz-text-decoration-color: azure; */
  /* d */
}

/* a { */
  /* text-decoration-color: transparent; */
  /* text-decoration: none!important; */
/* } */

.header-class {
  background-color: rgb(4, 27, 88);
  /* margin-top: 1%; */
  padding-top: 1%;
  padding-bottom: 1%;
  display: flex;
  justify-content: center;
  align-items: baseline;
  position: fixed;
  width: 100%;
  height: 38px;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
}

.button-class {
  /* color: rgb(255, 255, 180); */
  background-color: color(display-p3 0 0 0.2 / 1);

  display: flex;
  flex-direction: column;
  
  justify-content: center;
  align-items: normal;
  text-align: center;

  margin-left: 1%;
  margin-right: 1%;
  width: 15%;

  cursor: pointer;
}

.project {
  /* color: rgb(255, 255, 180); */
  background-color: color(display-p3 0 0 0.2 / 1);

  display: flex;
  flex-direction: column;
  
  min-width: 400px; 
  margin: 1%;
  /* justify-self: center; */
  
  justify-content: center;
  align-items: normal;
  text-align: center;

  margin-left: auto;
  margin-right: auto;
  width: 30%;
  border-radius: 5%;

  cursor: pointer;
}

.project a {
  text-decoration: none!important;
}
.project:hover {  
  background-color: color(display-p3 0.1 0.1 0.4 / 1);
}

.button-class ul
{
  margin:0;
  padding:0;
  display:none;
  list-style:none
}

.button-class li
{
  /* padding:10px; */
  display: block;
  position:relative;
  list-style:none;
  text-align:center;
}

.button-class a 
{
  display: block;
  color: #bce1ff;
  text-decoration: none!important;
  padding:10px;
}

.new-button-class {
  display: block;
  color: #bce1ff;
  text-align: center;
  cursor: pointer;
  
  background-color: color(display-p3 0 0 0.2 / 1);
}

.button-class li:hover
{
  background-color: color(display-p3 0.1 0.1 0.4 / 1);
}

.button-class:hover {  
  background-color: color(display-p3 0.1 0.1 0.4 / 1);
}

.button-class:hover.button-class>ul
{
  /* opacity:100; */
  display:block;
}

.window-class {
  /* display: inline; */
  /* justify-self: center; */
  /* place-self: ; */
  /* align-self: center; */
  /* justify-content: center; */
  /* align-items: center; */
  position: absolute;
  /* top: 0%; */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;

  height: fit-content;
  width: 80%;
  
  /* margin-left: 0 auto;
  margin-right: 0 auto; */
  /* margin: 0 auto;  */
  margin-top: 4%;
  /* margin-top: 8%; */
  /* margin-left: 25%; 
  margin-right: 25%; */
  padding: 1%;
  /* background-color: rgb(136, 168, 255); */
  /* background-color: color(display-p3 0.8 0.8 0.7 / 1); */
 
  /* box-shadow: 0px 0px 5px 8px rgb(6, 31, 100); */
}

.left {
  /* display: block; */
  display: flex;
  flex-direction: row;
  margin-left: 1%;
  margin-right: auto;
}

.center {
  /* display: block; */
  display: flex;
  flex-direction: row;
  /* margin-left: auto; */
  margin-left: auto;
  margin-right: auto;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin-top: 1%;
  margin-bottom: 1%;
  align-items: top;
  /* width: auto; */
}

.row p {
  width: 80%;
  /* justify-self: center; */
  /* align-self: center; */
}

.row img {
  margin-left: 2%; 
  margin-right: 2%; 
  min-width: 400px; 
  max-width: 40%; 
  justify-self: center;
  align-self: center;
  height: fit-content;
}

.column {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  margin-top: 1%;
  margin-bottom: 1%;
  align-items: center;
  /* width: auto; */
}
.column p {
  justify-content: top;
}