@import url('https://fonts.googleapis.com/css2?family=Khand:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Khand:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chewy&family=Khand:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --std_Font_Khand:               'Khand';
    --std_Font_Bangers:             'Bangers';
    --std_Font_Chewy:               'Chewy';
    --std_Font_Luckiest_Guy:        'Luckiest Guy';
    --std_Font_Poppins:             'Poppins';
    --std_Font_Lato:                'Lato';
    --std_Font_Roboto:              'Roboto';
    --std_Font_Montserrat:          'Montserrat';  
    --std_Font_Oswald:              'Oswald';
    --std_Font_Raleway:             'Raleway';

    --std_Colour_C2E2ee:            #C2E2EE;
    --std_Colour_649CBE:            #649CBE;
    --std_Colour_2E5F7C:            #2E5F7C;
    --std_Colour_FAFAFA:            #FAFAFA;
    --std_Colour_F9F9F9:            #F9F9F9;
    --std_Colour_F7F7F7:            #F7F7F7;
    --std_Colour_FFFDF8:            #FFFDF8;
    --std_Colour_FDF6EC:            #FDF6EC;
    --std_Colour_FAF3E0:            #FAF3E0;
    --std_Colour_F5F7FA:            #F5F7FA;
    --std_Colour_F2F4F8:            #F2F4F8;
    --std_Colour_EEF1F5:            #EEF1F5;
    --std_Colour_Black:             black;
    --std_Colour_Royalblue:         royalblue;
    --std_Colour_Lightgrey:         lightgrey;
    --std_Colour_Beige:             beige;
    
    --std_Quarter_Rem:              0.25rem;
    --std_Half_Rem:                 0.5rem;
    --std_One_Rem:                  1.0rem;
    --std_OneHalf_Rem:              1.5rem;
    --std_Two_Rem:                  2.0rem;
    --std_TwoHalf_Rem:              2.5rem;
    --std_Three_Rem:                3.0rem;
    --std_ThreeHalf_Rem:            3.5rem;
    --std_FourHalf_Rem:             4.5rem;
    --std_Six_Rem:                  6.0rem;
    --std_Ten_Rem:                  10rem;
    --std_Fifteen_Rem:              15rem;
    --std_Nineteen_Rem:             19rem;
    --std_ThirtyEight_Rem:          38rem;
    --std_Forty_Rem:                40rem;
    --std_FortyOne_Rem:             41rem;
    --std_FortyThree_Rem:           43rem;
    --std_Sixtyfive_Rem:            65rem;

    --std_Time_Halfsec:             0.5s;
    --std_Time_Onesec:              1.0s;
    --std_Time_Twosec:              2.0s;

    --std_VH_5:                     5vh;
    --std_VH_10:                    10vh;
    --std_VH_15:                    15vh;
    --std_VH_20:                    20vh;
    --std_VH_30:                    30vh;
    --std_VH_40:                    40vh;
    --std_VH_45:                    45vh;
    --std_VH_46:                    46vh;
    --std_VH_50:                    50vh;
}

html {
    scroll-behavior: smooth;
}

* {
    font-family: var(--std_Font_Khand);
}

body {
    background-color: var(--std_Colour_C2E2ee);
}

.leftSideMenu {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50%;
    z-index: 1000;
    transform: translateY(-50%);
    gap: var(--std_One_Rem);
    border: solid var(--std_Colour_Royalblue) 1px;
    padding: var(--std_One_Rem);
    border-radius: var(--std_One_Rem);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    height: auto;
    justify-content: space-evenly;
    text-align: center;
    width: var(--std_FourHalf_Rem);
    left: var(--std_Half_Rem);
    margin: var(--std_Half_Rem) 0 
}

.leftSideMenu img {
    width: var(--std_TwoHalf_Rem);
    opacity: 0.5;
    transition: ease 1s;
    border: solid var(--std_Colour_Royalblue) 1px;
    border-radius: var(--std_TwoHalf_Rem);
    padding: var(--std_Half_Rem);
}

.leftSideMenu a:hover img {
    opacity: 1;
    transform: scale(1.1);
    border: solid var(--std_Colour_Black) 2px;
}

h1,
h2 {
    grid-column: 1 / -1;
}

#navigation,
header,
#slideshow,
#main,
#cards,
footer,
#socialmedia,
#disclaimer {
    margin: 0.5rem 0.25rem 0.5rem 7rem;
    border: solid var(--std_Colour_Royalblue) 1px;
    border-radius: var(--std_Half_Rem);
    padding: var(--std_Quarter_Rem);
}

hr {
    margin: 0.5rem 0.25rem 0.5rem 7rem;
    border: solid var(--std_Colour_Royalblue) 2px;
}

#navigation {
    height: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
}

#navigation a {
    text-decoration: none;
    font-size: var(--std_Two_Rem);
    color: var(--std_Colour_Royalblue);
    transition:  ease var(--std_Time_Onesec);
    background-image: url(../Images/fire1.jpg);
    background-clip: text;
    color: transparent;
    animation: motion 30s linear infinite;
}

