/* --------- Imports --------- */

/* Google Fonts: Montserrat (all normal font-weights), Fira Sans (all normal font-weights)  */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@100;200;300;400;500;600;700;800;900&family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* --------- Body --------- */

/* applying general styles to all pages */
body{
    /* reset defaults */
    padding: 0;
    margin: 0;
    border:0;
    /* incl.s padding and border within total height/width */
    box-sizing: border-box;
    /* sets base text content style  */
    color: #2f4858;
    font-family: Montserrat, sans-serif;
    background-color:rgba(241, 251, 255, 0.75);
}

/* body padding for pages with the fixed header */
.header-space{
    padding-top: 50px;
}

/* --------- Homepage styles --------- */

/* header style for homepage*/
#homepage-header {
    width:100%;
    background-color:rgba(0, 160, 243, 0.4);
    padding:1% 0;
    height:auto;
}

/* homepage main heading */
#homepage-header h1{
    color: #f1fbff;
    text-transform: uppercase;
    word-spacing:5px;
    text-align:center;

    padding: 0.5% 2%;
    margin:1% 5%;
    border: 1px solid #f1fbff;
    border-radius: 4px;
    background-color:rgba(30, 70, 95, 0.9);
}

/* hover effect on homepage main heading */
#homepage-header h1:hover{
    letter-spacing: 0.2em;
    border-radius: 8px;
    background-color:rgba(0, 160, 243, 0.70);
    transition-duration: 0.5s;
    transition-timing-function: ease-out;
}

/* header style also for other pages' sections with h2 headings*/
.main-headings {
    color: #f1fbff;
    font-weight:lighter;
    text-transform: uppercase;
    word-spacing:5px;

    border-radius: 4px;
    border:1px solid #f1fbff;
    box-sizing: border-box;
    background-color:rgba(47, 72, 88, 0.75);
    
    /* for responsivity */
    width: 100%;
    height: auto;
}

/* centralizing the h2 content for main headings */
.main-headings h2{
    /* Credit: https://stackoverflow.com/questions/5703552/how-can-i-center-text-horizontally-and-vertically-inside-a-div-block (For: Approach 2 - Flexbox method) */
    display:flex;
    align-items: center;
    justify-content: center;
}

/* welcome paragraph section */
#welcome-para{
    color: #f1fbff;
    text-align:center;

    padding: 1% 0;
    width:100%;
    background-color:rgba(47, 72, 88, 0.9);
}

/* welcome paragraph h2 heading */
#welcome-para h2{
    text-transform: uppercase;
    margin:10px;
}

/* welcome paragraph content */
#welcome-para p{
    font-family: "Fira Sans", sans-serif;
    font-weight:300;
    margin:10px;
}

/* main navigation menu nav */
#main-nav{
    width: 100%;
    box-sizing: border-box;

    /* stacking the main-nav-links in a column, spaced evenly in center of the nav */
    display:flex;
    align-items: center;
    flex-direction:column;
    justify-content: space-evenly;
}

/* background image for the homepage */
#homepage-body{
    /* the homepage background image with a #f1fbff white gradient over it as an overlay to not distract from the page content*/
    background-image: linear-gradient(rgba(241, 251, 255, 0.2),rgba(241, 251, 255, 0.2)), url("../images/man-bouldering.jpg");
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center; 
}

/* main navigation menu links */
.main-nav-link{
    color:#f1fbff;
    text-transform: uppercase;
    text-decoration: none;
    text-align:center;
    font-size: x-large;
    font-weight: 600;
    
    border-radius: 4px;
    border: 2px solid #f1fbff;
    background-color:rgba(0, 160, 243, 0.8);
    
    width: 40%;
    padding: 3% 2%;
    
    /* positioning the text centrally */
    /* credit: (Approach 2 - Flexbox method) */
    display:flex;
    align-items: center;
    justify-content:center;
}

/* icon breathing space for main nav menu and main headings */
.main-nav-link img, .main-headings img{
    margin-right:10px;
}

/* hover effects for the main-nav links */
.main-nav-link:hover{
    color:#f1fbff;
    letter-spacing: 0.2em;

    background-color:rgba(47, 72, 88, 0.75);
    border-radius:8px;

    transition-duration: 0.5s;
    transition-timing-function: ease-out;
}

/* --------- Footer --------- */

/* footer styling across all pages */
.footer{
    color: #f1fbff;
    background-color:rgba(47, 72, 88, 0.9);
    padding: 0.5% 0;
    width:100%;

    /* to center the child div elements */
    display:flex;
    align-items: center;
}

