* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    background-color: white;
    font-family:Arial, Helvetica, sans-serif !important;
}

.header {
    height: auto;
    /*width: 100%;*/
    /* IE10 */
    background-image: -ms-linear-gradient(left, #FFFFFF 25%, #FFBF00 100%);
    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(left, #FFFFFF 25%, #FFBF00 100%);
    /* Opera */
    background-image: -o-linear-gradient(left, #FFFFFF 25%, #FFBF00 100%);
    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left, right, color-stop(0.25, #FFFFFF), color-stop(1, #FFBF00));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(left, #FFFFFF 25%, #FFBF00 100%);
    /* Regola standard */
    background-image: linear-gradient(left, #FFFFFF 25%, #FFBF00 100%);
    margin-bottom: 0.2em;
}

a {
    text-decoration: none !important;
}

.nav-tabs {
    border-bottom: 2px solid #FFBF00 !important;
}

.nav-link {
    color:dimgray !important;
}

.nav-tabs .nav-link.active {
    color: black !important;
    border-left-color: #FFBF00 !important;
    border-top-color: #FFBF00 !important;
    border-right-color: #FFBF00!important;
}

.footer {
    background-color:lightgrey;
    min-height: 10em;
    padding: 2em !important;
}


.firstPage {  
    grid-template-columns: 70% auto;
    grid-template-rows: 22em min-content;
    gap: 1em 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "welcome image1"
      "description description";
}
  
.description {  
    grid-area: description;
}
  
.image1 {
    justify-self: center;
    align-self: center;
    grid-area: image1;
}
  
.welcome {
    justify-self: center;
    align-self: center;
    grid-area: welcome;
}
  

#name {
    display: flex;
    justify-content: center;
    align-items: center;   
    font-weight: 700;
    font-family: 'Oswald', sans-serif;
    width:100%;
}

#link1 {
    margin: 1em;
    text-align: justify;
}

.popup {
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.popup .popupimg {
    visibility: hidden;
    background-image: none;
    background-color: var(--bs-white);
    text-align: center;
    position: absolute;
    z-index: 1;
}

.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}
  
@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}


.alfredContainer {  
    display: grid;
    gap: 1em 1em;
    grid-auto-flow: row;
}
    
.alfredPhoto { 
    grid-area: alfredPhoto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
  
.alfredLogo {
    grid-area: alfredLogo;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
  
.alfredText {
    grid-area: alfredText;
}
  
.customerContainer {  
    display: grid;
    gap: 1em 1em;
    grid-auto-flow: row;
}
  
.customerName { 
    grid-area: customerName;
    display: inline-flex;
    justify-content: left;
    align-items: center;
}
  
.customerImg { 
    grid-area: customerImg; 
}
  
.customerText { 
    grid-area: customerText; 
    text-align: justify;
}

#btnMail {
    float: left;
    min-height: 2.4em;
    margin: 1em 0;
    border-radius: 8px;
    max-width: fit-content;
    padding: 0 0.75em;
}

.linkLogo {  
    display: grid;
    gap: 0px 0px;
    grid-auto-flow: row;
}

.linkLink { 
    grid-area: linkLink; 
}

.linkGitLab { 
    grid-area: linkGitLab; 
}

.linkTop { 
    grid-area: linkTop; 
}

@media only screen and (max-width:768px) {
    /* Header/logo Title */
    #logo {
        max-height: 6em;
        padding: 0.25em;
    }
    #alfred {
        max-height: 6em;
        padding: 0.25em;
        float:right;
    }
    #welcome {
        font-size: x-large;
        min-width: 100%;
        text-align: center;
    }
    #alfred2 {
        max-height: 16em;
    }
    .image1 {
        height: 18em;
    }
    .pro-title{
        font-size: calc(1.2rem + .6vw) !important;
        min-height: 3em;
    }
    .alfredContainer {
        grid-template-columns: 100%;
        grid-template-rows: 12em 16em auto;
        grid-template-areas:
        "alfredLogo"
        "alfredPhoto"
        "alfredText";
        padding-left: 1em !important;
        padding-right:1em !important;
        padding-bottom: 1em !important;
    }

    .customerContainer {
        grid-template-columns: 100%;
        grid-template-rows: 6em 16em auto;  
        grid-template-areas:
        "customerName"
        "customerImg"
        "customerText";
    }

    #proAlfred {
        max-height: 16em;
    }
    .alfredsf {
        max-height: 16em;
    }
    .alfredText {
        margin-left: 1em !important;
        margin-right: 1em !important;
    }
    #projLogo {
        max-height:10em;
    }

    .linkLogo {  
        grid-template-columns: 100%;
        grid-template-areas:
        "linkLink"
        "linkGitLab"
        "linkTop";
    }

}

