/*icons--------------------------------------------------------------*/

.start {
border-radius: 100%;
float: left;
width: 40px;
height: 40px;
}

.task-con {
float: left;
max-width: 7%;
padding: 0 4px;
}

.hovr {
background: none;
transition: 0.3s;  
width: 100px;
height: 120px;
border-radius: 20px;
}

.start:hover {
box-shadow: 0px 0px 20px white;
cursor: pointer;
}

.hovr:hover {
background: rgba(170, 218, 250, 0.4);
border: 3px white;
}

.desk-con {
margin: auto;
padding: 5px 10px;
display: block;
position: relative;
max-width: 70px;
align-content: center;
}

/**/

.container {
height: 120px;
margin: 0 auto;
}

.image-stack {
display: grid;
position: relative;
grid-template-columns: repeat(12, 1fr);
}

.image-stack__item--bottom {
grid-column: 1 / -1;
grid-row: 1;
height: inherit;
width: inherit;
}

.image-stack__item--top {
grid-row: 1;
grid-column: 1 / -1;
padding-top: 0%;
z-index: 0;
height: inherit;
width: inherit;
}



/**/



.column {
float: left;
height: 800px;
width: 100px;
padding: 10px;
text-align: center;
}

/*windows--------------------------------------------------------*/

#window {
position: absolute;
text-align: center;
padding: 4px 4px;
background: rgba(79, 185, 255, 0.4);
border-radius: 20px;
border: 1px solid white;
outline: 1px solid black;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.9);
cursor: default;
backdrop-filter: blur(4.8px);
}

#windowhead {
z-index: 2;
cursor: move;
}

iframe {
border-radius: 0 0 20px 20px;
border: #3387D2 inset 2px;
}

win-special {
float: left;
height: 100%;
width: 20%;
}

.window {
background-color: rgba(255,255,255, 1);
border: 1px solid white;
outline: 1px solid black;
margin: 4px;
resize: both;
overflow: auto;
}

.window-text {
text-align: left;
margin: 6px 6px;
text-shadow: 0px 0px 10px #fff;
height: 21px;
}

win1 {
display: block;  
}
win2 {
visibility: hidden;
}

.window_bars {
display: flex;
height: 1.6em;
}

.web_search {
background-color:green;
border: 1px solid white;
border-radius: 2px;
outline: 1px solid black;
display: flex;
flex: 1;
flex-direction: row;
align-items: center;
margin-left: 10px;
}

.web_menu {
background-color: rgba(255,255,255, 1);
border: 1px solid white;
border-radius: 2px;
outline: 1px solid black;
display: flex;
flex-direction: row;
flex: 2;
align-items: center;
margin: 0 0 0 20px;
}

.tab-group {
display: block;
height: 3em;
}

.tab { 
border-radius: 10px 10px 0 0;
background-color: white;
width: 12em;
height: 3em;
margin: 2px 2px;
padding: 3px 0;
overflow: hidden;
float: left;
cursor: pointer;
}

