@import url("./style.css");

#welcome {
  background-color: #f1f1f1;
  border: 1px solid #d3d3d3;

  width: 400px;
  
  top: calc(30% - 90px);
  left: calc(50% - 180px);
}

#sealclicker {
  background-color: #93c3ea;
  border: 1px solid #83aed2;

  width: 100vw;
  
  top: 10.5vh;
  left: 0;
}

#sealtok {
  background-color: #000000;
  border: 1px solid #d3d3d3;

  width: 394px;
  
  top: calc(30% - 90px);
  left: calc(30% - 180px);
}

.windows{
  position: absolute;

  border: solid;
  border-color: var(--window-header-color);

  border-top-left-radius: 10px;
  border-top-right-radius: 10px;

  transform: scale(1);

  animation: scale 0.25s 1;
}

.windows.close{
  transform: scale(0);
  
  animation: scale-down 0.25s 1;
}

.icon{
  width: 32px;
  height: 100%;

  object-fit: contain;
}

.small_icon{
  width: 16px;
  height: 100%;

  object-fit: contain;
}

.child_text *{
  margin: 0;
  padding: 0;
}

.child_text p{
  padding: 0px;
  padding-top: 5px;

  margin: 0px;
}

.windows_header{
  display: flex;
  justify-content: space-between;
  align-items: center;

  cursor: var(--point-cursor);
  
  background-color: var(--window-header-color);
  border-color: var(--window-header-color);

  padding: 0px 5px;
  
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;

  position: relative;

  width: 100%;
  height: 35px;

  box-sizing: border-box;
}

.windows_header.active{
  cursor: var(--grab-cursor);
  background-color: var(--window-selected-header-color);
}

.window_body{
  display: flex;
  box-sizing: border-box;
  
  width: 100%;
  min-width: 100%;
  
  height: 300px;
  overflow: auto;

  flex-direction: column;

  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}

.windows_header.window_body *{
  margin: 0;
}

.minimize-button{
  border-color: #00000000;
  border-radius: var(--border-radius-s);

  color: white;
  background-color: var(--minimize-button-color);

  width: var(--window-buttons-width);
  height: var(--window-buttons-width);

  text-align: center;

  transform: scale(1);
  transition: 0.25s;
}

.minimize-button:hover{
  background-color: var(--minimize-button-hover-color);

  transform: scale(1.2);
}

.close-button{
  border-color: #00000000;
  border-radius: var(--border-radius-s);

  color: white;
  background-color: var(--close-button-color);

  width: var(--window-buttons-width);
  height: var(--window-buttons-width);

  text-align: center;

  transform: scale(1);
  transition: 0.25s;
}

.close-button:hover{
    background-color:  var(--close-button-hover-color);

    transform: scale(1.2);
}