@keyframes motion {
    to {
        background-position: -800px;
    }
}

.divider {
    font-size: var(--std_Six_Rem);
    font-weight: 100;
    color: var(--std_Colour_Royalblue);
}

#navigation a:hover {
    transform: scale(1.05);
}

header {
    height: var(--std_VH_30);
}

#slideshow {
    height: var(--std_VH_30);
}

#cards {
    height: auto;
}

#main {
    height: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

[class^="article"] {
    border: solid var(--std_Colour_Royalblue) 1px;
    border-radius: var(--std_Half_Rem);
    margin: var(--std_Quarter_Rem);
    padding: var(--std_Half_Rem);
    text-align: center;
    height: var(--std_VH_50);
}

footer {
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

#aboutMe,
#contactMe {
    border: solid var(--std_Colour_Royalblue) 1px;
    border-radius: var(--std_Half_Rem);
    margin: var(--std_Quarter_Rem);
    padding: var(--std_Half_Rem);
    text-align: center;
    height: var(--std_VH_40);
}

#aboutMe img {
    height: 32vh;
    width: auto;
    border-radius: var(--std_Half_Rem);
}

form {
    display: grid;
    grid-template-columns: 30% auto;
}

label,
input,
button,
select {
    margin: var(--std_Half_Rem);
    padding: var(--std_Half_Rem);
}

label {
    grid-column: 1;
    text-align: end;
}

input,
select {
    background-color: var(--std_Colour_C2E2ee);
    border: none;
    border-bottom: solid var(--std_Colour_Black) 1px;
}

button,
select {
    grid-column: 2;
}

button {
    width: fit-content;
    justify-self: center;
    background-color: var(--std_Colour_C2E2ee);
    border: none;
    border-bottom: solid var(--std_Colour_Black) 1px;
    transition: ease 1s;
    padding: var(--std_Half_Rem);
}

button:hover {
    transform: scale(1.1);
    text-transform: uppercase;
    background-color: var(--std_Colour_Black);
    color: var(--std_Colour_Beige);
    border-radius: var(--std_Half_Rem);
}

#links {
    height:var(--std_VH_5);
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    padding:var(--std_One_Rem);
}

#links a {     
    opacity: 0.5;
    transition: ease var(--std_Time_Onesec);
    border-radius: var(--std_TwoHalf_Rem);
    padding: var(--std_Half_Rem);
}

#links a:hover {
    opacity: 1.5;
    transform: scale(1.1);
}

.svg {
    width: var(--std_TwoHalf_Rem);
}

#disclaimer {
    height: auto;
    padding: var(--std_Quarter_Rem);
    text-align: center;
    font-size: var(--std_Half_Rem);

}

#copyright {
    font-size: var(--std_Half_Rem);
    margin: 0.5rem 0.25rem 0.5rem 7rem;
}

dialog {
    margin: auto;
    width: fit-content;
    overflow: hidden;
    border: solid black 1px;
    /* position: relative; */
    position: fixed;
    text-align: center;
    background-color:#C2E2EE;
}

dialog p {
    font-size: 1rem;
    margin: 0.5rem 0 0 0;
}

dialog button {
    top: 0;
    right: 0;
    z-index: 1000;
    font-size: 1rem;
    border: none;
    background-color: white;
    position: absolute;
    background-color:#C2E2EE;
}


/* ____________________________________________________________________ */

/* Mobile Views */

/* MOBILE PORTRAIT VIEW */
@media (max-width: 480px) {

    #navigation,
    .leftSideMenu,
    header,
    #slideshow,
    hr,
    #main,
    #cards,
    #aboutMe,
    #socialmedia,
    #disclaimer,
    #copyright 
                    {       display: none;              }
 
    footer          {       margin: 0;                  }

    footer h2       {       display: none;              }

    #contactMe      {       margin: 0;
                            width: 127%;
                            height: fit-content;        }
}

/* MOBILE LANDSCAPE VIEW */
@media (min-width:481px) and (max-width:767px) {

    #navigation,
    .leftSideMenu,
    header,
    #slideshow,
    hr,
    #main,
    #cards,
    #aboutMe,
    #socialmedia,
    #disclaimer,
    #copyright 
                    {       display: none;              }
 
    footer          {       margin: 0;
                            display: block;             }

    footer h2       {       display: none;              }

    #contactMe      {       margin: 0;
                            width: auto;
                            height: fit-content;        }
}

/* TABLET PORTRAIT VIEW */
@media (min-width: 768px) and (max-width:1023px) {

}

/* TABLET LANDSCAPE VIEW */
@media (min-width: 1024px) and (max-width:1199px) {

}

/* LAPTOP VIEW */
@media (min-width: 1200px) and (max-width: 1439px) {

}

/* DESKTOP VIEW */
@media (min-width: 1440px) {

}