.titlez {
color: linear-gradient(180deg, #42d9ff 50%, #0099f2 50%);
text-align: left;
font-size: 2em;
margin-left: 1em;
}

.goto, .home {
margin: 1px;
width: 1.5em;
height: auto;
transition: 0.5s;
}

.home {
filter: hue-rotate(90deg);
}

.goto:hover, .home:hover {
cursor:pointer;
transform: scale(1.05);
filter: brightness(110%) contrast(150%);
}

.goto:active, .home:active {
transition: 0.05s;
cursor:pointer;
transform: scale(1.05);
filter: brightness(80%) contrast(150%);
}

.topbar ul { /*Use variables from the iframme of the home screen to create custom-ish themes? So you can just replace the colors like that*/
list-style-type: none;
text-align: left;
margin: 0;
padding: 3px;
background: linear-gradient(#6DFF78, #008000);
display: block;
}

.topbar li {
display: inline;
}

.topbar li:hover {
background-color: #013a05;
color: white;
}

/*browser--------------------------------------------------------*/

/* ------------------------------------------------------------ */
.menu {
position: relative;
float: left;
}

.menu-display {
display: none;
position: relative;
background-color: #f1f1f1;
min-width: 100%;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
bottom: 120px;
}

/* ---------------------------------------------------------- */

body {
background-image: url("https://frutigeraeroarchive.org/images/wallpapers/windows_stock_photos/windows_stock_photos_34.jpg");
background-repeat: repeat;
background-size: cover;
font-family: "Noto Sans";
}

footer {
background: rgba(79, 185, 255, 0.6);
border-top: 1px solid #ffffff;
position: fixed;
bottom: 0;
left:0;
width: 100%;
height: 42px;
text-align: right;
line-height: 0.1;
color: white;
display: block;
padding: 5px 5px;
backdrop-filter: blur(3.8px);
justify-content: center;
align-items: center;
}

.window-content {
background-color: white;
}

/*buttons*/

.united {
display: block;
float: right;
margin: -34px 0px;
font-weight: bold;
font-size: 1px;
color: white;
transform: scale(120%);
width: 130px;
height: 40px;
}

.lefbut {
font-weight: bold;
border: 1px solid white;
outline: 1px solid black;
background: linear-gradient(to bottom,  rgba(224,243,250,1) 0%,rgba(216,240,252,1) 50%,rgba(184,226,246,1) 51%,rgba(182,223,253,1) 100%);
cursor: pointer;
transition: 0.4s;
text-align: center;
padding: 0 8px;
}

.ribut {
font-weight: bold;
border: 1px solid white;
border-radius: 0 0 0 5px;
outline: 1px solid black;
background: linear-gradient(to bottom,  rgba(224,243,250,1) 0%,rgba(216,240,252,1) 50%,rgba(184,226,246,1) 51%,rgba(182,223,253,1) 100%);
cursor: pointer;
transition: 0.2s;
padding: 0 8px;
}

.closebut {
font-weight: bold;
border: 1px solid white;
border-radius: 0 0 5px 0;
outline: 1px solid black;
cursor: pointer;
background: linear-gradient(to bottom,  rgba(243,197,189,1) 0%,rgba(255,107,81,1) 50%,rgba(255,68,68,1) 51%,rgba(255,99,61,1) 75%,rgba(255,68,68,1) 100%);
transition: 0.2s;
padding: 0 20px;
}

.ribut:hover, .lefbut:hover {
background: linear-gradient(to bottom,  rgba(183,222,237,1) 0%,rgba(113,206,239,1) 50%,rgba(33,180,226,1) 51%,rgba(183,222,237,1) 100%);
box-shadow: 0 0 20px #4fa7ff, 0 0 20px #0a85ff;
outline: 1px solid #056cb0;
}

.closebut:hover {
background: linear-gradient(to bottom,  rgba(243,197,189,1) 0%,rgba(255,107,81,1) 50%,rgba(255,5,5,1) 51%,rgba(252,75,0,1) 75%,rgba(255,0,0,1) 100%);
box-shadow: 0 0 20px #ff5900;
outline: 1px solid #8c6048;
}

.ribut:active, .lefbut:active {
background: linear-gradient(to bottom,  rgb(109,179,242) 0%,rgb(84,163,238) 50%,rgb(54,144,240) 51%,rgb(30,105,222) 100%);
box-shadow: 0 0 20px #4fa7ff, 0 0 20px #0a85ff;
outline: 1px solid #056cb0;
}

.closebut:active {
background: linear-gradient(to bottom,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
box-shadow: 0 0 20px #ff5900;
outline: 1px solid #8c6048;
}

/*Search bar---------------------------------------------------*/

.contain-search {
border-radius: 20px;
float: left;
width: 400px;
height: 30px;
display: flex;
align-items: center;
text-align: left;
justify-content: center;
color: black;
background-color: white;
transition: 0.3s;
padding: 0 5px; 
}

input {
width: 300px;
height: 20px;
all: unset;
transition: 0.3s;
}

::placeholder {
color: #000;
opacity: 0.3; 
}