/* Oh hi~ Welcome to my code, doing my little best here. Some things aren't working quite well yet but I'm learnding. 
Anyway the only graphic that's truly mine is the title logo, otherwise feel free to lift whatever code suits your use and have fun making your own website. 
And if you needed a sign that you should get up and have a glass of water (preferably fresh but that's your call, I won't judge), this is it. Allez, hop hop hop. */

/* Fonts */
@font-face {
    font-family: 'menu';
    src: url(./fonts/bunmenu.otf);
}

@font-face {
    font-family: 'title';
    src: url(./fonts/bun.ttf);
}

/* General styling */
body {
    background: linear-gradient(152deg,rgba(130, 250, 242, 1) 4%, rgba(34, 240, 226, 1) 20%, rgba(34, 188, 240, 1) 38%, rgba(111, 0, 176, 0.84) 60%, rgba(209, 201, 242, 1) 85%, rgba(255, 255, 181, 0.96) 98%); 
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: local;
    font-family: 'Courier New', Courier, monospace;
    color: rgb(0, 16, 24);
    text-align: center;
}

h1 {
    font-family: 'title';
    font-style: italic;
    text-align: center;
    font-size: 3em;
}

h2 {
    text-align: center;
}

a:link {
    color:#672bd6;
    font-weight: 900;
    text-shadow: 1px 0 2px #c1f4f8;
}

a:visited {
    color: #170069;
    font-style: italic;
    text-decoration: line-through;
}

a:hover {
    color: #1a7cbd;
    text-decoration: overline underline;
    text-shadow: 1px 0 2px #c1f4f8, 1px 1px 1px #c8ceaf;
}

a:active {
    font-style: italic;
}

/* Grid styling */
.parent {
    display: grid; 
    grid-template-areas:
        "header header"
        "menu main"
        "footer .";
    grid-template-columns: repeat(2, 23% 76%);
    grid-template-rows: repeat(3, 18% 72% 10%);
    gap: 0px;
}

.header {
    grid-area: header;
    grid-column: 1 / span 2;
    grid-row: 1;
}

.header .title {
        max-height:210px;
}
    
.header .intro {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.8em;
    text-align: left;
    border: 5px solid white;
    border-radius: 20px;
    margin: 5px;
    padding: 6px 30px;
    background-image: url(./img/bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 100%;
}

.header img{
    max-width: 100%;
    height: auto;
}

.menu {
    grid-area: menu;
    grid-column: 1;
    grid-row-start: 2;
    background-image: url(./img/bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'menu';
    font-size: 2.8vw;
    text-align: left;
    border: 5px solid white;
    border-radius: 20px;
    max-width: 100%;
    margin: 10px 5px 5px 5px;
}   

.menu img {
    max-width: 100%;
}

.menu .bunline {
    text-align: center;
    padding-top: 1.5vh;
}

.menu nav a::before {
    background-image: url(./img/buns/bunuwu.gif);
    display: inline-block;
    width:29px;
    height: 49px;
    content: "";
} 
    
.menu nav a:link {
    color:rgba(140, 0, 255, 0.658);
    text-decoration: none;
    background-repeat: no-repeat;
    background-position: left;
    background: linear-gradient(164deg,rgba(130, 250, 242, 1) 10%, rgba(111, 0, 176, 0) 50%);
    margin-left: 3%;
    margin-bottom: 20%;
    padding: 3%;
    border-radius: 40px;
    display: inline-block;
    filter: drop-shadow(0 0 0.2em #9284c4);
} 

.menu nav ul {
    list-style: none;
    margin-bottom: 2.5rem;
    padding: 5px 10px;
}

.menu .buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 1px;
}

.main {
    grid-area: main;
    grid-column-start: 2;
    grid-row-start: 2;
    padding-left: 1;
    max-width: 90%;
}

.main img {
    max-width: 110%;
}

.cliques ul {
    list-style: none;
}
    
.cliques li {
    display: inline-block;
    text-align: center;
    font-size: 11px;
    border: none;
    padding: 3px;
    margin: 7px 7px 10px;
    line-height: 10px;
    background-color: rgba(226,255,245,0.3);
}

.cliques a:active::after {
    content:  url(./img/buns/buntiny.gif);
}

.footer {
    grid-area: footer;
    grid-column: 1;
    grid-row: 3;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: x-small;
    margin: 5px;
    padding: 2px;
}