/* Constants */
:root {
    --navbarColor: #222222;
    --highlightPrimary: #333333;
    --highlightSecondary: #444444;
    --textPrimary: #CCCCCC;
    --textSecondary: #DDDDDD;
    --logoBackgroundColor: #204d12;
    --desktopNavBarHeight: 20px;
    --mobileNavBarHeight: 60px;
    --mainBackground: #608B4E;
}

/*******************************************************************************
*   Navigation bar
*   Elems:
*       Logo: Company logo
*       Home: Image, slogan, link to socials
*       About us: Team picture, description
*       Contact us: Auto-email page
*       FR/EN: Determine display language
*******************************************************************************/
/*#region Navigation Bar*/
/*************************************
*   Desktop
*************************************/
/* The bar itselt */
.desktopNavigation {
    background-color: var(--navbarColor);
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.desktopNavigation a {
  color: var(--textPrimary);
  padding: var(--desktopNavBarHeight) 16px;
  text-decoration: none;
  font-size: 18px;
}

/* Right-aligned section inside the top navigation */
.desktopNavigationLeft * {
    float: left;
}

/* Right-aligned section inside the top navigation */
.desktopNavigationRight * {
    float: right;
}

/* Change the color of links on hover */
.desktopNavigation a:hover {
  background-color: var(--highlightSecondary);
  color: var(--textSecondary);
}

/* Add a color to the active/current link */
.desktopNavigation a.active {
    background-color: var(--highlightPrimary);
    color: var(--textPrimary);
}

.desktopLogo {
    display: flex;
    background-color: var(--logoBackgroundColor);
    width: 6em;
}
.desktopLogo img {
    margin: auto;
    height: calc(20px + calc(2 * var(--desktopNavBarHeight)));
}

/*************************************
*   Mobile
*************************************/
/* Controls the button that drops down the navigation bar in mobile version */
/* Style the navigation menu */
.mobileNavigation {
    overflow: hidden;
    background-color: var(--navbarColor);
    position: relative;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.mobileNavigation .mobileNavigation {
    display: none;
}

/* Style navigation menu links */
.mobileNavigation a {
    color: var(--textPrimary);
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
}

/* Style the hamburger menu */
.mobileNavigation a.icon {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    padding: 0;
}

.mobileNavigation img {
    height: var(--mobileNavBarHeight);
    width: var(--mobileNavBarHeight);
    margin: 0;
}

/* Add a color to the active/current link */
.mobileNavigation a.active {
    background-color: var(--highlightPrimary);
    color: var(--textPrimary);
}

.mobileLogo {
    display: flex;
    background-color: var(--logoBackgroundColor);
    width: 4em;
}
.mobileLogo img {
    margin: auto;
    height: var(--mobileNavBarHeight);
}
/*#endregion Navigation Bar*/

/*******************************************************************************
*   Floating menu
*   Elems:
*       Instagram: logo and link
*       Linkedin: logo and link
*       X: logo and link
*******************************************************************************/
/*#region Floating Menu*/
@media only screen and (min-width: 1025px) {
    .floating-menu {
        font-family: sans-serif;
        background: rgba(34, 34, 34, 0.9);
        padding: 5px;;
        width: 60px;
        z-index: 100;
        position: fixed;
        top: 10%;
        right: 40px;
        border-radius: 20px;
    }
    
    .floating-menu a {
        font-size: 0.9em;
        display: block;
    }
    
    .floating-menu img {
        display: block;
        width: 80%;
        margin: 10px auto 10px auto;
    }
}

/* Changes that are made when the website is opened on phone/tablet */
@media only screen and (max-width: 1024px) {
    .floating-menu {
        font-family: sans-serif;
        background: rgba(34, 34, 34, 0.9);
        padding: 5px;;
        width: 60px;
        z-index: 100;
        position: fixed;
        bottom: 0px;
        left: calc(50% - 30px);
        border-radius: 20px;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }
    
    .floating-menu a {
        font-size: 0.9em;
        display: block;
    }
    
    .floating-menu img {
        display: block;
        width: 80%;
        margin: 10px auto 10px auto;
    }

    .floating-menu a img {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}
/*#endregion Floating Menu*/

/*******************************************************************************
*   General
*******************************************************************************/
/*#region General*/

/*Body*/
body {
    background-color: var(--mainBackground);
    font-family: Arial;
    margin: 0;
    padding: 0;
}

form {
    width: 98%;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
}
/*#endregion General*/

/*******************************************************************************
*   Panels By Width
*******************************************************************************/
/*#region Panels By Width*/

/* The image */
.wrapped {
    float: left;
    margin: 30px 30px 20px 0;
    width: 40%;
}

/*#endregion Panels By Width*/

/*******************************************************************************
*   Home page general
*******************************************************************************/
/*#region Home Page*/
/* Defines the header on the homepage */
.hero h1 {
    color: white;
    font-size: 3em;
}

/* Background image used on homepage */
.homepage {
    background-image: url(Resources/Cabin-Like_Tiny_Home_in_the_Woods.jpg);
}
/*#endregion Home Page*/

/*******************************************************************************
*   Contact Us Page
*******************************************************************************/
/*#region Contact Us*/
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */ 
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
    background-color: #04AA6D;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
  
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
    background-color: #45a049;
}

/* Makes the text box size of the long answer in the contact us longer */
.long {
    height: 200px;
}

#contactUsContent {
    margin: 0 7% 240px 7%;
}

/*#endregion Contact Us*/

/*******************************************************************************
*   Mobile vs Desktop
*******************************************************************************/
/*#region Mobile vs Desktop*/
/* Changes that are made when the website is opened on desktop/laptop */
@media only screen and (min-width: 1025px) {

    .homepage {
        background-size: cover;
    }

    .mobileNavigation {
        display: none;
    }

    .container {
        margin: 0 7% 0 7%;
    }

    .hero {
        position: absolute;
        bottom: 25%;
        left: 15%;
    }
}

/* Changes that are made when the website is opened on phone/tablet */
@media only screen and (max-width: 1024px) {

    .homepage {
        background-size: auto;
    }

    .desktopNavigation {
        display: none;
    }

    .mobileNavigation {
        display: block;
    }

    #mobileNavigationLinks {
        display: none;
    }

    .container {
        margin: 0 0 240px 0;
    }

    .hero {
        position: absolute;
        bottom: 35%;
        left: 10%;
    }
}

/* General container for mobile & desktop flex box integration */
.container {
    padding: 1em;
    background-color: var(--mainBackground);
}

.container * {
    text-align: justify;
}
/*#endregion Mobile vs Desktop*/