/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Light/Dark Mode icom */
 #button{
    position:relative;
    top: 0;
    right: 0;
    cursor: default; 
    user-select: none;
    font-size: var(--wp--preset--font-size--x-large);
    z-index: 500;
}

/* create hover colour change on buttons */
button > svg, #button, .wp-block-file *+.wp-block-file__button{
    -webkit-transition: .4s;
    transition: .4s;
}

button:hover > svg, #button:hover, .wp-block-file *+.wp-block-file__button:hover{
    color: #686868;
    fill: #3a9da8;
}

.light #button:hover{
    color: #111111;
}

@media screen and (max-width: 800px){
    #button{
        font-size: 2rem;
    }
}

/* Light/Dark Mode icon end */

/* hamburger menu */
.wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open){
    margin-right: 0;
}

.is-menu-open .wp-block-navigation.items-justified-right{
    margin-top: 16vh;
    margin-right: 40%;
}

/* close menu */
.wp-block-navigation__responsive-container-close svg{
    margin-top: 20px;
    margin-right: 3rem;
}


/* changes the variables to the Light colour Mode pallete */
.light {
    --wp--preset--color--base: #FFFFFF;
    --wp--preset--color--contrast: #111111;
    --wp--preset--color--accent-1: #FFEE58;
    --wp--preset--color--accent-2: #F6CFF4;
    --wp--preset--color--accent-3: #3a9da8;
    --wp--preset--color--accent-4: #686868;
    --wp--preset--color--accent-5: #FBFAF3;
    --wp--preset--color--accent-6: 
color-mix(in srgb, currentColor 20%, transparent);
}

.light body{
    color: #686868;
}

/* Highlighting menu current page */
.current-menu-item, .wp-block-pages-list__item .current-menu-item .wp-block-navigation-item open-on-hover-click{
    color: #686868 !important;
}

a{
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}

.current-menu-item a{
    text-decoration: underline; 
}

/* change colour of current menu item */
.light .current-menu-item{
    color: #3a9da8 !important;
}

.light .current-menu-item:hover{
    color: #111111;
}

/* add animation to menu items */
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
    -webkit-transition: .4s;
    transition: .4s;
}

/* add animation to menu items */
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
    color: #3a9da8;
}

/* create a box around all menu elements in mobile menu on hover 
:where(.wp-block-navigation .is-menu-open a:where(:not(.wp-element-button)):hover)
*/
:where(.wp-block-navigation .is-menu-open a) {
    font-size: var(--wp--preset--font-size--x-large) !important;
}

:where(.wp-block-navigation .is-menu-open a:hover) {
    outline-width: 2px;
	outline-style: solid;
    text-decoration: none !important;
    color: #3a9da8;
}

.fade-in {
    opacity: 0;
    -webkit-animation: fadeIn ease-in;
    -moz-animation: fadeIn ease-in;
    animation: fadeIn ease-in;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: .6s;
    -moz-animation-duration: .6s;
    animation-duration: .6s;
}

.fade-in.one {
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

.fade-in.two {
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.fade-in.three {
    -webkit-animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

@-moz-keyframes fadeIn { 
    from { 
        opacity:0; } 
    to { 
        opacity:1; 
    } 
}

@keyframes fadeIn { 
    from { 
        opacity:0;  
    } to { 
        opacity:1; 
    } 
}

.pic{ width: 100%;}
.pic img{border-radius: 10px;}

@media screen and (max-width: 781px){
    .pic{ width: 56%;}
	.topSpacer{flex-basis: 20px;}
}

/* to make footer stick to bottom of page https://matthewjamestaylor.com/bottom-footer */
.wp-site-blocks {
   display:flex;
   flex-direction:column;

   /* fallback height */
   min-height:100vh;

   /* new small viewport height for modern browsers */
   min-height:100svh;
}
footer {
   margin-top:auto;
}

main{
    margin-top: 0 !important;
}

.a-video, .a-video > iframe{
    /*
    width: 100vw !important;
    */
    margin: 0 !important;
    position: relative;
    top: 0 !important;
    left: 0 !important;
}