#home_button {
    position: absolute;
    left: 73px;
    top: 115px;
    transform: translate(-50%, -50%);
}
#name {
	display:inline-block;
	border: none;
	background-color: rgba(var(--body-color), 1);
    filter: brightness(105%);
    border-radius: 6px;
    padding: 3px;
	font-family: Poppins;
	font-size: 22px;
	width:min(70vw, 220px);
	transition:width 0.7s;
}
#name:focus {
	outline:none;
	background-color: rgba(var(--body-color),1);
    filter: brightness(110%);
	width:min(80vw, 400px);
}
#name_container:focus-within {
    width:min(80vw + 30px, 430px);
}
#name_tip {
    text-align:center;
    color:rgba(var(--tip-text),1);
    opacity:0;
    margin:2px;
}
#continue_button {
    display: block;
    margin:auto;
    margin-top:20px;
    box-shadow: 5px 5px 2px rgba(0, 0, 0,0.1);
}
#label_loading {
    display:none;
    margin:auto;
    text-align:center;
    color:rgba(var(--tip-text),1);
}
#submit_button {
    display:block;
    margin:auto;
}
.submit_button_disabled {
    color:rgba(var(--base-highlight),1);
}
.submit_button_disabled:hover {
    background-color: rgba(var(--highlight1),1) !important;
    color: rgba(var(--base-highlight),1) !important;
}
.submit_button_disabled:active {
    border:none;
}
#back_button {
    display:none;
}
#naming_container {
    display:none;
}
.centerblock {
    display: block;
    margin:auto;
    text-align:center;
}
.notes {
    opacity:0;
    padding:5px;
    display:inline;
    position:relative;
    top:15px;
    min-width: 20px;
    max-width:20px;
    min-height: 20px;
    max-height:20px;
    padding:0;
    background-image: url("../graphics/chek_mark.png");
    background-repeat: no-repeat;
    background-size: contain;
    object-fit: contain;
}
.notes_not_good {
    background-image: url("../graphics/cross_mark.png") !important;
}
.input_container {
    display:flex;
    justify-content: center;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    cursor:text;
}
.not_valid_animation {
    animation:outline 1.5s;
}
@keyframes outline {
    0% {outline:2px solid red;transform:translate(0,0);}
    15%{transform:translate(7px,0);}
    30%{transform:translate(-7px,0);}
    45%{transform:translate(7px,0);}
    60%{transform:translate(-7px,0);}
    75%{outline:2px solid red;transform:translate(0,0);}
    100%{outline:2px solid rgba(255,0,0,0);}
}
.inputs {
    width: calc(100% - 40px);
    border: none;
    margin-top:1rem;
    margin-left:0;
    border-bottom: 2px solid #111;
    transition: border-color 0.2s ease;
    background-color: rgb(245,245,245);
    font-family:Poppins;
    font-size:16px;
    height:22px;
  }
.inputs[type="password"] {
    font-family:small-caption !important;
    font-weight: bolder !important;
}
label.uplabel {
    transform:translate(0, -22px);
    transition:transform 0.3s ease-out, color 0.3s ease-out;
    cursor:text;
    user-select: none;
    min-width: 100%;
    color:rgb(100,100,100);
    position:relative;
    left:8px;
    height: 21px;
}
#nickname_input {
    position:relative;
    right:10px;
}
.radio {
    float:right;
    cursor:pointer;
}
.radio_label {
    padding-top:5px;
    padding-bottom:5px;
    max-width:200px;
    cursor:pointer;
}
#radio_header {
    font-size: 20px;
    text-align:center;
    user-select: none;
    cursor:default;
}
.inputs:focus {
      outline: none;
      border-color: rgb(255,255,150);
      background-color: rgb(245,245,220);
  }

  .inputs:focus + label.uplabel,
  .inputs:not(:placeholder-shown) + label.uplabel {
    color: #111;
    transform: translate(0, -50px);
  }
