@font-face {
    font-family: 'windows-regular';
    src: url(./Windows_Regular.ttf);
}

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Layout */

body {
    font-family: windows-regular;
    background-color: #008080;
    color: white;
    width: 100vw;
    height: 100vh;
    overflow:hidden;
    position:relative;
    margin: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
}
  
header {
    min-height: 20px;
}

.resizable {
    bottom: 0;
    position:absolute;
}

.ui-resizable {
    position: fixed !important;
}

/* Column Styling */

a {
    font-style:normal;
    text-decoration: none;
    color: white;
}

.icon {
    cursor: pointer;
}

.desktop-icon.icon:active {
    background-color:#306db79d
}

.icons-column {
    width: 8%;
    float: left;
    text-align: center;
    position:absolute;
}

.icons-column img {
    width: 56px;
    padding-left: 10px;
    padding-top: 12px;
}

.icons-column img :nth-child() {
    padding-top: 30px;
}

.icons-column h1 {
    font-size: 17px;
    letter-spacing: 0.3px;
    font-weight: lighter;
    padding: 0;
    margin: 0;
}

.icons-column .draggable :active {
    background-color:#306db79d
}

.draggable:has(:active) .child {
    background-color:#306db79d
}

/* Tab Styling */

.tab-header {
    width: inherit;
    z-index: 1;
    height: 24px;
    overflow: hidden;
    background:
        linear-gradient(to right, #01087E,#3A7DC7);
    border-color: #C5C5C5;
    border-width: 2px;
    border-style:solid;
    position: fixed;
    cursor: pointer;
}

.tab-header p {
    z-index: 1;
    font-size: 15px;
    font-weight: bold;
    padding: 3px 0px;
    letter-spacing: 2px;
    margin: 0;
    position: relative;
    float: left;
}

.tab-header img {
    float: left;
    position: relative;
    margin: 3px 9px;
    width: 20px;
}

.tab-content {
    color:black;
    float: left;
    position: relative;
    margin: 1rem 1rem;
    padding: 0rem 1rem;
}

.tab {
    display:none;
    position: absolute;
    position: fixed;
    direction:ltr;
    background-color: #FFFFFF;
    border-color: black;
    border-width: 2px;
    border-style:solid;
}

.tab .content {
    z-index: 1;
    overflow-y: scroll;
}

.exit {
    position: relative;
    float:right;
    width: 16px;
    height: 16px;
    background-color:#A0A0A0;
    color: black;
    font-weight: bold;
    margin-right: 10px;
    margin-top: 2px;
    text-align: center;
    border-color: rgba(0, 0, 0, 0.612);
    border-width: 2px;
    border-style:solid;
    box-shadow: -1px -1px 1px rgba(252, 252, 252, 0.877), 1px 1px 1px rgb(0, 0, 0), inset 0px 2px 4px rgba(240, 240, 240, 0.788);
}

.exit:hover {
    cursor: pointer;
}

.exit:active {
    background-color:#5a5a5a;
    color: white;
}

/* Weather Tab */
.weather {
    display: block;
    visibility: hidden;
    z-index: 1;
    position: fixed;
    width: 49vw;
    height: 55vh;
    bottom: 10vh;
    left: 5vw;
}

.weather iframe {
    transform: scale(0.5);
    transform-origin: 0 0;
    position: absolute;
    width: 200%;
    height: 190%;
}



/* About Tab Styling */
.about {
    display: block;
    visibility: visible;
    z-index: 1;
    position: fixed;
    width: 45vw;
    height: 67vh;
    overflow-y: scroll;
    overflow-x: hidden;
    bottom: 20vh;
    left: 25vw;
}

.content {
    margin-top: 24px;
    overflow-x: hidden;
}

.about .tab-content {
    margin: 20px 10px;
    margin-right: 5px;
}

.about .tab-content .header-img {
    width: 37%;
    position:relative;
    margin-bottom: 0;
}

.about .tab-content.first {
    margin-bottom: 0;
}

.about .tab-content.first p {
    width: 60%;
    margin-left: 0;
    font-size: 21px;
}

.about .tab-content p {
    font-size: 21px;
    margin-left: 20px;
    padding:0;
    margin:0;
    width: 100%;
    float:right;
}

.about .callout {
    margin: auto;
    margin-bottom: 0px;
    margin-top: 8px;
    width: 50%;
    text-align: center;
    cursor: pointer;
}

.about .callout img {
    width: 30%;
    float:left;
    position: relative;
    margin-top: 5px;
    margin-bottom: 10px;
}

.about .callout h1 {
    font-size: 29px;
    letter-spacing: 1px;
    width: 30%;
    float:left;
    padding: 0;
    margin: 30px 40px;
}

.about .callout h1:hover {
    color:#3b60e9;
}

.about span {
    font-size: 25px;
    font-weight: bold;
    color:#0b2585;
}

.about a {
    color: black;
}


.about span.name {
    font-size: 27px;
}

/* Desktop Tab Styling */

.desktop {
    display: block;
    visibility: visible;
    position: absolute;
    overflow-y:hidden;
    position: fixed;
    z-index: 1;
    width: 30vw;
    height: 320px;
    top: 8vh;
    left: 57vw;
}

.desktop-icon {
    width: 100%;
    display: flex;
    flex-direction: row;
    text-align: center;
    margin-bottom: 16px;
    margin-right: 24px;
}

.desktop a {
    display: flex;
    flex-direction: row;
    font-style:normal;
    color: black;
}

.tab-content {
    margin: 16px 8px 16px;
}

.tab-content p {
    font-size: 21px;
    letter-spacing: 1px;
}

.desktop-icon img {
    width: 48px;
    padding-left: 16px;
}

.desktop-icon h1 {
    width: 50px;
    font-size: 21px;
    font-weight: bold;
    margin-left: 20px;
    padding: 0;
}

/* Research Tab */

.research {
    width: 55vw;
    height: 70vh;
    display:hidden;
    visibility: hidden;
    background-color:#ffffff;
    position: fixed;
    z-index:1;
    top: 8vh;
    left: 5vw;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: center;
    text-align: left;;
    color: white;
}

.research.ui-resizable {
    z-index: 2;
    position: fixed;
}

.research h1 {
    margin: 0;
    padding: 0;
}

.research img.hip67522 {
    width: 100%;
}

figcaption {
    font-size: 20px;
}

.research .content p {
    margin-top: 3px;
    padding: 0;
    font-size: 21px;
}

.research span {
    color:#1f46d3;
}

.research span.italic {
    color:black;
    font-style: italic;
}

.research span.bold {
    font-weight: bold;
}

.research a{
    color:#1f46d3;
}

.research a:hover {
    color:#87a0f8;
}

.research figure {
    text-align: center;
}

/* Site Specs */
.site {
    width: 300px;
    height: 370px;
    display:block;
    visibility: hidden;
    background-color:#e2e1e1;
    position: fixed;
    z-index: 1;
    top: 40vh;
    left: 10vw;
    overflow-y:hidden;
    text-align: center;
}

.site .content {
    margin-top: 2rem;
    margin: 2rem 5px;
    color: black;
}

.site p {
    margin: 0px 2px;
    font-size: 17px;
}

.site a {
    color:rgb(19, 73, 166)
}

.site a:hover {
    color:rgb(94, 138, 214);
}

.site h1 {
    font-size: 24px;
    margin-top: 5px;
    margin-bottom: 8px;
}

.site .music {
    margin-top: 12px;
}

.site .icons {
    margin-top: 10px;
}

/* Projects Tab */
.projects {
    width: 60vw;
    height: 80vh;
    /* visibility:visible; */
    /* display:block; */
    display:hidden;
    visibility: visible;
    background-color:#ffffff;
    position: fixed;
    z-index: 1;
    top: 5vh;
    left: 4vw;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: center;
    text-align: left;;
}

.project.ui-resizable {
    z-index: 2;
    position: fixed;
}

.projects .content {
    z-index: -1;
    overflow-y:scroll;
}

.projects h2 {
    font-size: 30px;
    color:rgb(19, 73, 166);
    padding: 0 0 0px;
    margin: 0;
}

.projects .content a {
    color:rgb(19, 73, 166);}

.projects .content p {
    margin-top: 3px;
    padding: 0;
}

.projects .caption {
    font-style: italic;
    font-size: 15px;
    font-weight: lighter;
    margin: 0;
    padding: 0;
}

.projects .caption.last {
    padding-bottom: 5px;
}

.projects .bold {
    font-weight: bold;
}

.projects p img {
    width: 100%;
    padding: 12px 0 12px;
    border-radius: 20px;
}

.projects p img.csxl {
    width: 24%;
}

.projects p.art-container {
    display:block;
    flex-direction: row;
    text-align: center;
}

.projects p img.art {
    width: 32%;
    border-radius: 20px;
}

/* Recycling Tab Styling */
.recycling {
    display: block;
    visibility: hidden;
    position:fixed;
    background-color:#B0B0B0;
    z-index: 1;
    position: fixed;
    width: 40vw;
    height: 45vh;
    overflow-x: hidden;
    bottom: 20vh;
    left: 15vw;
}


.box-container {
    display:flex;
    flex-direction:column;
    float:left;
    width:100%;
    align-items:flex-start;
}

.recycling .address {
    display:block;
}


.file-header {
    background-color:#E1E1E1;
    color:black;
    position:absolute;
    height: 20px;
    display:flex;
    flex-direction: row;
    float:left;
    font-weight: bolder;
    padding: 5px 15px;
    letter-spacing: 3px;
    padding-right: 45vh;
    box-shadow: inset -1px -1px 2px #909090;
    border:1px white solid;
    z-index:0;
}

.recycle-contentcontainer {
    display:flex; 
    flex-direction: row;
    color:black;
    width: 100%;
    /* padding: 100%; */
    height: 10%;
    background-color: white;
}

.recycle-contentcontainer .inside-content {
    display:block;
    align-items: center;
    flex-direction:row;
    text-align:center;
    width: 100%;
}

.recycle-contentcontainer .inside-content.left {
        margin:0;
        padding:20px;
        box-shadow: inset 20px 20px 40px 20px #85B7DD

}

.recycle-contentcontainer .left {
    width:40%;
    background-color: white;
    float:left;
    text-align: left;
    margin-left: 20px;
    margin-right: 10px;
}

.recycle-contentcontainer .left img {
    width: 40px;
    left:0;
    float: left;
    /* margin-top: 20px; */
    margin-bottom: 0px;
    padding:0;
}

.recycle-contentcontainer .left h1 {
    margin: 0;
    font-weight: bolder;
    padding:0;
}

.recycle-contentcontainer .left p {
    font-weight:bold;
    letter-spacing: 1px;
}

.recycle-contentcontainer .right {
    width:60%;
    background-color: white;
    overflow-x: scroll;
    overflow-y: scroll;
    float:right;
}


.file-header button {
    font-size: 15px;
    background-color:#01077e00;
    border: none;
    font-family: 'windows-regular';
}

/* Minesweeper Tab Styling */

.minesweeper {
    display: block;
    visibility: visible;
    position: absolute;
    overflow-y:hidden;
    position: fixed;
    z-index: 1;
    width: 40vw;
    height: 500px;
    top: 8vh;
    left: 15vw;
}

.minesweeper-icon {
    width: 100%;
    display: flex;
    flex-direction: row;
    text-align: center;
    margin-bottom: 16px;
    margin-right: 24px;
}

.minesweeper a {
    display: flex;
    flex-direction: row;
    font-style:normal;
    color: black;
}

.tab-content {
    margin: 16px 8px 16px;
}

.tab-content p {
    font-size: 21px;
    letter-spacing: 1px;
}

.minesweeper-icon img {
    width: 48px;
    padding-left: 16px;
}

.minesweeper-icon h1 {
    width: 50px;
    font-size: 21px;
    font-weight: bold;
    margin-left: 20px;
    padding: 0;
}

/* Footer Styling */

footer {
    position:fixed;
    width: 100vw;
    min-height: 24px;
    background: #C5C5C5;
    bottom:0;
    z-index: 50;
}

.windows-button {
    font-family: 'windows-regular';
    min-width: 100px;
    font-weight: bolder;
    margin: 8px 8px 8px;
    height: 32px;
    box-shadow: 2px 2px black, -2px -2px .1em white;
    border-color: rgba(0, 0, 0, 0);
    background-color: #C5C5C5;
    float:left;
}

footer .windows-large {
    margin-bottom: 10px;
}

.windows-button:active {
    background-color: #A0A0A0;
    color:white;
}

.windows-button h1 {
    font-size: 20px;
    float:right;
    padding: 0;
    margin: 0;
}

footer .url {
    font-size: 16px;
    float:left;
    font-weight: bold;
    background-color: #B6B6B6;
    padding: 3px 15px;
    text-shadow: 2px 2px 1px black;
    letter-spacing: 3px;
    margin-left: 10px;
    margin-top: 10px;
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.274); 
}

