@import url('./global.css');

body {
    background-color: var(--color-background01);
    background-image: url(/assets/images/doodle-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
}

h1 {
    margin: 1rem;
}

a {
    display: inline-block;
}

.page-wrapper {
    display: grid;
    grid-template-columns: 30% 20% 20% 30%;
    grid-auto-rows: 15vh;
    width: 70%;
    margin: 2rem auto;
    padding: 1rem;
    background-color: var(--color-wrapper01);
    border-radius: 2rem;
}

.page-box {
    margin: 0.5rem;
    border-radius: 2rem;
    background-color: var(--color-box);
    box-shadow: 0.25rem 0.25rem 0.5rem #26384787;
    overflow-y: hidden;
}

.header {
    border-radius: 1.65rem 1.65rem 0 0;
    vertical-align: top;
    display: flex;
    justify-content: center;
    align-items: center;
}
#header-presentation, #header-features {
    background-color: var(--color-accent01);
}

#header-links, #header-buttons {
    background-color: var(--color-accent02);
}
#header-status, #header-latest-post {
    background-color: var(--color-accent03);
}
#header-now-playing, #header-webrings {
    background-color: var(--color-accent04);
}
.header > h2 {
    color: var(--color-box);
    text-align: center;
    padding: 0.5rem 0;
}

#header {
    grid-column: 1 / span 4;
    grid-row: 1 / span 1;
    text-align: center;
}

#links {
    grid-column: 1 / span 1;
    grid-row: 2 / span 4;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
#features::-webkit-scrollbar {
    display: none;
}

#links ul {
    list-style-type: none;
    padding-left: 0;
    margin-top: 0;
}
#links li {
    text-decoration: none;
    border-radius: 1rem;
    box-shadow: 0.1rem 0.1rem 0.25rem #26384787;
}
#links a{
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 1rem;
    color: var(--color-text);
}
#presentation {
    grid-column: 2 / span 2;
    grid-row: 2 / span 7;
}
.accueil-image {
    float: right;
    width: 50%;
    border-radius: 2rem;
    box-shadow: 0.1rem 0.1rem 0.25rem #26384787;
    margin: 1rem;
}

#status {
    grid-column: 4 / span 1;
    grid-row: 2 / span 2;
}
.status-text {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}
.date {
    flex: 0 0 100%;
}
.status-text > p, .latest-post > a > p {
    margin: 0.5rem 1.5rem;
}
.date > * {
    display: block;
    margin-bottom: 0;
}

#now-playing {
    grid-column: 4 / span 1;
    grid-row: 4 / span 5;
}
.now-playing > p {
    margin: 1rem 1.5rem;
}
.album-cover {
    width: 85%;
    border-radius: 2rem;
    box-shadow: 0.1rem 0.1rem 0.25rem #26384787;
    margin: 1rem auto;
}
.audio-player {
    padding-bottom: 1rem;
}

#latest-post {
    grid-column: 1 / span 1;
    grid-row: 6 / span 3;
}
.latest-post > a {
    text-decoration: none;
    color: inherit;
    border-radius: 2rem;
    padding: 1.5rem;
    box-shadow: 0.1rem 0.1rem 0.25rem #26384787;
    margin: 1.5rem;
}
.latest-post {
    display: flex;
    justify-content: center;
    align-items: center;
}

#buttons {
    grid-column: 1 / span 4;
    grid-row: 9 / span 2;
    overflow-y: auto;
}
#buttons::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
#buttons {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.buttons-text {
    display: block;
    text-align: center;
    overflow-y: auto;
}
.buttons-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.button-image {
    margin: 0.5rem;
    transition: transform 0.2s ease-in-out;
}
.buttons-text > a {
    margin: 1rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
}
.button-image:hover {
    transform: scale (1.25);
}
.button-personal {
    margin: 0.5rem auto;
}
hr {
    border: 0;
    height: 1.5px;
    background: var(--color-wrapper01);
    margin: 1rem 1.5rem;
    opacity: 0.3;
}

#webrings{
    grid-row: 11 / span 2;
    grid-column: 1 / span 2;
}
.webrings a
{
    display: initial;
    margin: initial;
}
.webrings img
{
    display: initial;
    margin: initial;
}
.webrings {
    display: flex;
    justify-content: center;
    align-items: center;
}
#francophonering {
    display: block;
    margin: 1rem auto;
}

#features {
    grid-row: 11 / span 2;
    grid-column: 3 / span 2;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
#features::-webkit-scrollbar {
    display: none;
}