#meta_box {
    font-family: Poppins;
    display:flex;
    justify-content: space-around;
    background-color: rgb(245,245,245);
    width: min(90vw, 620px);
    margin:auto;
    padding:10px;
    box-shadow: rgba(60, 60, 60, .3) 0 1px 3px 0, rgba(60, 64, 60, .15) 0 4px 8px 3px;
    word-wrap: break-word;
}
#radio {
    display:flex;
    flex-direction: column;
    min-height: 100%;
    justify-content: space-around;
    padding-bottom:20px;    
    padding-right:10px;
    min-width: 255px;
}
#radio_container {
    display:flex;
    flex-direction: column;
    justify-content: space-around;
    padding-bottom:20px;    
    padding-right:10px;
    min-width: 219px;
}
.comments_check {
    float:inline-end;
    vertical-align: top;
}
#form {
    max-width:min(300px, 70vw + 1px);
    padding-left:10px;
    padding-top:5px;
    border-left:3px dashed rgb(200,200,200);
    min-width:250px;
}
#name_container span {
    float:right;
    position:relative;
    bottom:10px;
}
#name_container {
    width:min(80vw + 30px, 250px);
    transition:width 0.7s;
    margin:auto;
    position:relative;
    left:15px;
}
#header, #header2 {
    margin-bottom:60px;
    margin-top: 33px;
}
#navigation_bar {
    display:flex;
    align-items: baseline;
    justify-content: space-around;
    position:fixed;
    top:calc(100% - 30px); 
    z-index:20;
    width:min(400px, 80vw);
    height:10px;
    background: linear-gradient(to right,rgba(0,0,0,0), rgb(var(--highlight1)), rgba(0,0,0,0));
    left:50%;
    transform:translate(-50%,0);
}
#navigation_element_1, #navigation_element_2 {
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius:50%;
    min-width:min(20px + 6vw, 40px);
    min-height:min(20px + 6vw, 40px);
    border:2px solid rgba(var(--base-color),1);
    position:relative;
    bottom:min(10px + 3vw, 20px);
    background-color: white;
    font-family:Poppins;
    cursor:pointer;
    user-select: none;
}
#navigation_element_1:hover, #navigation_element_2:hover {
    background-color: rgba(var(--base-highlight),1);
}
.navigation_green {
   background-color: rgba(var(--base-highlight),1) !important;
}
#password_tip {
    display: inline-block;
    position:absolute;
    padding-left:6px;
    padding-right:6px;
    border-radius: 5px;
    background-color: rgba(var(--highlight1),1);
    color:rgba(var(--tip-text),1);
    font-size:12px;
    left:calc(50% - 3px);
    top:638px;
    margin:0;
    opacity:0;
    pointer-events: none;
}
#notification_label, #comments_label {
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}
body {
    overflow-x: hidden;
}
#cheatsheet {
    display: block;
    margin:auto;
    margin-top:50px;
    width:min(100%, 1000px);
}
.cheat-sheet-box {
    flex-shrink:0;
    background-color:   rgba(var(--base-color),1);
    max-width: 760px;
    padding: min(50px, 8vw);
    margin-top: 5vh;
    margin-left: auto;
    margin-right: auto;
    border-radius:5px;
    box-shadow: rgba(60, 60, 60, .3) 0 1px 3px 0, rgba(60, 64, 60, .15) 0 4px 8px 3px;
    height:auto;
    text-align: left;
    font-family: Poppins;
    font-size: large;
}
.notifications_disabled {
    color:gray;
    text-decoration: line-through;
}
.shortcut {
    padding:50px !important;
}
input[type="checkbox"] {
    border-radius: 10%;
    bottom:2px;
}
.form_info {
    display: inline-block;
    background-image: url("../graphics/info_icon.png");
    background-repeat: no-repeat;
    background-size: contain;
    width:20px;
    height: 20px;
    vertical-align: top;
    cursor: pointer;
    z-index:20;
    position:relative;
}
.form_info_text {
    display:none;
    position:absolute;
    top:100%;
    left:calc(50% - 100px);
    background-color: rgba(var(--body-color),1);
    padding:5px;
    border-radius:5px;
    font-family: Poppins;
    font-size: 12px;
    color:rgba(var(--tip-text),1);
    width:200px;
    z-index:20;
    white-space: normal;
}
.form_info:hover .form_info_text {
    display:block;
}
.form_info:not(.form_info_text:hover):hover::after .form_info_text {
    display: none;
}
#use_account, #use_account_label {
    float:right;
    cursor: pointer;
}
#use_account_container {
    height:26px;
}
#account, #logged {
    display:none;
}
#logged_nickname {
    font-weight: bold;
    font-size: 20px;
    color:rgba(var(--base-highlight),1);
}
#login_button {
    display:block;
    margin:auto;
    margin-top:30px;
    margin-bottom:30px;
}
#logout_button {
    display:block;
    margin:auto;
    margin-bottom:30px;
}
@media only screen and (max-width:600px) {
    #meta_box {
        flex-wrap: wrap;
        padding:0;
    }
    #form {
        border-left:none;
        border-top:3px dashed rgb(200,200,200);
        padding-left: 0;
        position:relative;
        left:10px;
    }
    #radio {
        padding-right:0;
    }
    #password_tip {
        top:890px;
        left:calc(50% - 124px);
    }
}
@media only screen and (max-width:860px) {
    .shortcut {
        padding:2vw !important;
        max-width: 1000px;
    }
}
@media only screen and (max-width :490px) {
    #password_tip {
        top:899px;
        left:calc(50% - 124px);
    }
    #header, #header2 {
        margin-bottom:0;
        margin-top:100px;
    }
    #home_button {
        left:50%;
        transform:translate(-50%, -50%);
    }
    .shortcut {
        display:none;
    }
    .cheat-sheet-box {
        border-radius: 0;
    }
}