@font-face {
    font-family: "titolo";
    src: url("fonts/earthorbiter.ttf");
}
@font-face {
    font-family: "testo";
    src: url("fonts/Biko_Regular.otf");
}
@media (max-width: 768px) {
    #contenitore {
        max-width: 100%;
    }
    #password-container {
        position: absolute;
        top: 50%;
        right: 5%;
        transform: translateY(-50%);
    }
    #icona{
        width: 7rem;
        height: auto;
        margin-bottom: 1rem;
    }
    .menu {
        background-color: #6fdc89;
        border-radius: 1rem;
        padding: 0.8rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin: 1rem;
    }
}
@media (min-width: 769px) {
    body{
        text-align: center;
        display: flex;
        flex-direction: column;
    }
    #password-container {
        position: absolute;
        top: 50%;
        right: 25%;
        transform: translateY(-50%);
    }
    #contenitore2{
        margin-top: 1rem;
    }
}
body{
    background-image: url(images/sfondo.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    text-align: center;
    display: flex;
    flex-direction: column;
    margin-bottom: 8rem;
}
.hidden{
    display: none;
}

/*style login*/
#contenitore {
    max-width: 80%;
    margin: 0 auto;
    padding: 0.5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#eyeclose {
    width: 20px;
    height: 20px;
}
#eyeopen {
    display: none;
}
#inspass {
    position: relative;
}
h1{
    font-family: "titolo";
    font-size: 2.1rem;
    margin-bottom: 3rem;
    color: rgb(56, 118, 29);
}
#logo{
    width: 7rem;
    height: auto;
    margin-bottom: 2rem;
}
.cred{
    font-family: "testo";
    background: transparent;
    font-size: medium;
    padding: 0.4rem;
    border: none;
    border-bottom: 2px solid rgb(56, 118, 29);
    outline: none;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
#login {
    font-family: "testo";
    background-color:rgb(56, 118, 29);
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.3rem;
    border-radius: 13px 13px 13px 13px;
    cursor: pointer;
    margin-top: 2rem;
}
#risultato{
    font-family: "testo";
    color: red;
}

/*style home*/
#contenitore2 {
    margin-top: 7rem;
    text-align: center;
}
#icona{
    width: 10rem;
    height: auto;
    margin-bottom: 1rem;
}
.menu {
    background-color: #6fdc89;
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 1rem;
}
.menu a.link-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
    background-color: #6fdc89;
}
.menu img {
    width: 3rem;
}
.menu label {
    font-family: 'testo';
    font-size: 1.2rem;
    text-decoration: none;
}
/*style barra*/
#barra {
    display: flex;
    justify-content: space-around;
    font-family: "testo";
    color: #8b8d92;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-bottom: 1rem;
    backdrop-filter: blur(10px);
}
#barra a.link-barra {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #8b8d92;
}
#barra div {
    text-align: center;
    padding: 1.5rem;
}
#barra img{
    width: 2.5rem;
}
#badget img{
    width: 22rem;
    height: auto;
    margin-top: 12rem;
}
#black{
    color: black;
}
#prova{
    width: 50px;
    height: 50px;
    left: 25px;
    top: 40px;
    position: absolute;
    background: white;
    border-radius: 40px;
    border: 5px solid rgba(111, 220, 137, 0.61);
}
.sopra label{
    left: 13px;
    top: 15px;
    position: absolute;
    color: black;
    font-size: 1.4rem;
    font-family: "testo";
}
#iconimg{
    left: 10px;
    top: 11px;
    position: absolute;
    width: 1.8rem;
}
.sopra img{
    left: 30px;
    top: 55px;
    position: absolute;
    width: 2.5rem;
}
.sopra h2{
    font-family: "testo";
    font-size: 2.2rem;
}
.tit{
    margin-top: 3rem;
}
#backButton{
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}
/*style lights*/
#contenitore4 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
}
.luce {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.luce img {
    width: 3rem;
    height: auto;
}
.luce label{
    font-family: "testo";
    font-size: 1rem;
    display: block;
    margin-top: 1rem;
}
#tuttoOff {
    font-family: "testo";
    background-color:rgb(56, 118, 29);
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.3rem;
    border-radius: 13px;
    cursor: pointer;
}
/*style luci singole*/
#bedg, #office, #living, #bathup, #bathdown, #bedm, #garage, #kit, #entr {
    position: absolute;
}
#bedg, #office, #bedm{
    top: 200px;
}
#bathup, #garage, #bathdown{
    top: 350px;
}
#living, #kit, #entr{
    top: 500px;
}
#bedg{
    left: 50px;
}
#office{
    left: 180px;
}
#bedm{
    right: 50px;
}
#bathup{
    left: 50px;
}
#garage{
    left: 180px;
}
#bathdown{
    right: 40px;
}
#living{
    left: 60px;
}
#kit{
    left: 180px;
}
#entr{
    right: 50px;
}
@media (min-width: 769px){
    #contenitore4{
        align-items: center;
    }
    #bedg, #bathup, #living{
        margin-left: 20%;
    }
    #office, #garage, #kit {
        text-align: center;
        align-items: center;
    }
    #bedm, #bathdown, #entr{
        margin-right: 20%;
    }
}
/*style air and tv*/
#contenitore3 {
    margin-top: 10.5rem;
    text-align: center;
    font-family: "testo";
}
#contenitore3 .tele.tv-on {
    margin-top: 1rem;
}
.fan img{
    width: 9rem;
    height: auto;
}
.tele img{
    width: 9rem;
    height: auto;
}
#canale{
    margin-top: 1rem;
}
#ch{
    font-size: 1.5rem;
    padding: 4rem;
}
#ch1, #ch2{
    width: 2.5rem;
    height: auto;
}
#ch2{
    transform: rotate(180deg);
}
/*style temperature*/
.barometro {
    margin-left:3rem;
    text-align: center; 
}
/*style profile*/
#nome, #cognome, #email, #via, #ruolo {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

