/* Fonts & Imports */
@font-face {
    font-family: 'Geo';
    src: url(/pages/Agenda.IO/assets/fonts/digital\ geometric\ bold.ttf);
}
@font-face {
    font-family: 'Strip';
    src: url(/pages/Agenda.IO/assets/fonts/digistrip.ttf);
}
/* Universal */
*, *::before, *::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Geo', sans-serif;
}
/* Root */
:root {
    --font__family_Geo: 'Geo', sans-serif;
    --font__family_Standard: 'Strip', sans-serif;
    --clr__main_bkg_darkBlue: rgb(5, 11, 24);
    --clr__comp_bkg_champioOrange: #ffbd2e;
    --clr__white: rgb(255, 255, 255);
    --clr__black: rgb(0, 0, 0);
    --clr__darkGray: rgb(42, 42, 42);
    --clr__lightGray: rgb(60, 60, 60);
}



/* 4K Devices/Screens */

@media (max-width: 2560px) {
    /* HTML */
    html {
        scroll-behavior: smooth;
    }
    
    /* Body */
    body {
        width: 100%;
    } 
    /* Viewport Container */
    .container {
        width: 100%;
        min-height: 100vh;
        margin-left: auto;
        margin-right: auto;
        background: var(--clr__main_bkg_darkBlue);
    }
    /* Navigation */
    /* Navigation Links */
    .navbar {
        width: 100%;
        height: auto;
        padding: 1rem;
        display: flex;
        align-items: center;
        list-style-type: none;
    }
    .navbar li {
        margin: 0 2rem;
    }
    .navbar li a {
        text-decoration: none;
        display: block;
        color: black;
        font-size: .5rem;
        letter-spacing: .15rem;
    }
    .agenda-wrapper {
        width: 100%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        padding: 4rem 1rem 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .agenda-header {
        width: 100%;
        height: auto;
        padding: 4rem 1rem 0;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
    }
    .agenda-header h1 {
        color: var(--clr__white);
        letter-spacing: .3rem;
        font-family: var(--font__family_Geo);
        text-shadow: 1p 1px 2px var(--clr__comp_bkg_champioOrange);
        margin-bottom: 2rem;
    }
    .agenda-header p {
        width: 100%;
        min-width: 360px;
        max-width: 375px;
        font-size: 14px;
        text-align: center;
        color: var(--clr__white);
        letter-spacing: .25rem;
        margin-bottom: .5rem;
    }
    .agenda-header p:nth-child(3) {
        font-size: 10px;
    }
    .pop-one {
        color: white;
    }
    /* Agenda */
    .agenda-container {
        width: 100%;
    }
    .agenda-controls {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        background: var(--clr__main_bkg_darkBlue);
    }
    .agenda-controls > input {
        display: block;
        width: 50%;
        height: 30px;
        padding: .5rem;
        margin-left: auto;
        margin-right: .5rem;
        border-radius: 4px;
        color: var(--clr__main_bkg_darkBlue);
        border-bottom:inset 4px solid rgba(255, 189, 46, .8);
        box-shadow: 1px 1px 3px rgba(255, 255, 255, .9);
    }
    .agenda-controls > button {
        padding: .5rem 1rem;
        border-radius: 4px;
        margin-right: auto;
        background: var(--clr__main_bkg_darkBlue);
        color: var(--clr__white);
        border: none;
        outline: none;
        transition: all 300ms ease-in;
    }
    .agenda-controls > button:hover {
        color: var(--clr__black);
       background: var(--clr__comp_bkg_champioOrange);
    }
    
    /* Agenda List */
    .agenda-list {
        width: 100%;
        height: 25vh;
        padding-top: 2rem;
        background: var(--clr__main_bkg_darkBlue);
    }
    .list-container {
        width: 75%;
        list-style: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: var(--clr__white);
        border-radius: 4px;
        margin-left: auto;
        margin-right: auto;
        /* border-bottom: 4px solid var(--clr__main_bkg_darkBlue); */
        /* box-shadow: 1px 4px 2px var(--clr__lightGray); */
    }
    .list-box {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .list-btn-box {
        width: 40%;
        margin-right: 0;
        margin-left: auto;
        display: flex;
        flex-direction: row;
        align-items: center;

        padding: .5rem 0;
    }
    .list-input {
        width: 60%;
        border: none;
        margin-left: auto;
        padding-left: 1rem;   
        font-size: .5rem;
        overflow-x: scroll;
    }
    .list-input:focus {
        border: none;
        outline: none;
    }
    .btn {
        display: inline-block;
        margin: 0 .5rem;
        background: transparent;
        outline: none;
        border: none;
        cursor: pointer;
    }
    .btn-img {
        width: 18px;
        height: 18px;
    }
    .edit-btn {
        display: inline-block;
        width: fit-content;
        color: var(--clr__comp_bkg_champioOrange);
        letter-spacing: .25rem;
        margin: 0 .5rem;
        background: transparent;
        border: none;
        cursor: pointer;
    }
    
    /* Utilty Classes */
    .trans-slw-all {
        transition-property: all;
        transition-duration: 2s;
    }
    .trans-reg-all {
        transition-property: all;
        transition-duration: 1s;
    }
    .trans-fast-all {
        transition-property: all;
        transition-duration: 400ms;
    }
    .trans-ease {
        -webkit-transition-timing-function: ease;
    }
    .code-h2 {
        width: 100%;
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        color: var(--clr__white);
        text-decoration: underline;
        text-decoration-color: var(--clr__comp_bkg_champioOrange);
    }
    .code-wrapper {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: auto;
        padding: 0;
    }
    .html-code-wrapper {
        width: 100%;
        height: auto;
        padding: 1rem 0;
        margin: 0 auto;
        background: var(--clr__main_bkg_darkBlue);
        text-align: center;
        display: flex;
        flex-direction: column;
        row-gap: 2rem;
        position: relative;
    }
    .html-code-wrapper img {
        width: 300px;
        height: 300px;
        margin: 0 auto;
        object-fit: cover;
        transition: all ease-in 400ms;
        border: 1px solid white;
        box-shadow: .5px 1px 1px rgba(255, 255, 255, .4);
        transition: all 700ms ease-in-out;
    }
    .html-code-wrapper img:hover {
        transform: scale(150%);
        z-index: 10;
    }
    .img1 {

        grid-area: img1;
    }
    .img2 {

        grid-area: img2;
    }
    .img3 {

        grid-area: img3;
    }
    .img4 {

        grid-area: img4;
    }

    }
    
    /* 1440p Devices/Screens */
    
    @media (max-width: 1440px) {
    /* HTML */
    html {
        scroll-behavior: smooth;
    }
    
    /* Body */
    body {
        width: 100%;
        max-width: 1440px;
    }
    
    /* Viewport Container */
    .container {
        width: 100%;
        padding-left: .5rem;
        padding-right: .5rem;
        margin-left: auto;
        margin-right: auto;
        overflow-x: hidden;
    }
    
    }
    
    /* Laptops Default */
    
    @media (max-width: 963px) {
    /* HTML */
    html {
        scroll-behavior: smooth;
    }
    
    /* Body */
    body {
        width: 100%;
        max-width: 963px;
    }
    
    /* Viewport Container */
    .container {
        width: 100%;
        padding-left: .5rem;
        padding-right: .5rem;
        margin-left: auto;
        margin-right: auto;
        overflow-x: hidden;
    }
    
}
    /* Smallest Devices */
    
    @media (max-width: 845px) {
    /* HTML */
    html {
        scroll-behavior: smooth;
    }
    
    /* Body */
    body {
        width: 100%;
    }
    
    /* Viewport Container */
    .container {
        width: 100%;
        height: auto;
        min-height: 100vh;
        margin-left: auto;
        margin-right: auto;
        padding: 0;
        overflow-x: hidden;
    }
    .navbar {

    }
    .navbar li {
        margin: 0 auto;
        padding: .25rem;
    }
    .navbar li a {
        padding: .5rem .25rem;
        text-align: center;
        font-size: .5rem;
    }
    .agenda-wrapper {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .agenda-header {
        padding-top: 2rem;
        display: flex;
        flex-direction: column;
    }
    .agenda-header p {
        font-size: 14px
    }
    .agenda-header p:nth-child(3) {
        font-size: 10px;
    }
    .agenda-header .pop-one {
        color: white;
    }
    .agenda-controls {
        padding: 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .agenda-controls input {
        width: 100%;
        margin: 0 auto 1rem;
    }
    .agenda-controls button {
        margin: 0 auto;
    }
    .edit-btn {
        font-size: .5rem;
    }
    .btn-img {
        width: 10px;
        height: 10px;
    }
}