:root {
    --background: white;
    --font: #2A2641;
    --gflogo: rgb(7, 82, 149);
    --highlight: #1A73E8;
    --detail: #6e84a2;
    --curtom: rgb(80, 101, 122);
    --title: 6.5rem;
    --sectionheader: 4.5rem;
    --sectionsubtitle: 3.75rem;
    --sectiontext: 3rem;
    --imagetext: 2.25rem;
    --buttontext: 2.5rem;

    --background-gradient: linear-gradient(30deg, #f39c12 30%, #f1c40f);
    --darkblue: #343b5e;
    --grayblue: #3d4866;

}

html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 62.5%;
    font-family: Inter, sans-serif;
    background-color: var(--background);
    color: var(--font);
}

body {
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
}

.pointer{
    cursor: pointer;
}

.navbar {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    background-color: var(--gflogo);
    /* padding: 3px 20px; */
    z-index: 1;
}

.navbar-left {
    /* flex: 1; */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    flex-basis: min-content;
}

.navbar-middle {
    flex: 2;
    display: flex;
    justify-content: space-evenly;
}

.navbar-right {
    flex: 0.5;
    text-align: right;
    flex-basis: min-content;
}

.navbar a {
    /* margin-right: 50px; */
    text-decoration: none;
}

.logoholder {
    height: 7rem;
}

#logoholder {
    /*Prevents Patreon button from overflowing*/
    margin-right: 5px;
}

.logotext {
    color: var(--background);
    font-size: 3rem;
    font-weight: 600;
    margin-right: 5px;
}

.navbarlogo {
    display: flex;
    height: inherit;
    background-color: var(--background);
    border-radius: 0px 30px 30px 0px;
}

.patreon-button {
    background-color: var(--background);
    text-align: center;
    display: inline-flex;
    color: #1A73E8;
    padding: 8px 15px;
    border-radius: 20px;
    text-transform: uppercase;
    font-size: 1.25rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    transition: all 0.2s ease-in-out;
}

.patreon-button:hover {
    background-color: #1A73E8;
    color: var(--background);
    cursor: pointer;
}

.navdrops a {
    font-size: 2rem;
    color: var(--background);
    font-weight: 600;
}

.navdrops a:hover {
    color: var(--font);
}

/*Mobile Navbar*/
.navtitle {
    color: var(--background);
    font-size: 3rem;
    font-weight: 700;
}

.mobile-navbar {
    /*No show by default*/
    display: none;
}

.nav-left {
    margin-right: auto;
}

.nav-right {
    margin-left: auto;
}

.BurgerDropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    height: 7rem;
    background-color: var(--gflogo);
    color: var(--background);
    /* border-radius: 3px; */
    font-size: 4rem;
    padding: 3px 12px 7px 14px;
    border: none;
    cursor: pointer;
}

.BurgerDropdown-content {
    min-width: 170px;
    display: none;
    position: absolute;
    background-color: var(--background);
    box-shadow: -5px 5px 10px 3px rgba(0, 0, 0, 0.2);
    /* This changes the position of the dropdown menu to the left */
    transform: translateX(calc(-100% + 55px));
    z-index: 1;
    border-radius: 3px;
}

.BurgerDropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.BurgerDropdown-content a:hover {
    background-color: #f1f1f1;
    border-radius: 3px;
}

.BurgerDropdown:hover .BurgerDropdown-content {
    display: block;
}

.BurgerDropdown:hover .dropbtn {
    background-color: var(--background);
    color: var(--highlight);
}

#mobile-patreon-button {
    background-color: #1A73E8;
    color: var(--background);
    border-radius: 0px 0px 3px 3px;
}

#mobile-patreon-button:hover {
    color: var(--font);
}


/* Here goes the desktop dropdown formatting for the gears section STL/LASER/CALCULATORS/PLOTTERS */
.nav-dropdown {
    position: relative;
    display: inline-block;
}

.nav-dropdown-content {
    display: none;
    transform: translateX(-25%);
    min-width: 225px;
    position: absolute;
    z-index: 1;
    background-color: var(--background);
    border-radius: 3px;
    box-shadow: -5px 5px 10px 3px rgb(0 0 0 / 20%);
}

