:root {
    --height: 100vh;
    --width: 100vw;
/* Colors:   */
    --fccGreen: #006600;
}

.container-fluid {
/*    background-image: url("https://images.pexels.com/photos/220076/pexels-photo-220076.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");*/
/*    background-image: url("https://kepkuldes.com/images/5829ea58138f12f0265571954acad468.jpg");*/
    background-image: url("images/blank-blue-copyspace-220076.jpg");
    background-position: 50% 55%;
    background-repeat: no-repeat;
    background-size: 115% 130%;
	min-height: var(--height);
    height: auto;
}

aside {
    min-height: 100vh;
}
/* left buttons containers*/
.l-b-c {
    height: calc(100% / 6);
}

/* ---------- left side buttons ---------- */
.l-b-c button {
    -ms-transform: rotate(-90deg); 
    -webkit-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
    background-color: transparent;
    font-size: 20px;
    color: grey;
    border: none;
    outline: none;
    float: right;
	
}

.l-b-c button:hover, .active {
    color: var(--fccGreen);
    font-size: 22px;
    font-weight: bold;
}


.l-b-c button:focus {
    outline: none;
}

#clear {
    margin-right: calc(100% - 6.8vw);
    margin-top: calc(100% - 3.2vw);
}

#return {
    display: none;
    margin-right: calc(100% - 6.7vw);
    margin-top: calc(100% - 3.8vw);
}

#default {
    margin-right: calc(100% - 7.4vw);
    margin-top: calc(100% - 3.4vw);
}

#save {
    margin-right: calc(100% - 5.9vw);
    margin-top: calc(100% - 3vw);
}

#help {
    margin-right: calc(100% - 5.8vw);
    margin-top: calc(100% - 3vw);
}

#markdown {
    min-height: var(--height);
}

/* ---------- right side buttons ---------- */
/* right buttons containers*/
.r-b-c {
    height: calc(100% / 6);
}
.r-b-c button {
    -ms-transform: rotate(90deg); 
    -webkit-transform: rotate(90deg); 
    transform: rotate(90deg); 
    background-color: transparent;
    font-size: 20px;
    color: grey;
    border: none;
    outline: none;
    float: right;
}

.r-b-c button:hover, .active {
    color: var(--fccGreen);
    font-size: 22px;
    font-weight: bold;
}


.r-b-c button:focus {
    outline: none;
}

#saveHTML {
    margin-right: calc(100% - 6.8vw);
    margin-top: calc(100% - 3.9vw);
}

#credit {
    margin-right: calc(100% - 7.2vw);
    margin-top: calc(100% - 2.1vw);
}


/* ---------- <textarea> ---------- */
#editor {
    background-color: transparent;
    margin-left: -1vw;
    padding-right: 1.9vw;
	width: 100%;
    min-height: var(--height);
    height: 100%;
    border: none;
	outline: none;
    resize: none;
    overflow: hidden;
}

#preview {
    margin-right: -3vw;
    min-height: var(--height);
}

#preview #monitor {
    padding-left: 4vw;
    margin-right: 0vw;
	width: 100%;
    min-height: var(--height);
    overflow: hidden;
}

aside#right {
    margin-left: 2vw;
}

/* ---------- monitor styling  ---------- */
header {
    position: relative;
    background-color: var(--fccGreen);
    color: white;
    overflow: hidden;
}

header img {
    float: right;
    width: 40px;
}

header span {
    margin-left: 10px;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

a, a:hover {
    color: grey;
}

a:hover {
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    text-decoration: none;
}

#mobile {
	display: none;
}

/* ---------- Modals ---------- */
/* Save txt */
#saveModalContent {
/*	background-image: url("https://images.pexels.com/photos/265047/pexels-photo-265047.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");*/
	background-image: url("images/art-artist-black-and-white-265047.jpg");
    background-size: 126% 132%;
    background-position: 43% 42%;
    border-radius: 5%;
}

.modal-header, .modal-footer {
    border: none;
}
.modal-title {
    margin: 0 auto;
}
.modal-body p {
	font-size: 12px;
    margin: 0px 60px 20px 10px;
    max-height: 300px;
    overflow: auto;
}

#resultSaveTxt {
	display: none;
}

