@font-face {
   font-family: "Win95";
   src: url("media/W95FA.otf");
}

.font{
   font-family: Win95;
}

h1{
   font-family: Win95;
   font-size: 48px;
   color: #000000;
   margin: 0px;
   text-shadow: 2px 2px 0px #ffffff;
}

h2{
   margin-top: 5px;
   font-size: 20px;
}

body{
   margin: 0px;
   padding: 0px;
   height: 100vh;
   width: 100vw;
   font-family: Win95;
   overflow: hidden;
}

#bootOverlay {
   margin: 0;
   padding: 0;
   position: fixed;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   z-index: 2000;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: black;
   opacity: 1;
   transition: opacity 1s;
}

#bootLogo {
   width: 50px;
}

@media screen and (max-width: 800px) {
   #bootLogo {
      width: 120px;
   }   
}

#bootContent{
   color: white;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100%;
   width: 70%;
   text-align: center;
}

#bootContent h3{
   font-size: 2.5em;
   margin-top: 10px;
   margin-bottom: 0px;
}

#bootContent p{
   margin: 0px;
   padding: 20px 0px 0px 0px;
   z-index: 2001;
   font-size: 20px;
}

#bootContent button{
   margin: 20px 0px 0px 0px;
   padding: 10px 20px;
   background-color: #c7c7c7;
   border-top: 2px solid #f4f4f4;
   border-left: 2px solid #f4f4f4;
   border-right: 2px solid black;
   border-bottom: 2px solid black;
   font-family: Win95;
   font-size: 20px;
   cursor: pointer;
}

@media screen and (max-width: 800px) {
   #desktop{
      display: none;
   }
}

#desktop {
   background: url("media/wallpapers/wallpaperdefault.jpg");
   background-size: cover;
   height: calc(100% - 80px);
   width: auto;
   padding: 20px 0px;
}

#desktopIconsTable {
   table-layout: auto;
   width: 100%;
 }

 #desktopIconsTable td{
   width: 120px;
   height: 120px;
 }

 #desktopIconsTable td div{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }

#taskbar{
   width: 100%;
   height: 40px;
   background-color: #D9D9D9;
   position: fixed;
   bottom: 0;
   border-top: 3px solid #f4f4f4;
   display: flex;
   align-items: center;
   justify-content: space-between;
   z-index: 1999;
}

#taskbarLeft{
   display: flex;
   align-items: center;
   justify-content: center;
}

#startButton{
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0px 10px 0px 2px;
   background-color: #c7c7c7;
   font-size: 17px;
   height: 35px;
   width: 100px;
   border-top: 3px solid #f4f4f4;
   border-left: 3px solid #f4f4f4;
   border-right: 3px solid black;
   border-bottom: 3px solid black;
}

#startButton img{
   width: 25px;
   margin: 0px;
}

.start-menu-open{
   font-weight: bold;
   width: 150px;
   background-color: #c7c7c7;
   height: 30px;
   margin-right: 2px;
   background-color: #D9D9D9 !important;
   border-top: 2px solid black !important;
   border-left: 2px solid black !important;
   border-right: 2px solid #f4f4f4 !important;
   border-bottom: 2px solid #f4f4f4 !important;
}

#startMenu{
   position: absolute;
   bottom: 36px;
   left: 2px;
   width: 200px;
   background-color: #c7c7c7;
   border-top: 2px solid #f4f4f4;
   border-left: 2px solid #f4f4f4;
   border-right: 2px solid black;
   border-bottom: 1px solid black;
   display: none;
   z-index: 100000;
}

#menuSidebar{
   position: relative;
   background-color: #9c9c9c;
   width: 15%;
}

#menuSidebar p{
   position: absolute;
   bottom: 41px;
   left: -44px;
   margin: 0px;
   width: 115px;
   padding: 5px 0px;
   font-size: 27px;
   font-weight: bold;
   color: #c7c7c7;
   rotate: -90deg;
   pointer-events: none;
}

#menuItems{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 90%;
   overflow: clip;
   margin-right: auto;
}

.menuButton{
   display: flex;
   align-items: center;
   justify-content: left;
   width: 100%;
   height: 40px;
   padding-left: 10px;
   background-color: #c7c7c7;
   border-right: 2px solid black;
   border-bottom: 2px solid black;
   user-select: none;
   cursor: pointer;
}

.menuButton:hover{
   background-color: #2e0a88;
   color: white;
}

.menuButton img{
   width: 30px;
   margin: 0px 5px;
}

.menuButton p{
   padding-left: 10px;
}

#taskbarItems{
   display: flex;
   justify-content: left;
   max-width: 90%;
   overflow: clip;
   margin-right: auto;
}

#taskbarItems p{
   pointer-events: none;
}

.tb-icon{
   display: flex;
   align-items: center;
}

.tb-icon img{
   width: 20px;
   margin: 0px 5px;
}

.taskbar-block{
   width: 150px;
   background-color: #c7c7c7;
   height: 30px;
   margin-right: 2px;
   border-top: 2px solid #f4f4f4;
   border-left: 2px solid #f4f4f4;
   border-right: 2px solid black;
   border-bottom: 2px solid black;
}

.taskbar-block-selected{
   font-weight: bold;
   width: 150px;
   background-color: #c7c7c7;
   height: 30px;
   margin-right: 2px;
   background-color: #D9D9D9;
   border-top: 2px solid black;
   border-left: 2px solid black;
   border-right: 2px solid #f4f4f4;
   border-bottom: 2px solid #f4f4f4;
}