/* footer-left/-right divs */
.footer div{
    /* inherit width from footer */
    width: inherit;
    margin: 0 5%;
}

/* ul of links footer-left */
.footer-left{
    display:flex;
    justify-content: flex-start;
    gap:10%;
}

/* ul of links footer-right */
.footer-right{
    display:flex;
    justify-content: flex-end;
    gap:10%;
}

/* footer-left/-right div uls */
.footer ul{
    list-style-type: none;
    padding:0;
}

/* links in the footer-left */
.footer-links{
    color: #f1fbff;
    text-decoration: none;
    text-transform:uppercase;
    font-weight: 400;

    padding: 5px;
    border: 1px solid #f1fbff;
    border-radius: 4px;
}

/* hover effect for footer links (social media and pages) */
.social-media img:hover, .footer-links:hover{
    background-color:rgba(0, 160, 243, 0.5);
    border-radius: 8px;
}

/* --------- The 3 info pages' headers --------- */

/* page header styles */
.pages-header{
    overflow: auto;
    position:fixed;
    top: 0;
    height: 50px;
    width:100%;
    /* high enough to stay on top */
    z-index:1;
    background-color:rgba(0, 160, 243, 0.5);
}

/* h1 headings in the pages' header */
.pages-header h1{
    color:#f1fbff;
    font-size: 130%;
    text-transform:uppercase;
    word-spacing: 2px;

    border: 1px solid #f1fbff;
    border-radius:4px;
    background-color:rgba(47, 72, 88, 0.6);

    float:left;
    padding: 2px 8px;
    margin:8px 5px 5px 5px;
}

/* hover effect for h1 headings in the pages' header */
.pages-header h1:hover{
    color:#f1fbff;
    letter-spacing: 0.1em;
    transition-duration: 0.5s;
    transition-timing-function: ease-out;

    border-color:#f1fbff;
    border-radius: 8px;
    background-color: rgba(0, 163, 245, 0.8);
}

/* links in the pages' header */
.pages-header a{
    color:#f1fbff;
    text-decoration: none;
}

/* pages' header nav ul */
.pages-nav ul{
    float:right;
    margin: 5px;
    padding:0;
}

/* pages' header nav li items*/
.pages-nav li{
    list-style-type: none;
    float:left;
    margin: 3px 20px 0 20px;
    padding: 0 10px;
}

/* opacity for the header nav icons */
.pages-nav img{
    opacity:0.75;
}

/* opacity for the header nav icon relating to the user's current page */
.pages-nav .current-page{
    opacity:1;
}

/* hover effect for pages' header nav icons */
.pages-nav img:hover{
    border-radius: 8px;
    background-color: #f1fbff;
}

/* hover effect for pages' header nav icon relating to the user's current page */
.pages-nav .current-page:hover{
    background-color:rgba(47, 72, 88, 0.75);
}

/* --------- The 3 info pages fixed links --------- */

/* fixed-links on the page bottom right hand side */
.fixed-links{
    list-style-type: none;
    text-align:center;

    position: fixed;
    bottom: 0;
    right: 0;
    
    padding:0;
    margin:10px 10px 100px 10px;
}

/* breathing space for fixed-links li items */
.fixed-links li{
    margin:2px;
    padding:5px;
}

/* fixed-links text links styles */
.fixed-links a{
    font-weight:500;
    text-decoration: none;
    text-transform: uppercase;

    color:rgba(47, 72, 88, 0.75);
    padding:5px;
}

/* fixed-links icon links styles */
.fixed-links-icon{
    padding: 5px;
    opacity:0.75;
}

/* hover effect on fixed-links text links */
.fixed-links-words:hover {
    color: #f1fbff;
    background-color:rgba(0, 160, 243, 0.5);
    border-radius: 8px;
    opacity: 1;
}

/* hover effect on fixed-links icons links */
.fixed-links-icon:hover{
    border-radius: 8px;
    box-sizing: border-box;
    background-color:rgba(0, 160, 243, 0.5);
    opacity: 1;
}

/* --------- 3 info pages' headings and <p> styling --------- */

/* page section styling */
.page-section{
    text-align: center;
    margin:0 10%;
}

/* page section h3 styling */
.page-section > h3{
    text-transform: uppercase;
    text-align:center;
    margin-bottom:0;
    /* padding for sticky header space when using fixed-links nav (header height + 5px) */
    padding-top: 55px;
}