@media only screen and (min-width:768px) and (max-width:1024px) {
    /* Header/logo Title */
    #logo {
        max-height: 6em;
        padding: 0.25em;
    }
    #alfred {
        max-height: 6em;
        padding: 0.25em;
        float:right;
    }
    #welcome {
        font-size: 2.5em;
        min-width: 100%;
        text-align: center;
    }
    #alfred2 {
        max-height: 16em;
    }
    .alfredContainer {
        grid-template-columns: 45% auto;
        grid-template-rows: 22em auto;
        grid-template-areas:
        "alfredLogo alfredPhoto"
        "alfredText alfredText";
        padding-left: 0.5em !important;
        padding-right:0.5em !important;
    }

    .customerContainer {
        grid-template-columns: 45% auto;
        grid-template-rows: 22em auto;  
        grid-template-areas:
        "customerName customerImg"
        "customerText customerText";
    }
    #ocadoImg, #kubotaImg, #mercImg {
        max-height: 22em;
    }
    #kubotaImg {
        width: auto;
    }
    .firstPage {  
        display: grid;
    }    
    .pro-title{
        font-size: calc(1.3rem + .6vw) !important;
        min-height: 3.5em;
    }
    #proAlfred {
        max-height: 16em;
    }
    .alfredsf {
        max-height: 20em;
    }
    .alfredText {
        margin-left: 2em !important;
        margin-right: 2em !important;
    }

    .linkLogo {  
        grid-template-columns: 33% 33% auto;
        grid-template-areas:
        "linkLink linkGitLab linkTop";
    }
  }
  
@media only screen and (min-width: 1024px) {
    #logo {
        max-height: 150px;
        padding: .5em;
        margin-left: 2em;
    }
    #alfred {
        max-height: 150px;
        padding: 0.5em;
        float:right;
        margin-right: 2em;
    }
    #welcome {
        font-size: 3.5em;
        text-align: center;
    }
    #alfred2 {
        max-height: 20em;
    }
    .firstPage {  
        display: grid;
    }
    .alfredContainer {
        grid-template-columns: 40% auto;
        grid-template-rows: 22em auto;
        grid-template-areas:
        "alfredLogo alfredPhoto"
        "alfredText alfredText";
        padding-left: 0.5em !important;
        padding-right:0.5em !important;
    }

    .customerContainer {
        grid-template-columns: 45% auto;
        grid-template-rows: 22em auto;  
        grid-template-areas:
        "customerName customerImg"
        "customerText customerText";
    }
    #ocadoImg, #kubotaImg, #mercImg {
        max-height: 22em;
    }

    #kubotaImg {
        width: auto;
    }

    .pro-title {
        font-size: calc(1.35rem + .6vw) !important;
        min-height: 4em;
    }
    #proAlfred {
        max-height: 20em;
    }
    .alfredsf {
        max-height: 22em;
    }
    .alfredText {
        margin-left: 2em !important;
        margin-right: 2em !important;
    }

    .linkLogo {  
        grid-template-columns: 33% 33% auto;
        grid-template-areas:
        "linkLink linkGitLab linkTop";
    }

}