/* Font import */
@import url("https://use.typekit.net/tcb0eld.css");



    :root{

/* CSS Color Key */
--background-color:hsl(201,100%,39%); /* Olympic Blue */
--color-background-card:hsl(0,0%,100%); /* White */
--color-background-text:hsl(0,0%,100%); /* White */
--color-button:hsl(38 100% 65.5%);
--color-text:hsl(0,0%,0%); /* Black */
--color-light-blue:hsl(201,64%,79%);
--color-green:hsl(149, 100%, 32%); /* Olympic Green */

--grid-margin:5rem;

    @media screen and (min-width: 600px) and (max-width: 992px) {
     body {
    background-color:var(--background-color);
        }
    }
}

html, body, p 
    {
    font-family: "Geologica", sans-serif;
}
    
body{
    background-color:hsl(201,100%,39%);
    box-sizing: border-box;
}


/* floating tab */
.floating__tab {
    display: inline-flex;
    position: fixed;
    top:36em;
    right:0em;
    z-index: 1;
}
    button{
    position: absolute;
    bottom:0;
    right:0;
    background-color: var(--color-button);
    color: black;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    border-radius:8px;
    font-size: 20px;
    margin:1rem; 
    transition-duration: 0.4s;
    cursor: pointer;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

/* olympic_logo */
.logo__container{        
    display: block;
    block-size: 70px;
    flex-direction: row;
    flex-flow: row wrap;
    background-color: hsl(0,0%,100%);
}

.logo img{
    width: 8rem;
    display: block;
    margin: auto;
    padding: 1rem;
    background-color: hsl(0,0%,100%);
}


/* NAV */
.nav_container_links{
        display: flex;
        flex-direction: row;
        flex-flow: row wrap;
        background-color: hsl(201,100%,39%); /* Olympic Blue */
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.8);
        justify-content: center;
        margin:auto;           
        

    .nav__links {
        list-style: none;
        display: flex;
        gap: 20rem;
        font-size: 30px;
        align-items: center;
        margin-top: 10px;
        margin-bottom: 10px;
        }

        li a:link, li a:visited {
            color: white;
            text-decoration: none;
            font-weight: bold;
            transition: color var(--transition-time) ease;
        }

/* hover link */
            li a:hover {
            color:hsl(38,96%,59%);
            }

/* selected link */
            .nav__links li a:active {
            color: black;
            background-color: white;
            padding:.4em;
            }            
}



/* HOME PAGE */

.home__container {
    position: relative;
    text-align: center;
    background-image:url(../img/luka-vovk-ht-unsplash.jpg);
    background-color:hsl(201,100%,39%,20%);
    background-size: cover;
    padding: 2rem 0 2rem 0;
    color:hsl(201,100%,39%);
    font-size: 50px;
    
    h1{
    background-color: hsla(0 0% 100% / 0.36);
    padding:.2em;
    }



.home_hero_image {
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    }

}

/* Home Cards */

#home__events {
    padding: 10rem;
    background-size: cover;
    background-repeat: no-repeat;

    .events__card-container {
        display: flex;
        justify-content: space-between;
        gap: 2rem;
    }

.events__card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
    background-color: white;
    width: 100%;

    box-sizing: border-box;

    h3 {
    max-width: 80rem;
    text-align: center;
    font-size: 2em;
    }
    p {
    max-width: 30rem;
    padding:1rem;
    }

    details > summary {
    border: none;
    cursor: pointer;
    list-style-position: outside;
    margin-left: 25px;
    flex: 1 0 auto;
    }

}

.event__desc {
    margin: 0 1rem;
    text-align: left;
    flex: 1 0 auto; /* allows the description to grow and fill space */
    }


/* Home Card Buttons */

.home_card_button
a:link, a:visited {
    background-color: var(--color-button);
    color: black;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius:8px;
    font-size: 20px;
    margin:1rem; 
    transition-duration: 0.4s;
    cursor: pointer;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    }


/* Hover */
a:hover {
    color: hsl(201 100% 39.2%);
    text-decoration: none;
    }

/* selected link */
a:active {
    color: white;
    background-color: hsl(201 100% 39.2%);
    text-decoration: none;
    }
}

/* Footer */

.row {
    display: -webkit-flex;
    display: flex;
    text-align: center;
    background-color:var(--color-light-blue);
    }

/* Create three equal columns that sits next to each other */
.column {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 10px;
    height: 50px;
    }
.footer__logo {
    width: 5rem;
    display: block;
    block-size: 50px;
    margin: auto;
    padding:.5rem;
    background-color:var(--color-light-blue);
    text-decoration: none;
    }

.footer__link-styles{
    a:link, a:visited{
    text-decoration: none;
    color:black;
    }
    a:hover {
    color: white;
    text-decoration: none;
    }
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
.row {
-webkit-flex-direction: column;
flex-direction: column;
}
}

.footer__copywrite {
    text-align: center;
    background-color:var(--color-light-blue);
    margin:auto;
    padding:.5rem;
    text-decoration: none;
}

/* Footer End */

/* END HOME */


/* Events Page */

.event__hero_container{
    background-image: url("img/event_header.jpg");
    background-color: hsl(112 42.4% 45.5%);
    background-size: cover;
    text-align: center;


.event_hero_image {
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    width: 100%;
    }


.hero__text {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    -webkit-text-stroke: 2px black;
    }
}

/* Events Cards */

.signup__card--container{
    display: flex; 
    flex-direction: column;
    margin:70px;
}

.signup__card--container div{
    background-color:var(--color-light-blue);
    margin:20px;
    padding:20px; 
    font-size: 24px;

    h3 {
    font-style: italic;
    text-decoration: underline;
    }
}

.signup__card--container img {
    float: left;
    width: 500px;
    height: 500px;
    padding:10px; 
    max-width: 100%;
} 

.signup__card {
    position: relative;

}

/* button */

.signup__card--container .register__button {
    a:link, a:visited {
    background-color: var(--color-button);
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius:8px;
    font-size: 30px;
    margin: 2rem;
    transition-duration: 0.4s;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    right:0;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    }
    a:link, a:visited {
    text-decoration: none;
    color: black;
    }

/* Hover */
    a:hover {
    color: white;
    text-decoration: none;
    }

    a:active {
    background-color: var(--background-color);
    }
}

.signup__card--container .website__button {
    a:link, a:visited{
    background-color: var(--background-color);
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding:10px;
    color:white;
}
    a:link, a:visited {
    text-decoration: none;
    }

/* Hover */
    a:hover {
    color: hsl(38,96%,59%);
    text-decoration: none;
    }



/* website links */

    a:link, a:visited {
    text-decoration: none;
    color: black;
    }

/* Hover */
    a:hover {
    color: white;
    text-decoration: none;
    }


/* selected link */
    a:active {
    color: black;
    background-color: white;
    text-decoration: none;
    }
}

/* disabled button */
    .signup__card--container
        button {
        padding: 14px 25px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        border-radius:8px;
        font-size: 30px;
        margin: 2rem;
        cursor: pointer;
        position: absolute;
        bottom: 0;
        right:0;
        background-color:var(--color-button);
        }

     .signup__card--container
        disabledbtn {
        opacity: 0.6;
        cursor: not-allowed;
        }

    .signup__card--container
        .date__box {
        border: 4px solid black;
        padding: 10px;
        text-align: center;
        background-color:white;
        font-size:20px;
        margin:2rem;
        border-radius:10px;
        position: absolute;
        top:0;
        right:0;
    }