:root {
    --main-circle-size: 230px;
    --secondary-circle-size: 350px;
    --main-radius: calc(var(--main-circle-size)/2);
    --secondary-radius: calc(var(--secondary-circle-size)/2);
    --mouse-x: 0px;
    --mouse-y: 0px;
    --target-left: 1px;
}

/*gets rid of blue highlight on buttons*/
button:focus {
    outline: 0;
}

/* NAV BAR */
#circle-nav {
    position: fixed;
    z-index: 5;
    height: 250px;
    width: 250px;
    top: 10px;
    left: 10px;
}

#skills-list {
    visibility: hidden;
    opacity: 0;
    position: relative;
    height: 500%;width: 210%;
    left: 0%;top: 100%;
    transition: visibility 0.6s ease-out, opacity 0.3s linear .2s;
    /* font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; */
    font-family: 'public-pixel';
    font-size: 20px;
    font-variant: all-small-caps;
    color: chartreuse;
    text-shadow: 3px 3px black, 2px 2px black;
    column-count: 2;
}

#skip-game {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    height: 50%;width: 100%;
    left: 150%;top: 0%;
    border-radius: 0;
    transition: visibility 0.6s ease-out, opacity 0.3s linear .2s;
}

.show {
    opacity: 1 !important;
    visibility: visible !important;
}

.hide {
    opacity: 0 !important;
}

/* Main button */
#circle-nav-home {
    position: absolute;
    border-radius: 50%;
    height: 150px; width: 150px;
    padding: 0;
    transition-duration: 0.3s;
}

#home_button {
    height: 100%;
    width: 100%;
}

.home-button-photo {
    position: absolute;
    height: 100%; width: 100%;
    border-radius: 50%;
    background: url('./img/Our-wedding.jpg') center / cover no-repeat;
    border: 2px solid black;
    cursor: pointer;
    transition: all .4s linear;
}

.home-button-photo:hover {
    transform: scale(1.05);
}

.home-button-photo.loaded {
    border: 2px solid chartreuse;
    opacity: .5;
    background-color: rgba(127, 255, 0, 0.384);
}

.transition-none {
    transition: none;
}

.transform-none {
    transform: none !important;
}

#gun-barrel {
    position: absolute;
    left: 30%; top: -30%;
    height: 100px; width: 50px;
    border: 2px solid black;
    background-color: chartreuse;
    visibility: hidden;
    z-index: -1;

}

#gun-barrel.active {
    visibility: visible;
    animation: appear 1s;
}

#bullet {
    position: fixed;
    border-radius: 50%;
    height: 50px; width: 50px;
    background-color: rgba(127, 255, 0, 0.384);
    border: 2px solid chartreuse;
    left: 50px;
    top: 50px;
    transition: all 1s;
    z-index: -2;
}
#bullet.move {
    left: var(--mouse-x);
    top: var(--mouse-y);
    transition: all 1s;
}
#caught-bug {
    visibility: hidden;
}
#caught-bug.caught {
    visibility: visible;
}

.target {
    visibility: hidden;
    position: fixed;
    left: var(--target-left);
    bottom: 0px;
    height: 50px; width: 50px;
}
.target.move {
    visibility: visible;
    bottom: 100%;
    transition: all 2s linear;
}
/* Child buttons */
.circle-nav-button {
    position: absolute;
    border-radius: 50%;
    height: 50px; width: 50px;
    cursor: pointer;
    padding: 0;
    background-color: rgba(127, 255, 0, 0.384);
    border: 2px solid chartreuse;
    font: italic normal normal 1em Impact, Charcoal, sans-serif;
    transition-duration: 0.3s;
}

@media all and (min-width: 768px) {
    .circle-nav-button:hover {
        background-color: chartreuse;
        border-color:black;
        height: 55px;
        width: 55px;
    }
    
    .circle-nav-button:hover div {
        opacity: 1;
        visibility: visible;
        transition: opacity .3s;
    }
}

.secondary-nav-circle-deg165 div, .secondary-nav-circle-deg189:hover div {top: 0;}

.secondary-nav-circle-deg213 div, .secondary-nav-circle-deg237:hover div {top: -15px;}

.secondary-nav-circle-deg261 div, .secondary-nav-circle-deg285:hover div {top: -40px; left: auto;}

.exp-name {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    height: 70%;
    width: 100%;
    top: -20px;
    left: -110%;
    transform: rotate(180deg);
    font-size: larger;
    transition: opacity .3s;
    pointer-events: none; 
    text-shadow: 0 0 5px chartreuse;
}

.button-text {
    animation: rotate 2s 1 forwards;
    color: black;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-shadow: none;
}

.circle-child {
    top: 50%; left: 50%;
    margin: -25px;
}

/* what the buttons are positioned on */
.nav-circle {
    position: absolute;
    z-index: -1;
    top: 50%; left: 50%;
    border-radius: 50%;
}

#main-circle {
    margin-top: calc(-1*var(--main-radius)); margin-left: calc(-1*var(--main-radius));
    height: var(--main-circle-size); width: var(--main-circle-size);
    animation: rotate 2s 1 forwards, appear 2s 1 forwards;
}

.secondary-circle {
    height: var(--secondary-circle-size); width: var(--secondary-circle-size);
    margin-top: calc(-1*var(--secondary-radius)); margin-left: calc(-1*var(--secondary-radius));
    z-index: -2;
    opacity: 0;
    visibility: hidden;
    transition: all .9s cubic-bezier(0.4, 0, 1, 1);
}

.toggle-secondary-circle {
    opacity: 1;
    visibility: visible;
    transform: rotate(180deg);
}

