@font-face {
    font-family: 'win95';
    src: url('../font/w95fa.woff2') format('woff2'),
    url('../font/w95fa.woff') format('woff'),
    url('../font/W95FA.otf') format('truetype');
}

html, body {
    overflow: hidden;
    height: 100%;
    margin: 0;
    padding: 0;
    cursor: url('../cursors/arrow.png'), auto;
}

body {
    background-color: #007f82;
    font-family: 'win95', sans-serif;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
}

.bottom-panel {
    border: #d0d8d8 solid 2px;
    border-bottom: #0c0c0c 1px solid;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #c0c0c0;
    height: 40px;
    line-height: 100%;
    cursor: url('../cursors/arrow.png'), default;
}

.time-container {
    position: absolute;
    right: 1%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #c0c0c0;
    padding: 8px;
    text-align: right;
    border-radius: 5px;
    font-weight: bold;
    border: 2px solid #80807e;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
}

.start-button {
    font-family: 'win95', sans-serif;
    text-align: right;
    font-weight: bold;
    height: 35px;
    width: 50px;
    margin: 2px;
    border-left: 2px solid #fffdfe;
    border-top: 2px solid #fffdfe;
    border-right: 2px solid #010100;
    border-bottom: 2px solid #010100;
    font-size: 16px;
    cursor: url('../cursors/hand.png'), default;
}

.windows-95-window {
    width: 95%;
    overflow: hidden;
    background-color: #c0c0c0;
    border: 2px solid #fcfdff;
    border-radius: 5px;
    box-shadow: 0 0 0 1px #000;
    position: absolute;
    top: 10px;
    left: 50%;
    height: auto;
    transform: translateX(-50%);
    max-width: 1365px;
    margin-bottom: 10%;
}

.windows-95-window img {
    width: 100%;
    object-fit: cover;
}

.title-bar {
    background-color: #010082;
    color: #fff;
    padding: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    display: flex;
    align-items: center;
    font-weight: bold;
    cursor: url('../cursors/arrow.png'), default;
}

.window-title {
    flex-grow: 1;
}

.window-buttons {
    display: flex;
}

.window-button {
    width: 15px;
    height: 15px;
    margin-right: 5px;
    border: 1px solid #fff;
    cursor: url('../cursors/hand.png'), default;
}

.window-button-close {
    cursor: url('../cursors/hand.png'), default;
    font-weight: bold;
}

.window-button:hover {
    background-color: #ff0000;
}

.close {
    background-color: #bec3c7;
}

.start-menu {
    position: absolute;
    min-height: 48%;
    bottom: 2%;
    background-color: #cccccc;
    width: 45%;
    max-width: 400px;
    min-width: 138px;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #666666;
    border-bottom: 2px solid #666666;
}

.blue-stripe {
    position: absolute;
    height: 100%;
    background-color: #666666;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    min-width: 10%;
    max-width: 50px;
}

.blue-stripe p {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    transform-origin: bottom;
    white-space: nowrap;
    font-size: 2vw;
    max-height: 100%;
}

.first-name {
    margin-bottom: 10vw;
    color: #cccccc;
    font-weight: bold;
}

.last-name {
    color: #ffffff;
}

.welcome-window-start {
    float: left;
    background-color: #cccccc;
    padding-right: 100%;
}

.welcome-window-start button {
    white-space: nowrap;
    font-size: 2vw;
    position: absolute;
    border: none;
    background: none;
    font-family: 'win95', monospace;
    box-sizing: border-box;
    display: flex;
    width: calc(100% - 2.9vw);
    margin-left: 2.9vw;
    margin-top: 2%;
    overflow: hidden;
    max-width: 200%;
}

.welcome-window-start p {
    margin: 0;
    font-size: 2vh;
}

.welcome-window-start p:first-letter {
    text-decoration: underline;
}

.welcome-window-start img {
    margin-left: 7%;
    height: auto;
    width: auto;
}

.countries-start {
    float: left;
    background-color: #cccccc;
    padding-right: 100%;
}

.countries-start button {
    white-space: nowrap;
    font-size: 2vw;
    position: absolute;
    border: none;
    background: none;
    font-family: 'win95', monospace;
    box-sizing: border-box;
    display: flex;
    width: calc(100% - 2.9vw);
    margin-left: 2.9vw;
    margin-top: 2%;
    overflow: hidden;
    max-width: 200%;
}

.countries-start p {
    margin: 0;
    font-size: 2vh;
}

.countries-start p:first-letter {
    text-decoration: underline;
}

.countries-start img {
    margin-left: 7%;
    height: auto;
    width: auto;
}