html {
    background: url("/assets/blurred.png") no-repeat center center fixed;
    background-size: cover;
}

/*rgb(0, 18, 27) */
/*html {background-image: linear-gradient(to bottom right, rgb(247, 230, 44), rgb(183, 183, 183), rgb(122, 0, 170), rgb(0, 16, 29));} */
/* html {background-image: linear-gradient(to bottom right, rgb(200, 187, 35), rgb(183, 183, 183), rgb(94, 0, 131), rgb(94, 0, 137));}  */
.right {

    align-items: end;
    
    float: right;
    margin-top: 15px;
    margin-right: 10px;

}

.mkpost_name {
    width: 35%;
    box-sizing: border-box;
    padding: 20px 20px 20px 20px;
    transition: width 0.4s ease-in-out;
    box-shadow: none;
    border-color: transparent;

    background-color: #ffffff65;

    animation-duration: 0.5s;
}
.mkpost_img {
    width: 20%;
    box-sizing: border-box;
    padding: 20px 20px 20px 20px;
    transition: width 0.4s ease-in-out;
    box-shadow: none;
    border-color: transparent;

    background-color: #ffffff65;

    animation-duration: 0.5s;
}
input[type=password] {
    width: 60%;
    box-sizing: border-box;
    padding: 20px 20px 20px 20px;
    transition: width 0.4s ease-in-out;
    box-shadow: none;
    border-color: transparent;

    background-color: #ffffff65;

    animation-duration: 0.5s;
}

.upload {

    width: 60%;
    box-sizing: border-box;
    padding: 20px 20px 20px 20px;
    transition: width 0.4s ease-in-out;
    box-shadow: none;
    border-color: transparent;

    background-color: #ffffff65;

    animation-duration: 0.5s;
}

.editor {
    margin-top: 20px;
    width: 40%;
    box-sizing: border-box;
    padding: 20px 20px 20px 20px;
    transition: width 0.4s ease-in-out;
    box-shadow: none;
    border-color: transparent;

    background-color: #ffffff65;

    animation-duration: 0.5s;
}
.disp {
    justify-content: left;

    background-color: #ffffff65;
    margin-top: 20px;
    width: 58%;
    
    padding-left: 10px;
    overflow-wrap: break-word;
}

.login {
    
    margin-right: 30px;
    width: 30%;
    transition: width 0.4s ease-in-out;
    box-shadow: none;
    border-color: transparent;

    background-color: #ffffff65;
    color: #353535;
    font-weight: bold;

    transition: transform 0.3s ease;
    animation-duration: 0.5s;

}

.button_post {
    
    margin-right: 10px;
    width: 17%;
    transition: width 0.4s ease-in-out;
    box-shadow: none;
    border-color: transparent;

    background-color: #ffffff65;
    color: #353535;
    font-weight: bold;

    transition: transform 0.3s ease;
    animation-duration: 0.5s;

}

.button_load {
    
    height: 50px;

    margin-right: 30px;
    width: 20%;
    transition: width 0.4s ease-in-out;
    box-shadow: none;
    border-color: transparent;

    background-color: #ffffff65;
    color: #353535;
    font-weight: bold;

    transition: transform 0.3s ease;
    animation-duration: 0.5s;

}
.button_draft_save {
    
    height: 50px;

    margin-right: 30px;
    width: 20%;
    transition: width 0.4s ease-in-out;
    box-shadow: none;
    border-color: transparent;

    background-color: #ffffff65;
    color: #353535;
    font-weight: bold;

    transition: transform 0.3s ease;
    animation-duration: 0.5s;

}
.button_draft_load {
    
    height: 50px;

    margin-right: 30px;
    width: 20%;
    transition: width 0.4s ease-in-out;
    box-shadow: none;
    border-color: transparent;

    background-color: #ffffff65;
    color: #353535;
    font-weight: bold;

    transition: transform 0.3s ease;
    animation-duration: 0.5s;

}
.load_dropdown {

    padding-left: 5px;

    display: none;

    margin-left: 70%;
    margin-top: 5%;

    position: absolute;
    background-color: #ffffff65;
    color: #353535;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.show {

    display:block;
}

