html, body {
    scroll-behavior: smooth;
}

body{
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr;
    
}

#banner{
    background: linear-gradient(to right, #bcf3ae, #9ad6e6);
    grid-row: 1/5;
    grid-column: 1/21;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom-left-radius:30px; 
    border-bottom-right-radius:30px;
    border-bottom: 4px solid whitesmoke;
}

#navbar{

background: rgba(255, 255, 255, 0.4);

box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(2.5px);
-webkit-backdrop-filter: blur(2.5px);
border: 1px solid #668fa0;
    grid-column:7/15;
    grid-row:5/6;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    position: sticky;

    border-top:none;

    top: 0;
    right: 0;
    overflow: hidden;

    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    height: 100%;
    width: 100%;
    transition: 0.3s;
}

#navbar:hover{
 
background: rgba(255, 255, 255, 0.88);

box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(2.5px);
-webkit-backdrop-filter: blur(2.5px);
border: 1px solid #668fa0;
border-top:none;
}

.nav-item{
    font-size:1.2vw;
    font-weight: 600;
    font-family: 'Arial', sans-serif;
    color: #668fa0;
    text-align: center;
    cursor:pointer;
     transition: 0.3s;

}

.nav-item:hover{
    color: #27363d;
    scale:1.2;
}


#container {
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    grid-template-rows: repeat(60,1fr);
    height: 300vh;
    background: linear-gradient(to bottom, #eeeee8, #d1d8c7, #eeeac7);
}
#plant-image{
    width: 140%;
    height: auto;
    object-fit: cover;
    grid-row: 8/17;
    grid-column: 4/8;
    border-radius: 20px;
    border: 2px solid #c7c7c7;
}
#plant-image img{
    width: 100%;
    height: 100%;
    border-radius: 20px ;
}

#beskrivning{
    grid-row: 8/17;
    grid-column: 10/19;
    font-family: "Roboto Slab", serif;
    font-size: 2.8vh;
    color: #333;
    text-align: left;
}
#welcome{
    font-family: 'Arial', sans-serif;
    font-size: 6vh;
    color: #38b6ff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    text-decoration: underline;
    text-decoration-color: #38b6ff;
    text-decoration-thickness: 2px;
    
}

#valve-image{
    width: auto;
    height: auto;
    object-fit: cover;
    grid-row: 24/32;
    grid-column: 15/20;
    border-radius: 20px;
    border: 2px solid #c7c7c7;

}

#valve-image img{
    width: 100%;
    height: 100%;
    border-radius: 20px ;
}

#material{
    grid-row: 23/31;
    grid-column: 4/14;
    font-family: "Roboto Slab", serif;
    font-size: 2.8vh;
    color: #333;
    text-align: left;
}
#website-image img{
     width: 100%;
    height: 100%;
    border-radius: 20px ;
}
#website-image{
    grid-row: 39/48;
    grid-column: 4/9;
    font-family: "Roboto Slab", serif;
    font-size: 2.8vh;
    color: #333;
    text-align: left;
}
#web{
    grid-row: 39/49;
    grid-column: 10/18;
    font-family: "Roboto Slab", serif;
    font-size: 2.8vh;
    color: #333;
    text-align: left;
}

#footer{
    grid-column:3/19;
    grid-row:60/61;
   
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(2.5px);
    -webkit-backdrop-filter: blur(2.5px);
    border: 1px solid #668fa0;
    border-bottom:none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    height: 100%;
    width: 100%;
}

.bot-item{
    font-size:1.2vw;
    font-weight: 600;
    font-family: 'Arial', sans-serif;
    color: #668fa0;
    text-align: center;
}


@media (max-width:900px){

html, body {
    scroll-behavior: smooth;
}

body{
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr;
    
}

#banner{
    background: linear-gradient(to right, #bcf3ae, #9ad6e6);
    grid-row: 1/5;
    grid-column: 1/21;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom-left-radius:30px; 
    border-bottom-right-radius:30px;
    border-bottom: 4px solid whitesmoke;
}

#logga{
    height: 200%;

}

#navbar{

background: rgba(255, 255, 255, 0.4);

box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(2.5px);
-webkit-backdrop-filter: blur(2.5px);
border: 1px solid #668fa0;
    grid-column:2/20;
    grid-row:5/6;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    position: sticky;

    border-top:none;

    top: 0;
    right: 0;
    overflow: hidden;

    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    height: 100%;
    width: 100%;
    transition: 0.3s;
}

#navbar:hover{
 
background: rgba(255, 255, 255, 0.88);

box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(2.5px);
-webkit-backdrop-filter: blur(2.5px);
border: 1px solid #668fa0;
border-top:none;
}

.nav-item{
    font-size:3vw;
    font-weight: 600;
    font-family: 'Arial', sans-serif;
    color: #668fa0;
    text-align: center;
    cursor:pointer;
     transition: 0.3s;

}

.nav-item:hover{
    color: #27363d;
    scale:1.2;
}


#container {
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    grid-template-rows: repeat(60,1fr);
    height: 300vh;
    background: linear-gradient(to bottom, #eeeee8, #d1d8c7, #eeeac7);
}

#plant-image{
   
    
    object-fit: cover;
    grid-row: 14/20;
    grid-column: 3/14;
    border-radius: 20px;
    border: 2px solid #c7c7c7;
}

#plant-image img{
 height: 100%;
 width: 100%;
    border-radius: 20px;
}

#beskrivning{
    grid-row: 6/14;
    grid-column: 3/19;
    font-family: "Roboto Slab", serif;
    font-size: 3vw;
    color: #333;
    text-align: left;
}

#welcome{
    font-family: 'Arial', sans-serif;
    font-size: 6vw;
    color: #38b6ff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    text-decoration: underline;
    text-decoration-color: #38b6ff;
    text-decoration-thickness: 2px;
   
    
}

#valve-image{
    width: auto;
    height: auto;
    object-fit: cover;
    grid-row: 31/37;
    grid-column: 3/19;
    border-radius: 20px;
    border: 2px solid #c7c7c7;

}

#valve-image img{
    width: 100%;
    height: 100%;
    border-radius: 20px ;
}

#material{
    grid-row: 23/31;
    grid-column: 3/19;
    font-family: "Roboto Slab", serif;
    font-size: 3vw;
    color: #333;
    text-align: left;
}
#website-image img{
     width: 100%;
    height: 100%;
    border-radius: 20px ;
}
#website-image{
    grid-row: 47/56;
    grid-column: 3/19;
   
   
    color: #333;
    text-align: left;
}
#web{
    grid-row: 39/49;
    grid-column: 3/19;
    font-family: "Roboto Slab", serif;
    font-size: 3vw;
    color: #333;
    text-align: left;
}

#footer{
    grid-column:1/21;
    grid-row:59/61;
   
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(2.5px);
    -webkit-backdrop-filter: blur(2.5px);
    border: 1px solid #668fa0;
    border-bottom:none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    display: flex;
    flex-direction: row;
    justify-content:space-evenly;
    align-items: center;
    height: 100%;
    width: 100%;
}

.bot-item{
    font-size:2.4vw;
    font-weight: 600;
    font-family: 'Arial', sans-serif;
    color: #668fa0;
    text-align: center;
}



}