/* page section paragraph styling */
.page-section p, .page-section ul, .page-section ol{
    font-family: "Fira Sans", sans-serif;
    font-weight:400;
    line-height:150%;
    margin:2% 10%;
}

/* page section ol styling */
ol{
    text-align: left;
    padding:0;
}

/* page section ul styling */
ul{
    list-style-type: none;
    padding:0;
}

/* page section h4 styling */
.page-section h4{
    font-weight: bolder;
    text-transform: uppercase;
}

/* page section h5 styling */
.page-section h5{
    font-weight: bolder;
    text-transform: uppercase;
    margin:5px;
}

/* red mini disclaimer message */
.mini-disclaimer{
    color:#b81616;
    font-family: montserrat, sans-serif;
    text-transform: uppercase;
    font-weight:100;
    font-size: small;
}

/* styling links used within the text content */
.in-text-link{
    color:#2f4858;
    font-weight:bold;
    text-decoration: none;
}

/* --------- Info-tiles styling --------- */

.info-tiles > p{
    width:100%;
}

.info-tiles{
    display:flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin-bottom:2%;
}

.info-tiles h4{
    color:#2f4858;
    width:100%;
    margin:10px 2px 15px 2px;
}

.info-tiles div{
    border: 1px solid rgba(0, 160, 243, 1);
    border-radius:4px;
    background-color:rgba(0, 160, 243, 0.5);

    /* styling so that before the user hovers, just the term name is visible */
    width:200px;
    height:30px;
    overflow:hidden;

    padding: 5px;
    margin: 5px;
}

/* hover effect */
.info-tiles div:hover{
    width:200px;
    height:auto;
    overflow:auto;

    color:#f1fbff;
    background-color:rgba(47, 72, 88, 0.75);

    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}

.info-tiles h5{
    font-size:90%;
    font-weight:700;
    text-transform: uppercase;

    padding:5px;
    margin:0;
    
    border-left: 5px groove rgba(241, 251, 255, 0.75);
    border-top: 5px ridge rgba(241, 251, 255, 0.75);
}

.info-tiles div p{
    text-align: left;
    line-height: 125%;
    font-weight: 200;

    border-right: 5px groove rgba(241, 251, 255, 0.75);
    border-bottom: 5px ridge rgba(241, 251, 255, 0.75);

    padding:5px;
    margin: 0;
}

/* --------- Form styling --------- */

/* centralizing the form */
form{
    padding: 10px 5px;
    margin:5% 0;

    display:flex;
    flex-direction: column;
    align-items: center;
}

/* fieldset styling */
fieldset{
    text-transform: uppercase;
    text-align: center;
    font-weight:600;

    border-radius: 4px;
    border:2px solid#2f4858;

    width:550px;
    margin: 10px 2px 2px 0;

    display:flex;
    flex-direction: column;
    align-items: center;
}

/* hover effect to chage the fieldset border color when the user hovers over it */
fieldset:hover{
    border:2px solid#00a0f3;
    color:#00a0f3;
}

/* styling the form labels */
form label{
    font-weight:400;
    font-size:smaller;
    text-transform: capitalize;
    font-family: "Fira Sans", sans-serif;
    
    margin:2px
}

/* adding a small left side margin so the user's curser has some space when user clicks to type */
#user-name, #user-email, #textarea-chat{
    padding-left:5px;
}

/* styling the form textarea */
textarea{
    font-weight:400;
    font-family: "Fira Sans", sans-serif;

    border:1px solid #2f4858;
    border-radius: 4px;

    display:block;
    margin-top:10px;
}

/* shrinking the [optional] legend text */
.optional{
    font-size: smaller;
    text-transform: lowercase;
}

/* bringing the newletters check boxes closer to their labels */
#newsletters label, #newsletters input{
    margin: 0;
}

/* styling submit/reset input buttons*/
.submit-reset {
    color:#2f4858;
    font-family: Montserrat, sans-serif;
    text-transform: uppercase;
    font-size: medium;
    font-weight:600;

    background-color: rgba(241, 251, 255, 0.75);
    margin:2px 0;

    border:2px solid #2f4858;
    border-radius:4px;
}

/* hover effect for submit/reset input buttons border color */
.submit-reset:hover{
    border:2px solid#00a0f3;
    color:#00a0f3;
}

/* highlight form/credits links when on the page */
.current-footer-link{
    background-color:rgba(0, 160, 243, 0.5);
    border-radius: 8px;
}

/* --------- Across all pages --------- */