.button_image {
    
    margin-right: 30px;
    width: 17%;
    transition: width 0.4s ease-in-out;
    box-shadow: none;
    border-color: transparent;

    background-color: #ffffff65;
    color: #353535;
    font-weight: bold;

    transition: transform 0.3s ease;
    animation-duration: 0.5s;

}

button {
    margin-top: 5px;
    transition: width 0.4s ease-in-out;
    box-shadow: none;
    border-color: transparent;

    background-color: #ffffff65;
    color: #353535;
    font-weight: bold;

    transition: transform 0.3s ease;
    animation-duration: 0.5s;

}
button:hover {
    cursor: pointer;

    transition: width 0.4s ease-in-out;
    box-shadow: none;
    border-color: transparent;

    background-color: #ffffff65;

    animation-duration: 0.5s;

    transition: transform 0.3s ease;
    transform: scale(1.25) perspective(1px);
}

.header {
    position: sticky;
    top: 0;

    padding-left: 20px;
    padding-right: 10px;

    background-color: #ffffff65;
    color: #ffffff;
    text-align: center;
    
    justify-content: left;
    overflow:auto;
    margin-bottom: -100px;

    backdrop-filter: blur(10px); 
}

.sameline {
    top: 0;

    color: #ffffff;
    
    display: flex;
    justify-content: space-between;

}
.multiline {
    margin-left: 20px;
    color: #ffffff;
    justify-content: left;
}
.multiline_right {
    justify-content: right;
}

.hi {
    font-size: 100px;
    padding: 0;
    margin-top: -20px;
    margin-bottom: -40px;
}

.hi_smaller {
    font-size: 70px;
    padding: 0;
    margin-top: -20px;
    margin-bottom: -55px;
}

.project_title {
    position: relative;
    font-size: 50px;
    padding: 0;
    margin-top: -20px;
    margin-bottom: -25px;
}

.left {
    
    display: flex;
    justify-content: space-between;
    float: left;

}

.under_icon {
    color: #ffffff;
    font-weight: bold;
    text-align: center;
}

.icon {
    
    width: 250px;
    height: 250px;
    
    align-items: end;

    outline: #ffffff35;
    outline-style: solid;
    border-style: solid;

    border: 1px solid;

    border-radius: 100%;

}

.project_icon {
    
    align-items: end;

    outline: #ffffff35;
    outline-style: solid;
    border-style: solid;

    border: 1px solid;
    width: 50%;

    object-fit: contain;

}

.big_project_icon {
    
    align-items: end;

    outline: #ffffff35;
    outline-style: solid;
    border-style: solid;

    border: 1px solid;
    height: 300px;
    margin: 20px;

    object-fit: contain;

}


.void {
    height: 120px;
}

.project {

    margin-top: 10px;

    width: 96%;
    padding: 20px 20px 20px 20px;
    transition: width 0.4s ease-in-out;
    box-shadow: none;
    border-color: transparent;

    background-color: #ffffff65;

    animation-duration: 0.5s;
    white-space: pre-line;

}

.post {

    margin-top: 10px;

    width: 96%;
    padding: 20px 20px 20px 20px;
    transition: width 0.4s ease-in-out;
    box-shadow: none;
    border-color: transparent;
    
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;

    animation-duration: 0.5s;
    white-space: pre-line;
        
    display: flex;
    justify-content: center;
    align-items: center;

}
.post:hover {
    cursor: pointer;

    transition: width 0.4s ease-in-out;
    box-shadow: none;
    border-color: transparent;

    animation-duration: 0.5s;

    transition: transform 0.3s ease;
    transform: scale(1.02) perspective(1px);
}

.post_name {
    font-size: 40px;
    padding: 0;
    margin-bottom: -5px;

    color: #ffffff;
    text-decoration-color: #ffffff;
    text-decoration-line: underline;
}

.project_name {
    font-size: 40px;
    padding: 0;
    margin-top: -5px;
    margin-bottom: -5px;

    color: #ffffff;
    text-decoration-color: #ffffff;
    text-decoration-line: underline;
}

#loading {
    display: none;
    font-size: 16px;
    margin-top: 20px;
    margin: 20px auto;
    padding: 20px;
}

.project_button {
    padding: 10px;
}