@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300&family=Source+Sans+Pro:wght@200&display=swap');

body {
    /* font-family: 'Source Sans Pro', sans-serif; */
    font-family: 'Lato', sans-serif;
    background-color: #fefefe;
    margin: 0; padding: 0
}

#login_wrapper {
    position: absolute;
    top: 50%; left: 50%;
    /* width: 30%; */
    transform: translate( -50%, -50% );
    /*border: 1px solid #575757;*/
    border-radius: 2px;
    box-shadow: 0px 0px 5px rgba( 0, 0, 0, 0.1 );
    background-color: #fff;

    display: grid;
    grid-template-columns: 10% 80% 10%;
    grid-template-rows: 20px 40px 40px 40px 20px;
    grid-template-areas:    '. . .'
                            '. input_user .'
                            '. input_pass .'
                            '. submit .'
                            '. . .';
    column-gap: 0px;
    row-gap: 10px;
    font-family: 'Lato', sans-serif;

    animation: fadeIn 250ms ease-in-out;
}
@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

#contents * {
    font-family: 'Lato', sans-serif;
}
#login_wrapper label:nth-of-type( 1 ) { grid-area: label_user }
#login_wrapper label:nth-of-type( 2 ) { grid-area: label_pass }

#login_wrapper input:nth-of-type( 1 ) { grid-area: input_user }
#login_wrapper input:nth-of-type( 2 ) { grid-area: input_pass }

#login_wrapper button { grid-area: submit }

#login_wrapper input {
    padding: 0px 10px;
    font-size: 1.5em;
    background-color: #fafafa;
    border: none;
    box-shadow: 0px 0px 2px rgb(0 0 0 / 20%) inset;
}

#login_wrapper button { border: none }
#login_wrapper label { transform: translate(0px, 20%) }

#dashboard {
    position: absolute;
    top: 0; left: 0;
    /* width: 30%; */
    /* transform: translate( -50%, -50% ); */
    width: 100%; height: 100%;
    /*border: 1px solid #575757;*/
    /* border-radius: 2px; */
    /* box-shadow: 0px 0px 5px rgba( 0, 0, 0, 0.1 ); */
    /* background-color: #fff; */

    display: grid;
    grid-template-columns: auto 25% 25% 25% auto;
    grid-template-rows: 7% 50% 2% 7.5% 7.5% 20%;
    grid-template-areas:    '. . . . logout'
                            'graph graph graph graph graph'
                            '. . . . .'
                            '. fan light water .'
                            '. temperature humidity moisture .'
                            '. plans plans plans .';
    column-gap: 5px;
    row-gap: 5px;
    font-family: 'Lato', sans-serif;
}
#dashboard *:active {
    background: none;
    
}

#dashboard * {
    -webkit-tap-highlight-color: rgba(201, 224, 253, 0);
}

#dashboard canvas { 
    width: 100%;
    border-top: 1px solid #c7c7c7; 
    border-bottom: 1px solid #c7c7c7 
}

#bttn_logout {
    /* grid-area: logout; */
    position: absolute;
    top: 20px; right: 20px;
    width: 30px; height: 30px
}

#title { grid-area:  title; }
#fan { grid-area:  fan; }
#light { grid-area:  light; }
#water { grid-area:  water; }
#temperature { grid-area:  temperature; }
#humidity { grid-area:  humidity; }
#moisture { grid-area:  moisture; }
#graph { grid-area:  graph; }
#plans { grid-area:  plans; }

canvas { border-top: 1px solid #c7c7c7; border-bottom: 1px solid #c7c7c7 }
.icon svg { height: 100%; transition: 150ms; margin: 0 auto; display: block; }
/* .icon svg:hover { transform: scale( 1.1 ) } */

#fan.icon svg.active { 
    animation: svgTurn 1700ms linear infinite;
 }
 @keyframes svgTurn {
     from { transform: rotate( 0deg ) }
     to { transform: rotate( 360deg ) }
 }

 #light.icon svg.active g { 
    animation: svgLight 1500ms ease-in-out infinite;
    transform-origin: 50% 50%;
 }
 @keyframes svgLight {
     0% { transform: rotate( 0deg ) scale( 1 ) }
     33% { transform: rotate( 0deg ) scale( 1.1 ) }
     66% { transform: rotate( 45deg ) scale( 1.1 ) }
     100% { transform: rotate( 45deg ) scale( 1 ) }
 }


 #water.icon svg g { 
    transform: scale( 0 );
    opacity: 0;
    transition: 250ms;
    transform-origin: 50% 50%;
 }

 #water.icon svg.active g { 
    animation: svgWater 2000ms ease-in-out infinite;
    transform: scale( 1 );

    transform-origin: 50% 50%;
    opacity: 1;
 }
 @keyframes svgWater {
    from { transform: rotate( 0deg ) }
    to { transform: rotate( 360deg ) }
 }

#title {
    font-size: 66px;
    color: #575757;
    text-align: center;
}
#temperature, #humidity, #moisture, #plans { border: 1px #c7c7c7 solid; }

@media only screen and (max-width: 1000px) {
    #login_wrapper { 
        width: 80%;
        height: 90%;
        grid-template-columns: 10% 80% 10%;
        grid-template-rows: calc( 50% - 225px) 150px 150px 150px calc( 50% - 225px);
    }
    #bttn_logout {
        position: absolute;
        top: 20px; right: 20px;
        width: 70px; height: 70px;
        -webkit-tap-highlight-color: rgba(201, 224, 253, 0);
    }
  }
@media only screen and (min-width: 1000px) {
    #login_wrapper { width: 30% }
  }