:root {
    /* Border & Margin */
  --margin: 15px;
  --padding: 5px;
  --border: 20px solid transparent;
  --border2: 33px solid transparent;
  --round-borders: 10px;
  --sidebar-width: 200px;
  --border-width: 5px;

  /* Fonts */
  --font-family: monospace;

  /* Background Colors: */
  --body-background:#08193c;
  --header-main-footer-background :#2C1331;
  --main-background:#2C1331;
  --section-background :#0BA7C2;
  --background-image: linear-gradient(to bottom right, #0D1B6F, #6E1FA3);
  --background-image2: linear-gradient(to bottom right, #6E1FA3, #2C1331);
  --background-image3: linear-gradient(to bottom right, #010306, #08193c );
  --modal-background: linear-gradient(to bottom right,#6FE7F4, #0D1B6F );

  /* Effects */
 
}

@font-face {
    font-family: aldo;
    src: url(/Fonts/Aldo\ PC.ttf);
}

.layout {   
  max-width: 100%;
    width: 1250px;
    display: grid;
    grid-template:
    "header"
    "main"
    "footer";
    gap: 5px;
}

body {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin: 0;
    padding: var(--margin);
    background-color:var(--body-background);
    background-image: var(--background-image3);
    font-family: aldo, monospace, serif;}

/* -------------------------------------------------------- */
/* HEADER */
/* -------------------------------------------------------- */

header {
    grid-area: header;
    background-color: var(--header-main-footer-background);
    background-image: var(--background-image2);
    align-items: center;
    height: 100px;
}

.header-title {
    margin-top: 50px;
    font-size: 25px;
    text-align: center;
    color: white;
    font-family: aldo, serif;
    line-height: 10px;
}

/* -------------------------------------------------------- */
/* NAV */
/* -------------------------------------------------------- */

a:visited {
  color: #E07A2E;
}
a:link {
  color: white;
}
a:hover {
  color: hotpink;}

nav ul {
    margin-top: -25px;
    list-style: none;
    color: #E07A2E;
    font-size: 25px;
}

/* -------------------------------------------------------- */
/* MAIN */
/* -------------------------------------------------------- */

main {
    grid-area: main;
    overflow-y: auto;
    background-color: var(--main-background);
    padding: var(--padding);
    min-width: 350px;
}

.about {
    font-size: 30px;
    padding: 2px;
    color: #0BA7C2;
}
.about h2 {
    margin: 0;
}
section {
    background-color: var(--section-background);
    background-image: var(--background-image);
    margin: 5px;
    text-align: center;
    padding: 5px;
}

.gallery {
    display:grid;
    padding: 0.482rem;
}

.gallery img {
    width: 100%;
    max-width: 150px;
    min-width: 0; 
    cursor: pointer;
}

.gallery figcaption {
    display: none;
}

.gallery figcaption, dialog figcaption {
    width: 0 auto;
    margin-top: 15px;
    margin-left: 2rem ;
    margin-right: 2rem;
    text-align: center;
    font-size: 25px;
    color: aliceblue;
}

.gallery img:hover {
    transform: scale(1.2) rotate(8deg);
}

.buttonClose {
    position: absolute;
    right: 0%;
    top: 0%;
    margin: 0.6rem;
    padding: 0.2rem 0.4rem;
    background-color: #0BA7C2;
    cursor: pointer;
    border-color: #6FE7F4;
}

.buttonClose:hover {
    background-color: #6FE7F4;
}

/* -------------------------------------------------------- */
/* MODAL STYLES */
/* -------------------------------------------------------- */

dialog {
    position: fixed;
    top: 8vh;
    max-width: 100vw;
    max-height: 90vh;
    margin: 0 auto;
    border: none;
    background-color: rgba(170, 31, 177, 0.651);
    background-image: var(--modal-background);
    border-radius: var(--round-borders);
}

dialog::backdrop {
  background-color: #1e0320ee;
}

dialog img {
    height: 70vh;
}
/* -------------------------------------------------------- */
/* FOOTER */
/* -------------------------------------------------------- */

footer {
    grid-area: footer;
    background-color: var(--header-main-footer-background);
    padding: var(--padding);
    color: aliceblue;
    
}

@media screen and (min-width: 400px) {
    .gallery{
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (min-width: 800px) {
    .gallery{
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media screen and (min-width: 1200px) {
    .gallery{
        grid-template-columns: repeat(5, 1fr);
    }
}