footer .music-box {
    display:flex;
    font-size: 16px;
    float:left;
    font-weight: bolder;
    background-color: #B6B6B6;
    padding: 2px 15px;
    letter-spacing: 3px;
    margin-left: 10px;
    margin-top: 10px;
    margin-right: 10px;
    box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.274); 
    text-align: center;
}

.play-button {
    float:left;
    width: 16px;
    height: 20px;
    padding-left: 2px;
    margin-top: 3px;
    margin-left: 10px;
    background-color: #C5C5C5;
    cursor: pointer;
    text-shadow: 1px 1px 1px black;
    box-shadow: -1px -1px 1px rgba(252, 252, 252, 0.877), 1px 1px 1px rgb(0, 0, 0), inset 0px 2px 4px rgba(240, 240, 240, 0.788);
}

.play-button.first {
    margin-left: 0px;
}

.skip {
    width: 24px;
}

.song-name {
    font-size: 16px;
    margin-left: 10px;
    margin-top: 3px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    text-shadow: 2px 2px 1px rgb(0, 0, 0);
}

footer #clock {
    font-size: 16px;
    float:right;
    font-weight: bolder;
    background-color: #B6B6B6;
    padding: 3px 15px;
    color: white;
    letter-spacing: 3px;
    margin-left: 10px;
    margin-top: 7px;
    margin-right: 10px;
    text-shadow: 2px 2px 1px black;
    box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.274); 
}