.context-menu {
   position: fixed;
   z-index: 10000;
   background-color: #dbdbdb;
   border-top: 2px solid #f4f4f4;
   border-left: 2px solid #f4f4f4;
   border-right: 2px solid black;
   border-bottom: 2px solid black;
   min-width: 120px;
 }

 .context-menu-option {
   padding: 8px 12px;
   cursor: pointer;
   user-select: none;
 }

 .context-menu-option:hover {
   background-color: #2e0a88;
   color: white;
 }

#time{
   margin: 0px 2px;
   background-color: #c7c7c7;
   height: 32px;
   width: 100px;
   border-top: 2px solid #868686;
   border-left: 2px solid #868686;
   border-right: 3px solid #f4f4f4;
   border-bottom: 3px solid #f4f4f4;
   display: flex;
   align-items: center;
   justify-content: center;
   pointer-events: none;
}

.window {
   width: 600px;
   height: 400px;
   min-width: 400px;
   min-height: 300px;
   position: absolute;
   overflow: hidden;
}

.window .resizer {
   position: absolute;
   z-index: 1;
   width: 10px;
   height: 10px;
}

.window .resizer.corner {
   z-index: 2;
}

.window .resizer.corner.tl {
   cursor: nw-resize;
   top: 0px;
   left: 0px;
}

.window .resizer.corner.tr {
   cursor: ne-resize;
   top: 0px;
   right: 0px;
}

.window .resizer.corner.bl {
   cursor: sw-resize;
   bottom: 0px;
   left: 0px;
}

.window .resizer.corner.br {
   cursor: se-resize;
   bottom: 0px;
   right: 0px;
}

.window .resizer.t,
.window .resizer.b {
   width: 100%;
   height: 5px;
}

.window .resizer.l,
.window .resizer.r {
   width: 5px;
   height: 100%;
}

.window .resizer.t {
   cursor: n-resize;
   top: 0px;
   border-top: 2px solid #f4f4f4;
}

.window .resizer.b {
   cursor: s-resize;
   bottom: 0px;
   border-bottom: 2px solid black;
}

.window .resizer.l {
   cursor: w-resize;
   left: 0px;
   border-left: 2px solid #f4f4f4;
}

.window .resizer.r {
   cursor: e-resize;
   right: 0px;
   border-right: 2px solid black;
}

.window .body {   
   width: 100%;
   height: 100%;
   background: #c7c7c7;
   overflow: hidden;
}

.window .body .topbar {
   padding: 0px 5px 0px 20px;
   background: rgb(38,4,118);
   background: linear-gradient(90deg, rgba(38,4,118,1) 0%, rgba(38,4,118,1) 65%, rgba(203,45,125,1) 100%);
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.window .body .topbar .windowname {
   font-size: 16px;
   color: white;
   pointer-events: none;
}

.window .body .topbar .btns {
   display: flex;
}

.window .body .topbar .btns button {
   margin: 0px 2px;
   background-color: #c7c7c7;
   height: 30px;
   width: 30px;
   border-top: 2px solid #f4f4f4;
   border-left: 2px solid #f4f4f4;
   border-right: 2px solid black;
   border-bottom: 2px solid black;
}

.window .body .content{
   width: auto;
   height: calc(100% - 80px);
   overflow: auto;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 20px;
   position: relative;
}

.window .body .description{   
   min-width: 200px;
   max-width: 600px;
   top: 0px;
   left: 0px;
}

.window .body .browserContent{
   width: 100%;
   height: calc(100% - 40px);
   overflow: auto;
   display: flex;
   justify-content: center;
   align-items: center;   
}

.window .body .image img{
   width: 200px;
   padding: 0px 10px;
}

.icon {
   cursor: pointer;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.icon img{
   width: 70px;
   height: 70px;
}

.icon p {
   font-size: 16px;
   margin: 3px 0px 0px 0px;
   padding: 5px 5px;
   color: white;
}

.icon-selected img{
   filter: brightness(60%) sepia(100%) hue-rotate(190deg) saturate(500%);
}

.icon-selected p{
   background-color: #00008099;
}
 
.inactive-window {
   filter: grayscale(0.8);
}

.inactive-window .windowname h3{
   color: rgb(148, 148, 148);
}

#addressbar{
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

#addressbar input{
   width: 95%;
   height: 30px;
   border-top: 2px solid #868686;
   border-left: 2px solid #868686;
   border-right: 3px solid #f4f4f4;
   border-bottom: 3px solid #f4f4f4;
   font-family: Win95;
   font-size: 16px;
   margin-right: 8px;
   padding: 0px 5px;
}

#addressbar input:focus{
   outline: none;
}

#addressbar button{
   width: 5%;
   height: 33px;
   margin-right: 5px;
   border: none;
   background-color: #c7c7c7;
   border-top: 2px solid #f4f4f4;
   border-left: 2px solid #f4f4f4;
   border-right: 2px solid black;
   border-bottom: 2px solid black;
   font-family: Win95;
}

iframe{
   width: 100%;
   height: 100%;
   border: none;
}

.iframe_loading {
   background:url(media/loading.gif) center center no-repeat;
   background-size: 50px;
   height: 100%;
}

.rainbow-letters {
   transition: color .5s;
}
 
.rainbow-letters:hover{
   color: rgb(183, 59, 192);
}

.rainbow-letters span {
   position: relative;
   display: inline-block;
   animation-delay: calc(.1s * var(--i));    
}

@keyframes waviy {
   0%, 100% {
       transform: translate3d(0, 0, 0);
   }
   50% {
       transform: translate3d(0, -4px, 0);
   }
}

.contactButtons{
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 20px;
   gap: 40px;
}

.contactButtons a:hover{
   transform: translate(0, -5px) scale(1.1);
}