/* setting min-height for main/first large section of each page to fill the viewport and avoid white space below the footer on bigger screen */
.page-min-height{
    min-height: 100vh;
}

/* --------- As-Seen-At-Tokyo-2020 page --------- */

/* embedded video (iframe element) styling */
.videos{
    /* reccomended by YouTube as the optimum size for this video */
    width: 560px; 
    height: 315px;

    border:2px solid #2f4858;
    border-radius:4px;
}

/* olympic quote */
blockquote{
    padding:2px;
}

/* primarily for hr elements which break up smaller sections within larger sections  */
.half-width{
    width:50%;
}

/* styling images of olympic medalists */
.medalists img{
    border-radius:50%;
    border-width:3px;
    border-style: solid;
}

/* hover effect for images of olympic medalists */
.medalists img:hover{
    border-width:8px;
    transition-duration: 0.1s;
}

/* styling medalists content */
.medalists p{
    margin-bottom:0;
}

/* styling medalists figure */
.medalists figure{
    margin-top:5px;
}

/* styling medalists figcaption link */
figcaption a{
    font-size: small;
    text-decoration: none;
    color:rgba(47, 72, 88, 0.75);
}

/* border colors for the medalists images */
.gold{
    border-color: #ffd700;
}
.silver{
    border-color: #c0c0c0;
}
.bronze{
    border-color: #CD7F32;
}

/* styling the medalists sections in rows */
.flex-row{
    display:flex;
    flex-direction:row;
    justify-content: center;
}

/* --------- Media Queries -------- */

/* media queries for screen sizes 780px wide or less (i.e. tablet size) */
@media (max-width: 780px){

    /* resizing the homepage nav */
    .main-nav-link{
        font-size: x-large;
        width:60%;
        height:60px;
    }

    /* resizing and arranging the footer-links on the left */
    .footer-left{
        font-size:small;
        /* display: flex; */
        flex-direction: column;
    }

    /* adding breathing space for the list elements */
    .footer-left li{
        padding:5%;
    }

    /* increasing fixed header height to accommodate the nav icons and using flexbox to align the h1 and nav in a column */
    .pages-header{
        height:80px;
        display:flex;
        flex-direction: column;
    }

    /* removing its left float and centering the text */
    .pages-header h1{
        float:none;
        text-align: center;
    }

    /* increase the header space as a result of increasing the header height */
    .header-space{
        padding-top:80px;
    }

    /* increase space due to the fixed header height so that the fixed-link nav still takes the user to the right places */
    .page-section > h3 {
        padding-top: 85px;
    }

    /* using flexbox display to center the nav  */
    .pages-nav{
        display:flex;
        justify-content:center;
    }

    /* removing the float and margin from the header nav list to move it below the h1 */
    .pages-nav ul{
        float:none;
        margin:0;
    }

    /* reducing header nav margins to move the more neatly to the left */
    .pages-nav li {
        margin: 0 5px;
    }

    /* keeping the fixed-links from covering the footer */
    .fixed-links{
        width:60px;
        margin:0 0 150px 0;
    }

    /* moving fixed-link list items to the right so they dont cover the page content */
    .fixed-links li{
        float:right;
        margin:0;
    }

    /* reducing youtube video width to 90% of the page so it adapts from its optimum width to suit smaller screen sizes */
    .videos{
        width:90%;
    }

    /* readjusting medalists images to be in a column instead of rows */
    .flex-row{
        flex-direction: column;
    }

    /* readjusting the order of medalists when they are in a column */
    #janja, #alberto{order:1}
    #miho, #nathaniel{order:2}
    #akiyo, #jakob{order:3}

    /* resizing the contact form so it adapts to suit smaller screen sizes */
    fieldset{
        width:75%;
    }
}

/* further media queries for screen sizes 375px wide or less (i.e. smart phone size) */
@media (max-width: 375px){

    /* reducing homepage h1 size */
    #homepage-header h1{
        font-size:x-large;
    }

    /* resizing the homepage nav */
    .main-nav-link{
        font-size:large;
        width:80%;
        height:80px;
    }

    /* resizing the footer-links on the left */
    .footer-left{
        font-size:x-small;
    }

    /* lowering the fixed-links again slightly and reducing font-size*/
    .fixed-links{
        margin:0 0 100px 0;
        font-size: small;
    }

    /* adjusting pages' left and right widths at very small sizes */
    .page-section{
        margin:0 8px;
    }

    /* adjusting pages' paragraphs to have some breathing space */
    .page-section p{
        margin-bottom:5%;
    }
}