body{
    background-image: url('pictures/wallpaper.jpg');
    background-size: cover; /* cobrir todo o fundo */
    background-position: center;/*centraliza o fundo*/
    overflow: hidden; /*esconde overflows*/
    height: 100vh; /* faz a imagem ocupar toda a altura tela*/
    font-family: sans-serif;
    background-repeat:no-repeat; /*nao repetir a imagem fundo*/
    box-sizing: border-box; /*fixa o tamanho*/
    user-select:none;
}

textarea{
    display:block; /* faz o elemento ocupar a linha toda, empurrando os outros pra baixo*/
    margin-bottom:10px; /*cria um espaço entre ele e o proximo elemento*/
}

.textInput{
field-sizing: content; /*faz o campo aumentar comforme o usuario digita*/
width: 220px;
max-width: 220px;
height:auto;
border-radius: 15px;
border:none;
resize:none; /*impede a mudança de tamanho puxando o canto*/
}

input, textarea, .textInput {
  user-select: text !important;
}

.topbar{
    height:45px;
    width:100%;
    font-size: 25px;
    display: flex; /*permite organizar itens unidimensionalmente (linha ou coluna), é necessario pro justify content e text align*/
    justify-content: space-between; /*faz os elementos internos irem pras bordas, organiza os elementos horizontalmente (segue a direçao do flex)*/
    background-color: rgba(0, 0, 0, 0.6);
    align-items: center; /*alinha os itens com o centro do todo verticalmente, pq a direçao do flex é horixontal (padrao= row - elemnetos linha -)*/
    color: rgb(250, 250, 250);
    padding: 5px 16px; /*adciona margem interna vertical e horizontal*/
    box-sizing: border-box;
}

#clock{
    color:white;
    font-size: 25px;
}
.icone-geral{
    display: flex;
    flex-direction: column; /* faz o eixo principal ser o vertical*/
    justify-content:flex-start; /*alinha os itens no inicio do eixo principal(vertical, nesse caso)*/
    position: absolute; /*elemento pode ser colocado em qualquer lugar com coordenadas left e top*/
    transition: transform 0.4s ease, box-shadow transform 0.4s ease; /*cria uma animaçao para a mudança*/
    align-items: center; 
}

.icone-geral:hover{ /**/
   transform: translateY(-8px);/*define quanto muda no eixo Y*/
}

.icone-img{
 border-radius: 20px;
 -webkit-user-drag:none; /*impede o arraste da imagem*/
 pointer-events: none; /*faz o click atravessar esse elemento e executar o que é do elemento atras dele*/
 flex-shrink: 0; /*impede ue o flex diminua a imagem*/
 display: block;
 height: 70px !important;
 width: 70px !important;
 object-fit:contain; /*impede a distorçao da imagem*/
 margin-left: auto; /*define a margem esquerda automaticamente*/
 margin-right:auto; /*define a margem direita automaticamente*/
}



.icone-text{
 font-size: 15px;
 font-weight: bold;/*deixa em negrito*/
 color: rgb(250, 250, 250);
 display: flex;
 text-align: center;
 margin: 0 auto;/*define a margem dele para o exterior vertical e horizontal*/
}


/**/
#notes{
    left: 25px;
    top:180px;
    z-index: 10;
}

#weather{
left:25px;
top:75px;
z-index:10;
}

#calculator{
left:120px;
top:75px;
z-index:10;
}

#search{
 left: 120px;
 top: 180px;
 z-index: 10;
}

#curiosities{
left: 20px;
top: 295px;
z-index: 10;
}

#differentGame{
left:120px;
top:295px;
z-index: 10;
}

#MemoryGame{
left:20px;
top:400px;
z-index: 10;
}




/*Window configurations*/
.window-geral{
position: absolute;
height: auto;
width: 300px;
z-index:10;
border-radius: 20px;
overflow: hidden;
left: 50px;
top: 50px;
backdrop-filter:blur(8px); /*efeito do borrado*/
}