#prestodisp{
    margin-top: 15rem;
    font-family: "testo";
    font-size: 2.5rem;
}
#nome {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "testo";
}

.dynamic-element {
    width: 10rem;
    border-bottom: 2px solid green;
    margin-bottom: 5rem; /* Aggiungi spazio inferiore di 2rem */
}

/*style popup*/
#popup img {
    width: 5rem;
    height: auto;
    margin-bottom: 10px;
}
#popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2rem;
    background-color: rgb(162, 237, 179);
    border-radius: 10px;
    z-index: 30;
}
.icone{
    margin-top: 1rem;
}
#popup p{
    font-family: "testo";
    font-size: 1.7rem;
}
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2;
}

/*style teacher*/
#contenitore5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 8rem;
}
/*schedule*/
#tabella {
    width: 100%;
    font-family: "testo";
    background-color: transparent;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
#tabella th, #tabella td {
    border: 1px solid #ddd;
    padding: 3px;
    text-align: center;
}
#tabella th {
    background-color: rgb(7, 149, 7);
    color: white;
}
#tabella tr:nth-child(odd) {
    background-color: #6fdc898d;
}
/*tests*/
#upcoming, #assignments{
    font-family: "testo";
    margin-bottom: 3rem;
}
#upcoming h2, #assignments h2 {
    color: green;
}
/*style shop*/
.cibo {
    background-color: #6fdc89;
    border-radius: 1rem;
    padding: 1rem;
    align-items: center;
    margin: 1rem;
    width: 7rem;
    height: auto;
}
.cibo a.link-wrapper {
    align-items: center;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
    background-color: #6fdc89;
}
.cibo img {
    width: 7rem;
}
.cibo label {
    font-family: 'testo';
    font-size: 1.2rem;
    text-decoration: none;
}
.food-category-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
.food-category-container .cibo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: auto;
    margin-top: 1rem;
}
.shoptable {
    font-family: "testo";
    width: 100%;
    border-collapse: collapse;
    background-color: transparent;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.shoptable th, .shoptable td {
    border: 2px solid #ddd;
    padding: 15px;
    text-align: left;
}
.shoptable th {
    background-color: rgb(7, 149, 7);
    color: white;
}
.shoptable tbody tr:nth-child(even) {
    background-color: #6fdc898d;
}
/*style settings*/
.menuset {
    margin-top: 1rem;
    padding: 1rem;
    display: flex;
}
.menuset a.link-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-decoration: none;
    color: inherit;
}
.menuset img {
    width: 2rem;
    height: auto;
}
.menuset label {
    font-family: 'testo';
    font-size: 1.2rem;
    text-decoration: none;
    margin-left: 2rem;
}
#instruction img:last-child, #support img:last-child, #pswch img:last-child, #logout img:last-child{
    width: 1.3rem;
    height: 1.3rem;
    margin-left: auto;
}
.contatti{
    font-family: "testo";
    width: 70%;
}
.contatti h2{
    font-size: 2rem;
}
.contatti a{
    color: inherit;
    font-size: 1.2rem;
}
/*style switch change theme and app notifications*/
.theme-switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 20px;
    border-radius: 20px;
    background-color: #ccc;
    border: 2px solid #ccc;
    margin-left: auto;
}
.theme-switch input {
    display: none;
}
.switch {
    position: absolute;
    cursor: pointer;
    top: 1px; /* Regola l'altezza del pallino */
    left: -30px; /* Regola la posizione del pallino */
    width: 18px; /* Regola la larghezza del pallino */
    height: 18px; /* Regola l'altezza del pallino */
    background-color: white;
    border-radius: 50%;
    transition: transform 0.4s;
}
input:checked + .switch {
    transform: translateX(20px);
    background-color: black;
}