.nav-dropdown-content a {
    display: block;
    padding: 8px 16px;
    text-decoration: none;
    color: var(--font);
    border-radius: 3px;
    background-color: var(--background);
}

.nav-dropdown-content a:hover {
    background-color: var(--highlight);
    color: var(--background);
}

.nav-dropdown:hover .nav-dropdown-content {
    display: block;
}

.navdrops a:hover {
    color: var(--background);
}

/* Here goes the mobile dropdown formatting for the gears section STL/LASER/CALCULATORS/PLOTTERS */
.mobile-nav-dropdown {
    position: relative;
    display: inline-block;
  }
  
  .mobile-nav-dropdown-content {
    display: none;
    position: absolute;
    z-index: 1;
    background-color: var(--background);
    min-width: 160px;
    /* border: 1px solid #ddd; */
    box-shadow: -5px 5px 10px 3px rgb(0 0 0 / 20%);
    border-radius: 3px;
    /*The 12 px is because the submenu is 24px tall, use 12 for 2 submenus and 24 for 1 submenu*/
    transform: translateX(calc(-100% - 1px)) translateY(calc(-50% - 20px));
  }
  
  .mobile-nav-dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  .mobile-nav-dropdown-content a:hover {
    background-color: white;
    border-radius: 3px;
    color: var(--highlight);
  }
  
  .mobile-nav-dropdown:hover .mobile-nav-dropdown-content {
    display: block;
  }
  
  .mobile-nav-dropdown:hover .mobile-ddwn {
    background-color: var(--background);
    color: var(--highlight);
  }
  

/* Styling for the message box */
#message-box {
    position: fixed;
    top: 0%;
    width: 600px;
    max-width: 60%;
    left: 100%;
    color: white;
    transform: translate(-101%, 70px);
    background-color: #3b8af2e2;
    border: 3px solid var(--highlight);
    padding: 10px;
    display: none;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    border-radius: 5px;
  }
  .whitelink{
      color:whitesmoke;
  }
  .whitelink:hover{
      color: blue;
  }
  #close-button{
    margin-left: 93%;
    font-size: var(--buttontext);
  }
  #close-button:hover{
    cursor: pointer;
  }

/*Work Area*/
.workarea {
    /*Align workarea to the center of the screen*/
    margin: 20px auto;
    /*Add right 'margins' so it doesn't touch the side*/
    padding: 0 20px;
    /*Make width 100% - 2*padding so it always extends*/
    width: calc(100% - 40px);
    max-width: min(1450px, 100%);
    /* display: block; */
    /*This avoids the whole text being centered by the body text-align property, but it sets all text to justify as default*/
    text-align: start;
    /*The following makes the footer go to the bottom of the page since the work area will extend to the full height of the screen no matter what*/
    /*100vh -5rem means the height of the footer is 5rem*/
    /* min-height: calc(100vh - 5rem); */
    flex: 1;
}

footer {
    height: 6.5rem;
}

.footerdiv {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    height: 100%;
}

.footerurl{
    color: var(--background);
    padding: 0px 10px;
    font-size: 1.25rem;
    margin-bottom: 5px;
}

.footernote{
    margin-bottom: 5px;
    margin-top: 1rem;
}

.grey {
    color: var(--detail);
}

/* Colors */
.blue {
    color: var(--highlight);
}

.white {
    color: var(--background);
}

.disabled {
    /*Turn opacity to 1 this when NORMAL METHOD is available*/
    opacity: .7;
}

/*Images*/
.bglogo {
    background-color: var(--gflogo);
}

/*Text General*/
.centered {
    text-align: center;
}

.justify {
    text-align: justify;
}

.sectionsubtitle {
    font-size: var(--sectionsubtitle);
    font-weight: 600;
}

/*margins*/

.fivemargin {
    margin: 5px;
}

.tenmargin {
    margin: 10px;
}

.fifteenmargin {
    margin: 15px;
}

.twentymargin {
    margin: 20px;
}

.marginbtm5 {
    margin-top: 0;
    margin-bottom: 15px;
}

.marginless {
    margin: 0px;
}