/* positions on main nav circle */
.main-nav-circle-deg165 { transform: rotate(165deg) translate(var(--main-radius)) rotate(-165deg) ;}
.main-nav-circle-deg205 { transform: rotate(205deg) translate(var(--main-radius)) rotate(-205deg); }
.main-nav-circle-deg245 { transform: rotate(245deg) translate(var(--main-radius)) rotate(-245deg); }
.main-nav-circle-deg285 { transform: rotate(285deg) translate(var(--main-radius)) rotate(-285deg); }


/* positions on secondary nav circle */
    /* furthest left and furthest right buttons on circle */
.secondary-nav-circle-deg165 { transform: rotate(165deg) translate(var(--secondary-radius)) rotate(-165deg); }
.secondary-nav-circle-deg285 { transform: rotate(285deg) translate(var(--secondary-radius)) rotate(-285deg); }
    /* for 2 buttons inbetween */
.secondary-nav-circle-deg205 { transform: rotate(205deg) translate(var(--secondary-radius)) rotate(-205deg); }
.secondary-nav-circle-deg245 { transform: rotate(245deg) translate(var(--secondary-radius)) rotate(-245deg); }
    /* for 3 buttons inbetween */
.secondary-nav-circle-deg195 { transform: rotate(195deg) translate(var(--secondary-radius)) rotate(-195deg); }
.secondary-nav-circle-deg225 { transform: rotate(225deg) translate(var(--secondary-radius)) rotate(-225deg); }
.secondary-nav-circle-deg255 { transform: rotate(255deg) translate(var(--secondary-radius)) rotate(-255deg); }
    /* for 4 buttons inbetween */
.secondary-nav-circle-deg189 { transform: rotate(189deg) translate(var(--secondary-radius)) rotate(-189deg); }
.secondary-nav-circle-deg213 { transform: rotate(213deg) translate(var(--secondary-radius)) rotate(-213deg); }
.secondary-nav-circle-deg237 { transform: rotate(237deg) translate(var(--secondary-radius)) rotate(-237deg); }
.secondary-nav-circle-deg261 { transform: rotate(261deg) translate(var(--secondary-radius)) rotate(-261deg); }


@keyframes rotate {
    100% {
        transform: rotate(180deg);
    }
}
@keyframes appear {
    0%,25% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

 /*--------------------------------------------------
                    MEDIA BREAKS
 ---------------------------------------------------*/

 @media only screen and (max-width: 768px) {
    :root {
        --main-circle-size: 160px;
        --secondary-circle-size: 250px;
        --main-radius: calc(var(--main-circle-size)/2);
        --secondary-radius: calc(var(--secondary-circle-size)/2);
    }

    #circle-nav-home {
        height: 100px; width: 100px;
    }

    .circle-nav-button {
        height: 40px; width: 40px;
        font-size: 13px;
    }

    .circle-nav-button:active {
        height: 45px ; width: 45px;
        background-color: chartreuse;
        border-color:black;
    }

    .button-text {
        animation: none;
    }

    #main-circle {
        margin-top: calc(-1*var(--main-radius)); margin-left: calc(-1*var(--main-radius));
        height: 0; width: 0;
        animation: moveDown 1s 1 forwards;
    }
    
    .secondary-circle {
        z-index: -3;
        opacity: 0;
        transform: translateX(-100%);
        transition: all .7s ease-out;
    }
    
    .toggle-secondary-circle {
        opacity: 1;
        transform: translateX(0);
    }

    #circle-1 button {
        transform: rotate(180deg);
    }

    .exp-name {
        top: 0 !important;
        left: -110% !important;
    }

    .secondary-nav-circle-deg237 i {transform: rotate(180deg) !important;}

    /* game mode */
    .fa-3x {
        font-size: 2em !important;
    }

    #gun-barrel {
        height: 85px; width: 35px;
    }
    
    #bullet {
        height: 40px; width: 40px;
    }

    #skills-list {
        column-count: 4;
        height: auto;
        font-weight: lighter;
        font-size: 12px;
        font-variant: all-small-caps;
        position: fixed;
        top: unset; bottom: 10px;
        width: auto;
    }

    #skip-game {
        width: 135%;
    }

    /* Main buttons */
    .main-nav-circle-deg165 { transform: initial; left: 165px; top: 60px;}
    .main-nav-circle-deg205 { transform: initial; left: 215px; top: 60px;}
    .main-nav-circle-deg245 { transform: initial; left: 265px; top: 60px;}
    .main-nav-circle-deg285 { transform: initial; left: 315px; top: 60px;}
    /* secondary buttons */
    .secondary-nav-circle-deg165 { transform: initial; top: 210px; left: 110px;}
    .secondary-nav-circle-deg285 { transform: initial; top: 460px; left: 110px;}
    /* for 2 buttons inbetween */
    .secondary-nav-circle-deg205 { transform: initial; top: 260px; left: 110px;}
    .secondary-nav-circle-deg245 { transform: initial; top: 310px; left: 110px;}
    /* for 3 buttons inbetween */
    .secondary-nav-circle-deg195 { transform: initial; top: 210px; left: 110px;}
    .secondary-nav-circle-deg225 { transform: initial; top: 260px; left: 110px;}
    .secondary-nav-circle-deg255 { transform: initial; top: 310px; left: 110px;}
    /* for 4 buttons inbetween */
    .secondary-nav-circle-deg189 { transform: initial; top: 260px; left: 110px;}
    .secondary-nav-circle-deg213 { transform: initial; top: 310px; left: 110px;}
    .secondary-nav-circle-deg237 { transform: initial; top: 360px; left: 110px;}
    .secondary-nav-circle-deg261 { transform: initial; top: 410px; left: 110px;}

    @keyframes moveDown {
        0%{
            transform: translateY(-100%);
        }
        100%{
            transform: translateY(0);
        }
    }
}