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



#menu ul {
  list-style: none;
  margin: 1000;
  padding: 500;
  display: inline-flex;
  align-self: stretch;
  align-content: center;
  
}

p {
  margin-top:15px; font-family: Delicious, sans-serif; font-size: 25px;
}
  
h1 {
  color: White;
  font-family: Delicious, sans-serif; 
  font-size: 50px;
  padding: 1px;
  line-height: 20px;
}

h2 {
  color: #080926;
  font-size: 25px;
  font-family: Delicious, sans-serif; 
}
h3 {
  color: white;
  font-size: 25px;
  font-family: Delicious, sans-serif; 
  text-align: center;
  padding: .02px;
}

header {
  background-color: #080926;
  font-family: Delicious, sans-serif; 
  padding: 5px;
  text-align: center;
  color: white;
}

nav {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: #252778;
  padding:0px;
  text-align: center;
  justify-content:space-between;


}
nav ul {
  list-style: none;
  margin: 10px;
  padding: 5px;
  display: inline-flex;
}


article {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  /*background-color: #f1f1f1;*/
  padding: 10px;
}



a:link, a:visited {
  border-style: solid;
  border-radius: 10px; 
  background-color: #252778;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: Delicious, sans-serif; 
  margin: 5px;

}

a:hover, a:active {
  font-family: Delicious, sans-serif; 
  background-color: #080926;
  border-radius: 10px; 
}

footer {
  background-color: #080926;
  font-family: Delicious, sans-serif; 
  padding: 5px;
  color: white;
  

}
footer:link{
  background-color: #080926;
  font-family: Delicious, sans-serif; 
  padding: 5px;
  color: white;
    text-align: center;
}
.link {
  font-size: 10px;
  text-decoration: none;
  font-family: Delicious, sans-serif; 
  margin: 5px;
  align-self: center;
}

div {
  
}
.img-link {
  width: 500px;
  height: 500px;
  border-style: none;
  border-radius: 10px; 
  background-color: #080926;
  color: #252778;
  display: inline-flex;
  font-family: Delicious, sans-serif; 
  margin: 0;
  padding: 50px;
  transition: transform .2s; /* Animation */
}
  
.img-link:link {
  border-style: solid;
  border-radius: 2px; 
  background-color: #252778;
  color: #252778;
  padding:0;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: Delicious, sans-serif; 
  margin: 5px;
}

.img-link:hover {
  transform: scale(1.05); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  
}
.text {
  font-family: Delicious, sans-serif; 
  font-size: 20px;
  color: white;
  text-indent: 40px;
  text-align: center;
  padding: .2% 25%;
}


.img-link img {
  width: 100%;
  height:100%;
  object-fit: cover;
}

.image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    
}

.image-gallery img {
    flex: 1 1 200px; /* Grow and shrink, with a base width of 200px */
    width: 10%;
    height: auto;
    object-fit: cover;
}
@media (max-width: 768px) {
    .image-gallery {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

@media (max-width: 480px) {
    .image-gallery {
        grid-template-columns: 1fr;
    }
}

body {
  background-color: #080926;
  color: #080926;
  /*font-family: Delicious-Roman; src: url('Delicious-Roman.otf');*/
  font-family: Delicious, sans-serif; 
  float:none;
}


* {
  box-sizing: border-box;
}

/* Style inputs */
input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

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

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

/* Style the container/contact section */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 10px;
}

/* Create two columns that float next to eachother */
.column {
  float: left;
  width: 50%;
  margin-top: 6px;
  padding: 20px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

.zoom {
  padding: 50px;
  background-color: green;
  transition: transform .2s; /* Animation */
  width: 200px;
  height: 200px;
  margin: 0 auto;
}



/*Nesecary Hexcodes 
  DarkBlue #080926
  LightBlue #252778
  Red #D7001b
  White #ffffff */