.welcome{
    text-align: justify;
    margin-bottom: 10px;
}

/*Title section*/
.title {
    font-size: var(--title);
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 15px;
    /* text-align: justify; */
}

.sectionheader {
    font-size: var(--sectionheader);
    font-weight: 700;
}

.page-description {
    font-size: 2.75rem;
    font-weight: 600;
    display: inline;
    /* color: var(--detail); */
}


/*Card*/
hr.cardhr {
    height: 3px;
    background-color: var(--highlight);
    border: 0;
    max-width: 90%;
}

.threecard {
    display: flex;
    justify-content: space-between;
}

.threecard .card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    width: 32.25%;
    display: table;
    border-radius: 5px;
}

.cardrow {
    display: table-row;
}

.card:hover {
    box-shadow: 4px 8px 16px 4px rgba(0, 0, 0, 0.35);
}

.cardtitle {
    font-size: var(--sectiontext);
    font-weight: 800;
}

.cardtext {
    font-size: 2.5rem;
    font-weight: 600;
}

.cardbgimage {
    /*Checa este post de stack overflow para ver porque funciona https://stackoverflow.com/questions/5898776/how-to-refer-to-static-files-in-my-css-files*/
    /*Es la respuesta de Pierre de 'Use absolute URL from base directory, this will point to any file in a static folder within an app' */
    background-image: url("/static/STLGearsApp/images/logo_background.da29473f1427.png");
    background-size: 1450px;
    height: 30%;
    width: 100%;
}

.cardimage {
    width: 100%;
}

.cardbottom {
    display: table-cell;
    vertical-align: bottom;
}


/*Form*/
form {
    margin: 0;
}

.formholder {
    background-color: var(--detail);
    margin: 0 auto;
    color: var(--background);
    border-radius: 5px;
    width: min(1050px, 100%);
}

.inputext {
    font-size: 2.0rem;
    font-weight: 600;
}

input[type=checkbox] {
    /* Double-sized Checkboxes */
    -ms-transform: scale(2);
    /* IE */
    -moz-transform: scale(2);
    /* FF */
    -webkit-transform: scale(2);
    /* Safari and Chrome */
    -o-transform: scale(2);
    /* Opera */
    transform: scale(2);
    padding: 10px;
    margin: 5px;
}

.inputname {
    padding: 5px;
    font-size: 2rem;
    font-weight: 600;
    min-width: 175px;
    background-color: var(--darkblue);
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    width: 50%;
}

