:root {
   --colour-teal: #008080;
   --colour-light: #E0E0E0;
   --taskbar-height: 32px;
   --desktop-icon-height: 85px;
   --desktop-icon-width: 110px;
}

* {
   padding: 0;
   margin: 0;
   overflow: hidden;
}

.hidden {
   display: none;
}

.space-med {
   height: 10px;
}

.notepad {
   position: absolute;
}

.notepadheader {
   cursor: move;
}

.screen {
   width: 100vw;
   height: 100vh;
}

.desktop {
   width: 100%;
   height: 100%;
   background-color: var(--colour-teal);
}

.desktop-icon-grid {
   display: grid;
   width: 100%;
   height: 100%;
   padding: 25px 15px;
   grid-template-columns: repeat(20, var(--desktop-icon-width));
   grid-template-rows: repeat(7, var(--desktop-icon-height));
   grid-auto-flow: column;
   gap: 30px;
   justify-items: center;
   text-align: center;
}

.desktop-icon {
   color: var(--colour-light);
   width: var(--desktop-icon-width);
   height: var(--desktop-icon-height);
}

.desktop-icon:hover {
   cursor: pointer;
}

.desktop-icon:active {
   color: blue;
}

.desktop-icon p {
   padding-top: 4px;
}

.taskbar {
   position: fixed;
   bottom: 0;
   left: 0;
   z-index: 26;
   width: calc(100% - 6px);
   height: var(--taskbar-height);
   display: flex;
   align-items: center;
   gap: 3px;
   padding: 3px;
   display: flex;
   justify-content: space-between;
}

.task-left {
   display: flex;
   gap: 5px;
}

.task-btn {
    height: calc(var(--taskbar-height) - 2px);
    font-size: 16px;
    padding: 0 50px;
}

.clock {
   font-size: 14px;
}

.start-btn {
   padding: 3px 2px;
   font-weight: 600;
   font-size: 18px;
}


.birth-message {
   width: 99vw;
   height: 98vh;
   margin: 0.5vh 0.5vw;
   position: fixed;
   z-index: 30;
}

.birth-title {
   font-size: 16px;
}

.birth-message-body {
   background-color: rgb(117, 1, 24);
   height: calc(99% - 15px);
}

.left-bmessage {
   width: 30%;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 3%;
   margin-top: 60px;
}


.right-bmessage {
   width: 70%;
   padding: 8px;
   margin: 15px;
}

.right-bmessage h4 {
   text-align: center;
   color: whitesmoke;
}

.square-photo {
   width: 50%;
   aspect-ratio: 1 / 1;
   border: 7px ridge var(--colour-light);
}

.square-photo img {
   width: 100%;
}

.bday-section {
   width: 70%;
   border: 2px ridge var(--colour-light);
   text-align: center;
   align-items: center;
   display: flex;
   flex-direction: column;
   gap: 10px;
   padding: 15px 0;
   color: whitesmoke;
}


.bday-section h5, p {
   font-size: 15px;
}

.bday-rsection {
   margin-top: 15px;
   padding: 15px 0;
   border: 2px ridge var(--colour-light);
   height: 15%;
   text-align: center;
   color: whitesmoke;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
}

.bday-btn-ctn {
   margin-top: 30px;
   display: flex;
   justify-content: space-between;
}

.bday-btn-ctn button {
   width: 45%;
   height: 50px;
   font-size: 20px;
   font-weight: bold;
}

button:hover {
   cursor: pointer;
}

.app-menu-bar {
   display: flex;
   gap: 5px;
   margin-left: 3px;
}

.menu-bar {
   height: 16px;
}

u {
   text-decoration: underline;
}