/* URL */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

body
{
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

img
{ 
    max-width: 100%;
    height: auto;
    display: block;
    padding: 0;
    height: auto;
    margin: auto;
}

flitz
{ 
    max-width: 100%;
    height: auto;
    display: block;
    padding: 0;
    height: auto;
    margin: auto;
}

h1
{
    font-size: 22px;
}

a
{
    text-decoration: none;
    text-shadow: 1x 1px 2px rgb(0, 0, 0);
    color: rgb(255, 255, 255);
}

section, footer
{
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 600px;
    margin: auto;
    margin-bottom: 20px;
}

/* HEADER */
section.header img
{
    max-width: 120px;
    border-radius: 50%;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.71);
    padding: 0;
}

.parent
{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(12, 1fr);
    grid-column-gap: 18px;
    grid-row-gap: 18px;
}
    .div1 { grid-area: 1 / 1 / 2 / 3; }
    .div2 { grid-area: 1 / 3 / 2 / 5; }
    .div3 { grid-area: 2 / 1 / 3 / 3; }
    .div4 { grid-area: 2 / 3 / 3 / 5; }
    .div5 { grid-area: 3 / 1 / 4 / 3; }
    .div6 { grid-area: 3 / 3 / 4 / 5; }
    .div7 { grid-area: 4 / 1 / 5 / 3; }
    .div8 { grid-area: 4 / 3 / 5 / 5; }
    .div9 { grid-area: 5 / 1 / 6 / 3; }
    .div10 { grid-area: 5 / 3 / 6 / 5; }
    .div11 { grid-area: 6 / 1 / 7 / 3; }
    .div12 { grid-area: 6 / 3 / 7 / 5; }
    .div13 { grid-area: 7 / 1 / 8 / 3; }
    .div14 { grid-area: 7 / 3 / 8 / 5; }
    .div15 { grid-area: 8 / 1 / 9 / 3; }
    .div16 { grid-area: 8 / 3 / 9 / 5; }
    .div17 { grid-area: 9 / 1 / 10 / 3; }
    .div18 { grid-area: 9 / 3 / 10 / 5; }
    .div19 { grid-area: 10 / 1 / 11 / 3; }
    .div20 { grid-area: 10 / 3 / 11 / 5; }
    .div21 { grid-area: 11 / 1 / 12 / 3; }
    .div22 { grid-area: 11 / 3 / 12 / 5; }
    .div23 { grid-area: 12 / 1 / 13 / 3; }
    .div24 { grid-area: 12 / 3 / 13 / 5; }
        
/* LINKS */
.container {
    grid-template-columns: [first] 40px [line2] 60px [line3] auto [col4-start] 60px [five] 40px [end];
    grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
  }

.item-a {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: row1-start;
    grid-row-end: row1-end;
  }

.item-b {
    grid-column-start: 4;
    grid-column-end: 4;
    grid-row-start: row1-start;
    grid-row-end: row1-end;
  }

section.links .link-items{
    display: grid;
    width: auto;
    height: auto;
    margin-bottom: 16px;
}
section.links .link-items a{
    display: grid;
    max-width: 200px;
    width: auto;
    height: auto;
    border: 1px #000 solid;
    padding: 16px 26px;
    text-align: center;
    color: #c9c7c7;
    text-shadow: -1px -1px 0px rgba(9, 22, 10, 0.23), 1px 1px 0px rgba(0,0,0,0.8);
    border-radius: 25px;
    transition: transform .4s;
    background: linear-gradient(
      50deg,
      rgba(255, 255, 255, 0.2) 12%,
      rgba(250, 234, 211, 0.1) 77%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }


section.links .link-items a:hover{
    box-shadow: 3px 3px rgb(0, 0, 0);
    transition: cubic-bezier(.07, 1.41, .82, 1.41) 0.2s;
    transform: scale(1.02);
}

/* FOOTER */
footer a{
    color: rgb(255, 255, 255);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.845);
}