/* scroolbar styling: */
/* width */
::-webkit-scrollbar {
    width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: transparent;
    border: 1px solid grey;
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: grey; 
}

.modal-body .input-group {
	width: 93%;
}

input[type="text"] {
    background-color: transparent;
    font-size: 18px;
    border: none;
    outline: none;
}
/*  Autofill backround-colour change from default yellow to transparent */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

.form-control:focus {
    background-color: transparent;
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid grey;
    outline: none;
    box-shadow: none;
    margin-top: -3px;
    border-radius: 8px;
}

.btn-fccGreen, #mobile {
	border: 1px solid var(--fccGreen);
    color: grey;
}

.btn-fccGreen:hover, #mobile:hover {
	background-color: var(--fccGreen);
    color: white;
}

/* ------ Help modal ------- */
#helpModalContent {
/*    background-image: url("https://images.pexels.com/photos/752395/pexels-photo-752395.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");*/
	background-image: url("images/abandoned-architecture-blackboard-752395.jpg");
    background-size: 100% 100%;
    background-position: 43% 42%;
    border-radius: 5%;
    height: 80vh;
}

.perspective3D {
    position: relative;
    top: 450%;
    left: 30%;
    width: 27%;
    height: 550%;
/*    margin-left: 1%;*/
    -webkit-perspective: 50%; /* Safari 4-8  */
    perspective: 1800px;
/*    border: 1px solid red;*/
}

#board {
    background-image: url("https://cdn.pixabay.com/photo/2015/05/04/08/51/board-752050_960_720.jpg");
/*	background-image: url("images/board-752050_1280.jpg");*/
    background-size: 100% 100%;
    background-position: 43% 42%;
    position: absolute;
    height: 90%;
    width: 130%;
    top: 8%;
    left: -15%;
    font-family: 'Indie Flower', cursive;
	color: white;
    -webkit-transform-style: preserve-3d; 
    -webkit-transform: rotateX(45deg);
    transform-style: preserve-3d;
    transform: rotateY(45deg);
    -webkit-animation-name: helpAnim;
    -webkit-animation-duration: 4s; 
    animation-name: helpAnim;
    animation-duration: 4s;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}

@keyframes helpAnim {
    from {
        height: 90%;
        width: 130%;
        top: 8%;
        left: -15%;
        transform: rotateY(45deg);
    }
    to {
        height: 380%;
        width: 390%;
        top: -95%;
        left: -120%;
        transform: rotateY(0deg);
    }
}
@keyframes helpAnimH1 {
/*
    from {
        font-size: 50px;
    }
    to {
        font-size: 150px;
    }
*/
}
#boardClose {
	color: white;
}

#board h1 {
    font-size: 50px;
    text-align: center;
    padding-top: 4%;
    font-weight: bold;
    -webkit-animation-name: helpAnimH1;
    -webkit-animation-duration: 4s; 
    animation-name: helpAnimH1;
    animation-duration: 4s;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}

#board section {
	margin: 3.4% 0% 0% 5%;
    height: 89.8%;
    overflow-y: auto;
    overflow-x: hidden;
}

#board a {
    color: yellow;
}

#helpHowToUse {
/*    background-image: url("https://images.pexels.com/photos/220076/pexels-photo-220076.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");*/
	background-image: url("images/blank-blue-copyspace-220076.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    width: 57.3vw;
    height: 46vw;
    color: black;
}

#helpHowToUse p {
	margin-top: 5vw;
	margin-left: 6vw;
}

#helpMenuList {
    margin-left: 6vw;
    margin-right: 3vw;
}

/* Save HTML modal: */
#saveHTMLModalContent {
/*	background-image: url("https://cdn.pixabay.com/photo/2012/04/01/12/57/disc-23343_960_720.png");*/
	background-image: url("images/floppy-disc-23343_640.png");
    background-size: 105% 105%;
    background-position: 50% 50%;
    border-radius: 7%;
    border-bottom-left-radius: 12%;
    width: 640px;
    height: 480px;
    font-family: 'Indie Flower', cursive;

}

#saveHTMLModalContent h2 {
    margin-left: 110px;
    margin-top: 27px;
    font-weight: bold;
}

