@font-face {
    font-family: "PP Editorial New";
    src: url("fonts/PPEditorialNew-Ultralight.otf") format("opentype");
}

@font-face {
    font-family: "Arial Narrow";
    src: url("fonts/Arial Narrow.ttf") format("truetype");
}

:root {
    font-size: 100%;

    --font-family: "PP Editorial New";
    --font-family2: "Arial Narrow";

    --light: #FFFFFF;
    --dark: #191919;
    --brat: #8ACE02;

    --lineheight: 95%;
    
    --textL: 4rem;
    --textM: 2rem;
    --textS: 1rem;

    --spaceL: 3rem;
    --spaceM: 2rem;
    --spaceS: 1rem;
}


/* I remember we dicussed light/dark mode in class but I looked it up on MDN to check how to do it 
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme
I just swapped my root colours around  */
/* I decided to remove this as I felt it was losing its vibe in dark mode but left the code in to reference later */
/* @media (prefers-color-scheme: dark) {
    :root {
        --light: #191919;
        --dark: #FFFFFF;
    }
} */

/* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-behavior
I added this to make my scrolling smooth when I press the 'extended mix below' */
html {
    scroll-behavior: smooth;
}


body {
    font-family: var(--font-family);
    font-weight: 200;
    color: var(--dark);
    background-color: var(--light);
    text-wrap: balance;
    p {
        font-size: var(--textS);
        max-width: 60ch;
    }
}


#channel-blocks {
    padding: var(--spaceL);
    display: grid;
    /* had problems with 1fr so Michael explained it to me on slack and I used minmax  */
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--spaceS);
    overflow-x: hidden;
  
    p{
        padding-block: var(--spaceS);
    }

    @media (width <950px){
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    }

    @media (width <700px){
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }

    @media (width <500px){
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    &.reveal {
        grid-template-columns: repeat(4, minmax(0, 1fr));

        @media (width < 950px) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        @media (width < 700px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        @media (width < 500px) {
            grid-template-columns: minmax(0, 1fr);
        }

        li {
            mix-blend-mode: normal;
            transform: scale(1);
            align-self: center; 
            filter: invert(0); 
            cursor: pointer; 
            rotate: 0deg;
        }

        .modal-button, .hover {
            &:hover {
                transform: scale(1.02);
                
                @media (width < 700px) {  
                    transform: none;
            }
            }
        }
    }

    li {
        filter: invert(1);       
        mix-blend-mode: multiply; 
        cursor: default;
        rotate: var(--random-rotate);
    }

    li {
        opacity: 0.3;
         
        &.scrollhighlight {
        opacity: 1;
    }
    }    
}   

.togglebuttons {
    display: flex;
    justify-content: space-between;
    gap: var(--spaceS);
    position: sticky;
    top: 0;
    /* I took this from Trenton and I's spread project - how to blur the background */
    background-color: color-mix(in srgb, var(--light), transparent 70%);
    backdrop-filter: blur(1.5rem); 
    z-index: 2;
}

h1 {

    font-size: calc(var(--textL)*2);
    font-family: var(--font-family2);
    text-align: center;
    padding-block-end: var(--spaceL);
    line-height: var(--lineheight);

    &.playing {
        animation: blinking 1s steps(1) infinite;
    }

    @media (width < 600px) {
        font-size: calc(var(--textL)*1.2);
    }    
}

/* looked at the class website to add some animation to the title */
@keyframes blinking {
	0% {
        color: var(--dark);
	}
    10% {
        color: var(--brat);
    }
    20% {
        color: var(--dark);
    }
    30% {
        color: var(--brat);
    }
    40% {
        color: var(--dark);
    }
	50% {
        color: var(--brat);
	}
    60% {
        color: var(--dark);
    }
    70% {
        color: var(--brat);
    }
    80% {
        color: var(--dark);
    }
    90% {
        color: var(--brat);
    }
	100% {
        color: var(--dark);
	}
}

h2 {
    font-size: var(--textM);
    font-family: var(--font-family2);
    text-align: center;
    color: var(--brat);
    margin: var(--spaceS);
}

p {
    font-size: var(--textS);
    font-family: var(--font-family2);
    color: var(--dark);
    text-align: center;
}

@media (width < 600px) {
    p {
        font-size: calc(var(--textS)*0.6);    
    }

    h2 {
        font-size: calc(var(--textM)*0.6);
    }
}

#channel-slug {
    position: sticky;
    top: 50%;
    font-size: calc(var(--textL)*2.5);
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 1;

    @media (width <900px){
        font-size: var(--textL); 
    }

}

#channel-link {
    color: var(--dark);
    font-family: var(--font-family2);
    text-decoration: underline;
    margin: var(--spaceM);
}

header {
    padding: var(--spaceL);
    text-align: center;
    block-size: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center; 

    h2 {
        padding-block-start: var(--spaceL);
    }

    @media (width < 600px) {
        block-size: 95vh;
    }
}

footer {
    margin-block-start: calc(var(--spaceL)*6);
    margin-block-end: calc(var(--spaceL)*2);
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: var(--spaceM);
    padding-inline: var(--spaceL);

    p {
        text-align: center;
        font-family: var(--font-family2);
        font-size: calc(var(--textS)*1.5);
        color: var(--dark); 
        padding: var(--spaceS);  

        a{
            padding: calc(var(--spaceS)*0.5);
            color: var(--brat);
            background-color: var(--dark);
            &:hover {
                color: var(--dark);
                background-color: var(--brat);
            }
        }
    }

    @media (width <500px ){
        flex-direction: column;
    }

}