.window-title{
 font-size:20px;
 height:35px;
 width:100%;
 background-color: rgba(66, 176, 188, 0.6);
 text-align: center;
 color: rgb(250, 250, 250);
 display: flex;
 justify-content: center;
 align-items: center;
 cursor: move; /*muda o cursor para o de movimento(4 setinhas)*/
 padding: 5px; /*nao aceita auto*/
}

.window-body{
background-color:rgba(83, 191, 206, 0.6);
min-height:100px;
width:100%;
font-size:20px;
padding:8px 10px;
color:rgb(250, 250, 250);
box-sizing: border-box;
cursor: move;
flex-direction: column;
display: flex;
align-items: center;
}




/*window start display*/
#window-wth{
    display:none; /*deixa invisivel*/
}

#window-nts{
    display:none;
}

#window-cltr{
    display:none;
}

#window-srch{
    display: none;
}

#window-crst{
    display:none;
}

#window-dfgm{
    display: none;
}

#window-mgame{
    display: none;
}




/*button types*/
.close-button{
top:10px;
right:5px;
position: absolute;
z-index:11;
border-radius: 50%;
width: 12px;     
height: 12px;
border:none;  /*tira a borda*/  
}

.enter-button{
border-radius: 15px;
border:none;
}

.number-button{
    width:50px;
    height:60px;
    background-color: rgba(83, 191, 206, 0.5);
    text-align: center;
    font-size: 30px;
    border-radius:20px;
    border:none;
}

.operation-button{
    width:50px;
    height:60px;
    text-align: center;
    font-size: 30px;
    background-color: rgba(47, 162, 164, 0.5);
    border-radius:20px;
    border:none;
}


.back{
    width:80px;
    min-height:20px;
    text-align: center;
    font-size: 15px;
    background-color: rgba(250, 248, 248, 0.5);
    border-radius:20px;
    border:none;
    position: absolute;
    left: 10px;
    bottom: 10px;
}

.next{
    width:80px;
    min-height:20px;
    text-align: center;
    font-size: 15px;
    background-color: rgba(250, 248, 248, 0.5);
    border-radius:20px;
    border:none;
    position: absolute;
    right: 10px;
    bottom: 10px;   
}


/*weather things*/
#city-name{
font-size:15px;
}

#city-weather{
font-size:15px;
}




/*calculator things*/
.calculator-screen{
    width: 100%;
    height: 45px;
    background-color: rgba(66, 176, 188, 0.6);
    font-size:25px;
    cursor:move;
    overflow: hidden;
    white-space: nowrap; /*impede que os numeros quebrem para a linha de baixo*/
    padding: 10px;
}

#screen{
 color: white;
 text-align:center;
}

.calculator-body{
    display: grid; /*organiza em grade*/
    grid-template-columns: repeat(4, 1fr); /*grade de 4 colunas e cada elemento ocupa 1 fraçao(desconta espaçamentos e calcula quanto cada elemento pode ter iguamente)*/
    width: 100%; /* faz ele ter a maior largura possivel*/
    min-height:300px;
    gap:2px 2px; /*espaços entre elementos*/
    padding:5px 5px;
    background-color: rgba(83, 191, 206, 0.6);
    cursor:move;
}


/*curiosities things*/
.variable-text{
    color:white;
    margin-top:15px;
    margin-bottom:30px;
    font-size: 20px;
}
.variable-window{
    width:100%;
    min-height:100px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}


/*game things*/
.game-window{
    width:100%;
    min-height:250px;
    color:white;
    justify-content: center;
    text-align: center;
    font-size: 20px;
    padding: 15px 15px; 
    gap:5px 5px;
    box-sizing: border-box;
}



.game-window button{
    background-color:rgba(83, 191, 206, 0.6);
    border:none;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    aspect-ratio: 1 / 1;
}

.Mgame-window{
    width:100%;
    min-height:250px;
    color:white;
    justify-content: center;
    text-align: center;
    font-size: 20px;
    padding: 15px 15px; 
    gap:5px 5px;
    box-sizing: border-box;
    }



.Mgame-window button{
    height: 25px;
    background-color:rgba(83, 191, 206, 0.6);
    border:none;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    }