#saveHTMLModalContent .close {
	margin-top: -14px;
	margin-right: -23px;
    font-size: 2.6em;
}

#saveHTMLModalContent .close:hover {
    color: red;
}

#saveHTMLInput {
	margin-left: 80px;
    margin-top: -22px;
    width: 63%;
}

#resultSaveHTMLContainer {
    padding: 0px 50px 0 60px;
}

#resultSaveHTML.alert-success {
    background-color: transparent;
    font-size: 1.3em;
    color: green;
}

#resultSaveHTML.alert-danger {
    background-color: transparent;
    border: none;
    font-size: 1.3em;
    color: red;
}

#inputHTMLFileName, #HTML-addon {
	font-size: 20px;
    border: none;
    
}

#HTML-addon {
	background-color: transparent;
    border: none;
}

#saveHTMLFile, #saveHTMLModalContent button {
    -ms-transform: rotate(90deg); 
    -webkit-transform: rotate(90deg); 
    transform: rotate(90deg);
    color: black;
    font-family: cursive;
}
/*  save button */
#saveHTMLFile {
    margin-right: 205px;
    margin-top: -33px;
    padding-left: 19px;
    padding-right: 19px;
    border: none;
    border-top-right-radius: none;
    border-bottom-right-radius: none;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    font-size: 29px;
}

#saveHTMLFile:hover {
    color: white;
}
/* Close button: */
#saveHTMLModalContent button {
    margin-right: 7px;
    margin-bottom: 40px;
}

#saveHTMLModalContent button:hover {
    background-color: transparent;
    color: red
}

/* Credit modal: */
#creditModal .modal-content {
    background-color: transparent;
/*    background-image: url("https://cdn.pixabay.com/photo/2016/01/08/21/57/parchment-1129342_960_720.png");*/
    background-image: url("images/pergamen.png");
    background-size: 100% 100%;
    height: 600px;
}

#creditModal .modal-header {
	margin-top: 55px;
}

#creditModal button {
    margin-right: 70px;
    margin-bottom: 30px;
    border: none;
}

#creditModal button:hover {
    background-color: transparent;
    border: none;
}

#creditModal .modal-body  {
	font-size: 16px;
    margin-left: 30px;
/*    padding-right: 18vw;*/
}

#creditModal a {
    text-shadow: none;
	color: black;
}

#creditModal a:hover {
    color: var(--fccGreen);
    font-weight: bold;
}

footer {
    background-color: var(--fccGreen);
    color: white;
    padding: 4px 10px 4px;
    text-align: center; 
}

/* ---------- Media query ---------- */
@media (max-width: 1200px) {
    #clear {
        margin-right: calc(100% - 6.9vw);
        margin-top: calc(100% - 2.3vw);
    }
    #return {
        margin-right: calc(100% - 8.2vw);
        margin-top: calc(100% - 3vw);
    }
    #default {
        margin-right: calc(100% - 7.7vw);
        margin-top: calc(100% - 2.2vw);
    }

    #save {
        margin-right: calc(100% - 6.1vw);
        margin-top: calc(100% - 1.1vw);
    }

    #help {
        margin-right: calc(100% - 6.1vw);
        margin-top: calc(100% - 1.1vw);
    }
    
    #saveHTML {
        margin-right: calc(100% - 6.5vw);
        margin-top: calc(100% - 3vw);
    }

    #credit {
        margin-right: calc(100% - 7.7vw);
        margin-top: calc(100% - 0.1vw);
    }
}