.inputholder {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.input-group {
    display: flex;
    /* margin-top: 5px; */
    flex: 0 1 47%;
    padding-bottom: 10px;
}

.checkbox-group {
    min-width: 330px;
}

.input {
    flex-grow: 1;
    /* padding: 5px; */
    font-size: 2rem;
    min-width: 150px;
    max-width: 300px;
    /* border: none; */
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
}


/*Collapse*/

/*collapse gpt3*/

/*for every id that starts with the word collapsable*/
/* [id^="collapsable"] {
    height: 0;
    overflow: hidden;
    transition: height 0.2s ease-out;
  } */

.collapsable {
    height: 0;
    overflow: hidden;
    /* transition: height 0.2s ease-out; */
}



/* Button section */
button {
    font-family: Inter, sans-serif;
    border: none;
}

.noselect {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.button {
    border-radius: 5px;

    font-weight: 700;
    /* font-size: 1.5rem; */
    text-align: center;

    background-color: var(--highlight);
    color: var(--background);
}

.buttontext {
    font-weight: 800;
}

.button:hover {
    cursor: pointer;
}

.contact-button {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;

    text-decoration: none;

    /* margin-right: 10px; */
    display: inline-block;
    transition: 0.3s;
}

.contact-button:hover {
    cursor: pointer;
    color: var(--font);
}

/*This is mainly for the buttons of the threecards*/
.disable:hover{
    cursor:default;
    color: white;
}

/* Group Button */
.groupbutton {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;

    text-decoration: none;

    /* margin-right: 10px; */
    display: inline-block;
    transition: 0.3s;
    background-color: var(--darkblue);
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    min-width: 130px;
}

.groupbutton:hover {
    color: var(--background);
    /* background-color: #2f4086; */
    background-color: var(--darkblue);
}

/* Radio Button */
.radio-button {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;

    text-decoration: none;

    /* margin-right: 10px; */
    display: inline-block;
    transition: 0.3s;
}

.radio-group {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.radio-group input[type="radio"] {
    display: none;
}

.radio-group label {
    background-color: var(--grayblue);
    text-align: center;
    font-size: 2rem;
    min-width: 130px;
    cursor: pointer;
}

.radio-group input[type="radio"]:checked+label {
    background-color: var(--highlight);
}

/* Checkbox */
.checkboxtext {
    padding: 5px;
}

/*DROPDOWN MENU https://codepen.io/himalayasingh/pen/pxKKgd https://codepen.io/raubaca/pen/VejpQP */
/* https://freefrontend.com/css-select-boxes/ */

/* Select*/
.select-group {
    display: flex;
    margin-top: 5px;
    background-color: var(--grayblue);
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
}

.selectholder {
    min-width: 150px;
}

/* Custom Select wrapper */
.selectdiv {
    position: relative;
    display: flex;

    height: 100%;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    overflow: hidden;
}

.select {
    opacity: 1;
    /* Reset Select */
    appearance: none;
    outline: 0;
    border: 0;
    box-shadow: none;
    /* Personalize */
    flex: 1;
    padding: 0px 0px 0px 5px;
    color: var(--background);
    background-color: var(--grayblue);
    background-image: none;
    cursor: pointer;
    
    /*This is here to avoid the impossible to modify transparent dropdown from the select.
    Instead of showing the users the real select, we fake it and change the options with JS*/
    display: none;
}

.faketext{
    width: 100%;
    opacity: 1;
    appearance: none;
    outline: 0;
    border: 0;
    box-shadow: none;
    flex: 1;
    padding: 5px 0px 5px 5px;
    color: var(--background);
    background-color: var(--grayblue);
    background-image: none;
    cursor: pointer;
}

/* Remove IE arrow */
.select::-ms-expand {
    display: none;
}

/* Arrow */
.shuffle::after {
    content: '\25C0\25B6';
    position: sticky;
    top: 0;
    right: 0;

    /*Controls the arrow block size, must be same fontsize as the placeholder letters and padding=0.5xfont-size*/
    font-size: 1.75rem;
    padding: .5rem;
    height: 100%;
    background-color: var(--darkblue);
    transition: .25s all ease;
    pointer-events: none;
}

/* Transition */
.shuffle:hover::after {
    /*Arrow hover and click*/

    /*Return to --highlight when NORMAL METHOD is available*/
    color: var(--highlight);
}

/* Arrow */
.dropdown::after {
    content: '\25BC';
    position: absolute;
    top: 0;
    right: 0;

    /*Controls the arrow block size, must be same fontsize as the placeholder letters and padding=0.5xfont-size*/
    font-size: 1.75rem;
    padding: .5rem;
    height: 100%;
    background-color: var(--darkblue);
    transition: .25s all ease;
    pointer-events: none;
}

/* Transition */
.dropdown:hover::after {
    /*Arrow hover and click*/

    /*Return to --highlight when NORMAL METHOD is available*/
    color: var(--highlight);
}

/* Tooltip */
.tooltip-container {
    position: relative;
    font-size: 1.15rem;
}

.tooltip {
    display: none;
    position: absolute;
    left: 10rem;
    transform: translateX(-50%) translateY(-100%);
    background-color: #fff;
    padding: 5px;
    border-radius: 5px;
}

.texttooltip {
    display: none;
    position: absolute;
    transform: translateY(-100%);
    background-color: #fff;
    color: var(--font);
    padding: 5px;
    border-radius: 5px;
}

.description-tooltip {
    display: none;
    background-color: #fff;
    left: 10rem;
    position: absolute;
    max-width: 15rem;
    padding: 5px;
    text-align: center;
    justify-content: center;
    transform: translateX(-50%) translateY(-100%);
    border-radius: 5px;
}

.description-holder {
    display: flex;
    flex-direction: column;
    justify-content: end;
    text-align: justify;
}

.description-holder p {
    margin: 0;
    color: var(--font);
    font-weight: 600;
}

.texttooltip p {
    margin: 0;
}

.texttooltip ul {
    list-style-type: none;
    margin: 0;
}

.tooltip img {
    height: 15rem;
    width: 15rem;
    align-self: center;
}

.description-tooltip img {
    height: 14rem;
    /* width: 15rsem; */
    align-self: center;
}

.tooltip-container:hover .tooltip,
.tooltip-container:hover .texttooltip,
.tooltip-container:hover .tooltip-description {
    display: block;
}

.tooltip-container:hover .description-tooltip {
    display: flex;
}



/* Loader Spinner*/
.downloadingshow {
    display: none;
}

.downloadtext {
    display: inherit;
}

.loader {
    border: 5px solid #f3f3f3;
    border-top: 5px solid var(--darkblue);
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    animation: spin 2s linear infinite;
    margin: 0 auto;
    display: inline-block;
    vertical-align: middle;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*Media Querys*/
/*When screen size is bigger than 990px...*/
@media (min-width: 990px) {
    .title {
        font-size: var(--title);
    }

    .buttontext {
        font-size: var(--buttontext);
    }
}

/*When screen size is smaller than 990px...*/
@media (max-width: 990px) {

    /*patreon-button's nowrap can cause issues in the navbar, so i change the space between links*/
    .navbar a {
        margin-right: 12px;
        text-decoration: none;
    }

    .patreon-button {
        padding: 8px 10px;
    }

    .title {
        font-size: var(--title);
    }

    .button-group,
    .radio-group {
        max-width: 490px;
    }

    .buttontext {
        font-size: var(--buttontext);
    }

    .threecard {
        display: block;
    }

    .threecard .card {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        transition: 0.3s;
        width: 100%;
        margin-bottom: 20px;
    }

}

/*When screen size is smaller than 768px...*/
@media (max-width: 768px) {

    /*Switches to mobile navbar*/
    .desktop-navbar {
        display: none;
    }

    .mobile-navbar {
        display: flex;
    }

    /*removes <a> elements margin for mobile-navbar content hover*/
    .navbar a {
        margin-right: 0px;
        text-decoration: none;
    }

    /*Removes navbar padding for mobile navbar*/
    .navbar {
        padding: 0px 0px 0px 0px;
    }

    /*Removes border radius for mobile*/
    /* .navbarlogo {
        border-radius: 0px;
    } */

    .workarea {
        margin: 10px auto;
        padding: 0 10px;
        width: calc(100% - 20px);
    }

    .title {
        font-size: 4rem;
    }

    .sectionheader {
        font-size: 3rem;
        font-weight: 800;
        margin-bottom: 0px;
    }

    .sectionsubtitle {
        font-size: 2.5rem;
    }

    .buttontext {
        font-size: 20px;
    }

    .sectiontext,
    .page-description,
    .cardtext {
        font-size: 2rem;
    }

    .sectiontext {
        margin-top: 5px;
    }
}

/*When screen size is smaller than 350px (for galaxy fold mainly)...*/
@media (max-width: 350px) {
    .navtitle {
        font-size: 2.35rem;
    }

    .title {
        font-size: 3.5rem;
    }

    .navbar {
        padding: 0px 0px 0px 0px
    }

    .navbarlogo {
        height: 6rem;
        border-radius: 0px 25px 25px 0px;
    }

    .mobile-nav-dropdown-content{
        min-width: 120px;
    }

    .dropbtn {
        height: 6rem;
        font-size: 3rem;
        padding: 3px 8px 5px 8px;
    }

    .BurgerDropdown-content {
        /* This changes the position of the dropdown menu to the left */
        transform: translateX(calc(-100% + 40px));
    }

    .checkbox-group {
        justify-content: center;
    }

    .input {
        min-width: 120px;
    }

    .inputname {
        font-size: 1.75rem;
        min-width: 110px;
    }

    .selectdiv {
        min-width: 122px
    }

    .select {
        padding: 0px 8px 0px 10px;
    }

    .shuffle::after {
        padding: 14px 0px 0px 0px;
    }


}