floppy-venture/src/index.css

body {
}

* {
    margin:0;
    padding:0;
}

*:focus {
    outline: none;
}

h1 {
    margin-top:5rem;
    text-align:center;
}

@font-face {
    font-family: "iosevka";
    src: url('/assets/iosevka-regular.ttf');
}

.controls {
    position: fixed;
    top:0;
    left: 90px;
    z-index: 90000;
    display:flex;
    color:#ffeeff;
}

.Resizer {
    background: #000;
    opacity: .2;
    z-index: 1;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-background-clip: padding;
    -webkit-background-clip: padding;
    background-clip: padding-box;
}

.Resizer:hover {
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
}

.Resizer.horizontal {
    height: 11px;
    margin: -5px 0;
    border-top: 5px solid rgba(255, 255, 255, 0);
    border-bottom: 5px solid rgba(255, 255, 255, 0);
    cursor: row-resize;
    width: 100%;
}

.Resizer.horizontal:hover {
    border-top: 5px solid rgba(0, 0, 0, 0.5);
    border-bottom: 5px solid rgba(0, 0, 0, 0.5);
}

.Resizer.vertical {
    width: 11px;
    margin: 0 -5px;
    border-left: 5px solid rgba(255, 255, 255, 0);
    border-right: 5px solid rgba(255, 255, 255, 0);
    cursor: col-resize;
}

.Resizer.vertical:hover {
    border-left: 5px solid rgba(0, 0, 0, 0.5);
    border-right: 5px solid rgba(0, 0, 0, 0.5);
}

.Resizer.disabled {
    cursor: not-allowed;
}

.Resizer.disabled:hover {
    border-color: transparent;
}

.fncontainers {
    display:flex;
    height:fit-content;
    width:8rem;
    flex-flow: column;
}

.fncontainer {
    width:16rem;
    margin-bottom:0.8rem;
    height:12rem;
}

.fncontainer h3 {
    text-indent:-2rem;
    color:#9bf;
    display:block;
    margin-bottom:0.5rem;
    margin-top:0.4rem;
    pointer-events:none;
    user-select:none;
}

.ops {
    list-style-type:none;
    display:flex;
    flex-flow: row wrap;
    min-height:8rem;
    position:absolute;
    width:16rem;
}

.op {
    list-style-type:none;
    background:#444;
    border: 0.1rem solid black;
    border-radius: 0.2rem;
    width:3.8rem;
    height:3.8rem;
    user-select:none;
    cursor:grab;
}

.op img {
    width:100%;
    pointer-events:none;
}

.opspalette {
    background:#122;
    display:flex;
    flex-flow: row;
    padding-top: 1.6rem;
    padding-bottom:1rem;
    width:100%;
    justify-content:space-around;
}

.opindicators {
    display:flex;
    flex-flow: row wrap;
    position:absolute;
    z-index:-2;
    width:16rem;
}

.opindicator {
    width:4rem;
    height:4rem;
    background:#555;
}

.opdropzones {
    position:absolute;
    display:flex;
    flex-flow: row wrap;
    width:16rem;
}

.opdropzone {
    width:4rem;
    height:4rem;
    
    background:#1119;
}

.frontdropper {
    width:1rem;
    height:4rem;
}

.levelname {
    margin-top:1rem;
    margin-bottom:0.4rem;
    margin-left:2rem;
    color:#666;
    user-select:none;
}

.titlebar{
    background:#122;
    width:100%;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
}

.game {
    /* width:100vw; */
    /* height:100vh; */
    display:flex;
    flex-direction: row;
}

.editor {
    align-items: center;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    width:100%;
    height:100vh;
    font-family:iosevka;
    color:#fff;
    border-left: solid #112 0.4rem;
}

.controlbuttons {
    display:flex;
    flex-direction:row;
    margin-right:2rem;
    margin-top:0.4rem;
    height:2.4rem;
    gap: 0.5rem;
}

.controlbutton {
    padding: 0.7rem 1.4rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    border-radius: 0.5rem;
    cursor:pointer;
    user-select:none;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.15s ease;
    color: #fff;
}

.controlbutton span {
    line-height: 1;
}

.controlbutton.run {
    background: #2a7;
}

.controlbutton.run:hover {
    background: #3b8;
}

.controlbutton.levels {
    background: #48b;
}

.controlbutton.levels:hover {
    background: #59c;
}

.controlbutton.settings {
    background: #636;
}

.controlbutton.settings:hover {
    background: #747;
}

.controlbutton.debug {
    background: #eA5;
    color: #222;
}

.controlbutton.debug:hover {
    background: #fb6;
}

.controlbutton.step {
    background: #48b;
}

.controlbutton.step:hover {
    background: #59c;
}

.controlbutton.reset {
    background: #4af;
}

.controlbutton.reset:hover {
    background: #5bf;
}

.controlbutton.speed {
    background: #636;
}

.controlbutton.speed:hover {
    background: #747;
}

.controlbutton.abort {
    background: #e55;
}

.controlbutton.abort:hover {
    background: #f66;
}

.modal-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: 0.4rem;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.modal-button:hover {
    filter: brightness(1.1);
}

.modal-button.levels {
    background: #48b;
}

.modal-button.next {
    background: #2a7;
}

.levelSelectCaption {
    font-family:iosevka;
    color:#9bf;
    text-align:left;
    margin-bottom:1rem;
}

.levelItems {
    max-width: 25rem;
    width:100%;
    margin:auto;
    text-align: center;
    /* padding: 1rem; */
       /* display: flex; */
    /* flex-direction: col; */
    /* justify-content:space-between */
}

.levelItem {
    width: 100%;
    max-width: 25rem;
    height: 96px;
    user-select:none;
    /* margin:1rem; */
    /* background:#343; */
    border: 0.1rem solid #112;
    display:flex;
    justify-content:center;
    text-align:center;
    font-family:iosevka;
    /* box-shadow: 0.2rem 0.5rem 1rem 0px rgba(24, 14, 28, 0.5); */
}

.levelItems a {
    margin-top: 1rem;
    display: block;
    background: #555;
    border-radius: 0.5rem;
    color:#3da;
    font-family:iosevka;
    font-size: 2em;
    text-decoration:none;
 
}

.levelItems a:hover div{
    color: #3c0;
    background:#363;
}

.levelItem p {
    margin:auto;
}

.start-screen {
    background: url('/assets/textures/startscreen.png') no-repeat center center fixed;
    background-size: cover;
}

.startContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    height: 80vh;
    padding-right: 30%;
    padding-bottom: 20%;
    gap: 3rem;
}

.startContainer a {
    margin-top: 0;
}

.gameName {
    margin-top: 4rem;
}

.start-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 1.5rem auto 0;
    padding: 0.7rem 2rem;
    background: #2a7;
    border: none;
    border-radius: 0.4rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    width:auto;
}

.start-button:hover {
    background: #3b8;
}

.start-button span {
    line-height: 1;
}