@media (max-width: 992px) {
    .l-b-c button:hover {
        font-size: 20px;
        font-weight: bold;
    }

    #clear {
        margin-right: calc(100% - 7.2vw);
        margin-top: calc(100% - 0.4vw);
    }
    #return {
        margin-right: calc(100% - 8.7vw);
        margin-top: calc(100% - 1.2vw);
    }
    #default {
        margin-right: calc(100% - 8vw);
        margin-top: calc(100% - 0.5vw);
    }

    #save {
        margin-right: calc(100% - 6.1vw);
        margin-top: calc(100% - 0vw);
    }

    #help {
        margin-right: calc(100% - 6vw);
        margin-top: calc(100% - 0.1vw);
    }
    #saveHTML {
        margin-right: calc(100% - 6vw);
        margin-top: calc(100% + 0.5vw);
    }

    #credit {
        margin-right: calc(100% - 7.6vw);
        margin-top: calc(100% + 1.5vw);
    }
}
@media (max-width: 768px) {
    #clear {
        margin-right: calc(100% - 8vw);
        margin-top: calc(100% + 4vw);
    }
    #return {
        margin-right: calc(100% - 10vw);
        margin-top: calc(100% + 3vw);
    }
    #default {
        margin-right: calc(100% - 9.2vw);
        margin-top: calc(100% + 3.5vw);
    }

    #save {
        margin-right: calc(100% - 6.2vw);
        margin-top: calc(100% + 5vw);
    }

    #help {
        margin-right: calc(100% - 6.7vw);
        margin-top: calc(100% + 5vw);
    }
    #saveHTML {
        margin-right: calc(100% - 6.5vw);
        margin-top: calc(100% + 5.7vw);
    }

    #credit {
        margin-right: calc(100% - 8.5vw);
        margin-top: calc(100% + 6.3vw);
    }
}

@media (max-width: 576px) {
    .container-fluid {
        background-image: none;
        min-height: 0;
        height: auto;
        margin: 0;
        padding: 0;
    }
    
    #container .row {
        margin: 0;
        padding-bottom: 35px;
    }
    
/* ---------- left side buttons ---------- */
    aside {
        min-height: 0;
        height: 34px;
        width: 100%;
        border:  1px solid var(--fccGreen);
        background-color: aliceblue;
    }
    /* left buttons containers*/
    .l-b-c {
        height: 0px;
    }
    .l-b-c button {
        -ms-transform: rotate(0deg); 
        -webkit-transform: rotate(0deg); 
        transform: rotate(0deg);
        float: left;
        width: 25%;
        border-right: 1px solid var(--fccGreen);
    }
    
    .l-b-c button:hover, .r-b-c button:hover {
        background-color: var(--fccGreen);
        color: white;
    }
    
    .r-b-c button:hover {
        height: 33px;
    }
    
    #clear {
        margin: 0;
    }

    #return {
        display: none;
        margin: 0;
    }

    #default {
        margin: 0;
    }

    #save {
        margin: 0;
    }

    #help {
        margin: 0;
        border-right: none;
    }

    #markdown {
        min-height: 400px;
    }

    
    
/* ---------- right side buttons ---------- */
    aside#right {
        margin: 0vw;
        position: fixed;
        height: 34px;
        top: 0;
        background-color: aliceblue;
    }
    /* right buttons containers*/
    .r-b-c {
        height: 0px;
    }
    .r-b-c button {
        -ms-transform: rotate(0deg); 
        -webkit-transform: rotate(0deg); 
        transform: rotate(0deg);
        float: left;
        width: 50%;
        border-right: 1px solid var(--fccGreen);
    }
    #saveHTML {
        margin: 0;
    }

    #credit {
        margin: 0;
        border-right: none;
    }
/* ---------- editor ---------- */
    #left, #markdown {
/*	display: none;*/
}
    #editor {
        margin: 0;
        padding: 0;
        min-height: 0;
        height: auto;
    }
    
/* ---------- monitor ---------- */
    #preview, #right {
	   display: none;
    }
    
    #preview {
        margin-top: 45px;
        min-height: 0;
        height: auto;
    }

    #preview #monitor {
        padding: 0;
        margin: 0;
        min-height: 0;
        overflow: hidden;
    }
    
    #mobile {
        display: block;
        position: fixed;
        bottom: 0;
        background-color: aliceblue;
    }
    
/* modify Modals to mobile device:  */
    #helpHowToUse {
        background-image: none;
        width: 100vw;
        height: auto;
        color: white;
    }

    #helpHowToUse p {
        margin-top: 0vw;
        margin-left: 0vw;
    }

    #helpMenuList {
        margin-left: 0vw;
        margin-right: 0vw;
    }
    
    /* save  button  */
    #saveHTMLFile {
        margin-right: 38vw;
    }
    
    #saveHTMLFile:hover {
        background-color: transparent;
    }

    #creditModal .modal-body  {
        padding-right: 15vw;
    }
}