/* Align-self allows me to isolate some of the grid items I found this on MDN https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/align-self I wanted to create a more flexible and loose grid system by aligning some of the elements to the bottom of the grid */
.align {
    align-self: end;
    width: 100%;  
    /* added with: 100% so the audio takes up the whole width on mobile */
}

/* testing out using modal from the class website */

body:has(dialog[open]) { overflow: hidden; }

dialog {

    background-color: var(--light);
    filter: drop-shadow(0 0.2rem 1rem rgb(0 0 0 / 30%));
    justify-items: center;
    color: var(--dark);
    padding: var(--spaceL);
    inset-block-start: 50%;
	inset-inline-start: 50%;
	position: fixed; 
	translate: -50% -50%;
    width:50vw;
    height: auto;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
     /* overflow-y: auto allows vertical scroll */

    @media(width <600px){
        width: 90vw;
        height: auto;          
        max-height: 85vh;       
        padding: var(--spaceM);
    }

    &[open] { display: grid }

    button {
        background-color: var(--dark);
        color: var(--brat);
        font-family: var(--font-family2);
        font-size: var(--textS);
        padding: calc(var(--spaceS)*0.2);
        cursor: pointer;

    }

    &::backdrop {
		background-color: rgb(0 0 0 / 75%);
	}

}


.modal-button, #play {
    font-family: var(--font-family2);
    font-size: var(--textM);
    color: var(--dark);
    background-color: var(--brat);
    padding: calc(var(--spaceS)*0.5);
    cursor: pointer;
    margin: var(--spaceS);
}

.modal-dialog-image {
    background: transparent;
}


.topbar {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spaceS);
    width: 100%;
}

.topbar-end {
    display: flex;
    justify-content: end;
    margin-bottom: var(--spaceS);
    width: 100%;
}

.modal-title {
    font-size: calc(var(--textS) * 1.5);
    text-align: start;
}

.modal-dialog img, 
.modal-dialog iframe {
    width: 40%;
    display: block;
    margin: var(--spaceS) auto;
}

.close-button {
    font-size: calc(var(--textS) * 1.5);
    padding: var(--spaceS);
}

.arena-button {
    background-color: var(--brat);
    font-family: var(--font-family2);
    color: var(--dark);
    padding: var(--spaceS);
    margin-block-start: var(--spaceS);
}

.visit-button {
    background-color: var(--dark);
    font-family: var(--font-family2);
    color: var(--brat);
    padding: var(--spaceS);
    margin-block-start: var(--spaceS);
}

.modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spaceS);
    width: 100%;
}

.modal-footer2 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--spaceS);
    width: 100%;
}

.read-button {
    display: block;
    margin-inline: auto; 
}

iframe {
    max-width: 90%;
    height: auto;
    aspect-ratio: 9 / 16;
    display: block;
}

figure {
    min-width: 0;
}

.videowrapper {
    max-width: 100%;
    overflow: hidden;
}

.videowrapper iframe {
    max-width: 100%;
    display: block;
    margin-inline: auto;
    block-size: revert;
	inline-size: 100%;  
    margin-block-end: var(--spaceS);
}

.videowrapper iframe[src*="youtube"] {
    aspect-ratio: 16 / 9;
}

.audiowrapper {
    width: 100%;
    padding: var(--spaceS);
    background-color: var(--dark);
    margin-block-end: var(--spaceS);
    @media (width <600px){
        width: 80%;    
    }
}

audio {
	block-size: revert;
	inline-size: 100%;
}

.embed-wrapper {
    justify-content: center;
    display: flex;

}

@media (width < 600px) {
    dialog.modal-dialog {        
        padding: var(--spaceS);
        font-size: calc(var(--textS) * 0.9);
    }

    .arena-button, .visit-button, .close-button, .modal-title {
        font-size: (var(--textS));
    }

    .arena-button, .visit-button, .close-button {
        padding: calc(var(--spaceS)*0.5);
    }


}

.image {
    cursor: pointer;
}

.web-buttons {
    background-color: var(--dark);
    color: var(--brat);
    font-family: var(--font-family2);
    font-size: var(--textS);
    padding: var(--spaceS);
    cursor: pointer;

    &:hover {
        transform: scale(1.1);

        @media (width < 600px) {
            transform: none;
        }
    }

    a {
        display: block;
        width: 100%;
        height: 100%;
        text-decoration: none;
    }
}

.bottom-back {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    text-align: center;
}

.buttontext {
    color: var(--brat);
    font-family: var(--font-family2);
}

.buttontext, #play {
        font-size: var(--textS);
}


svg {
    fill: var(--dark);
    transform: scale(1.3);
    padding: calc(var(--spaceS)*0.5);
}

#pause-icon {
    display: none;
}

#play-icon {
    display: block;
}

.polaroid {
    background-color: var(--light);
    padding: var(--spaceS);
    padding-block-end: calc(var(--spaceS)*3);
    filter: drop-shadow(0 0.2rem 0.2rem rgb(0 0 0 / 20%));

    img {
        display: block;
        width: 100%;
    }
}