/*Define most colors that will be found in the color platte*/
:root{
    /*scrolling*/
    --scrollbarBG: rgb(218, 221, 239);
    --thumbBG: rgb(111, 121, 166);
    /*general colors*/
    --soft-red-1: rgb(220,200,200);
    --soft-red-2: rgb(180,120,130);
    --soft-green-1: rgb(200,230,220);
    --soft-green-2: rgb(120,180,130);
    --dark-1: rgb(10,10,10);
    --dark-2: rgb(60,60,60);
    --gray-1: rgb(120,120,120);
    --gray-2: rgb(150,150,150);
    --gray-3: rgb(200, 200, 200);
    --gray-4: rgb(220, 220, 220);
    --white-1: rgb(240, 240, 240);
    --white-2: rgb(250, 250, 250);
    --shadow-gray-1: rgba(200,200,200,0.1);
    --shadow-gray-2: rgba(200,200,200,0.2);
    --shadow-gray-3: rgba(200,200,200,0.3);
    --shadow-gray-4: rgba(200,200,200,0.4);
    --shadow-gray-5: rgba(200,200,200,0.5);
    --shadow-gray-6: rgba(200,200,200,0.6);
    --shadow-gray-7: rgba(200,200,200,0.7);
    --shadow-gray-8: rgba(200,200,200,0.8);
    --shadow-dark-1: rgba(0,0,0,0.1);
    --shadow-dark-2: rgba(0,0,0,0.2);
    --shadow-dark-3: rgba(0,0,0,0.3);
    --shadow-dark-4: rgba(0,0,0,0.4);
    --shadow-dark-5: rgba(0,0,0,0.5);
    --shadow-dark-6: rgba(0,0,0,0.6);
    --shadow-dark-7: rgba(0,0,0,0.7);
    --shadow-dark-8: rgba(0,0,0,0.8);
    /*main colors*/
    --main-color-1: rgb(250,252,255);
    --main-color-2: rgb(236, 251, 255);
    --main-color-3: rgb(224,244,255);
    --main-color-4: rgb(204,240,253);
    --main-color-5: rgb(161,233,246);
    --main-color-6: rgb(130,221,236);
    --main-color-7: rgb(105,196,211);
    --main-color-8: rgb(54,145,160);
    --main-color-9: rgb(28,119,134);
    --main-color-10: rgb(0,68,83);
    /*transparent variations*/
    --main-color-1-1: rgba(250,252,255,0.1);
    --main-color-1-3: rgba(250,252,255,0.3);
    --main-color-1-5: rgba(250,252,255,0.5);
    --main-color-1-8: rgba(250,252,255,0.8);
    --main-color-2-1: rgba(236,251,255,0.1);
    --main-color-2-3: rgba(236,251,255,0.3);
    --main-color-2-5: rgba(236,251,255,0.5);
    --main-color-2-8: rgba(236,251,255,0.8);
    --main-color-3-1: rgba(224,244,255,0.1);
    --main-color-3-3: rgba(224,244,255,0.3);
    --main-color-3-5: rgba(224,244,255,0.5);
    --main-color-3-8: rgba(224,244,255,0.8);
    --main-color-4-1: rgba(204,240,253,0.1);
    --main-color-4-3: rgba(204,240,253,0.3);
    --main-color-4-5: rgba(204,240,253,0.5);
    --main-color-4-8: rgba(204,240,253,0.8);
    --main-color-5-1: rgba(161,233,246,0.1);
    --main-color-5-3: rgba(161,233,246,0.3);
    --main-color-5-5: rgba(161,233,246,0.5);
    --main-color-5-8: rgba(161,233,246,0.8);
    --main-color-6-1: rgba(130,221,236,0.1);
    --main-color-6-3: rgba(130,221,236,0.3);
    --main-color-6-5: rgba(130,221,236,0.5);
    --main-color-6-8: rgba(130,221,236,0.8);
    --main-color-7-1: rgba(105,196,211,0.1);
    --main-color-7-3: rgba(105,196,211,0.3);
    --main-color-7-5: rgba(105,196,211,0.5);
    --main-color-7-8: rgba(105,196,211,0.8);
    --main-color-8-1: rgba(54,145,160,0.1);
    --main-color-8-3: rgba(54,145,160,0.3);
    --main-color-8-5: rgba(54,145,160,0.5);
    --main-color-8-8: rgba(54,145,160,0.8);
    --main-color-9-1: rgba(28,119,134,0.1);
    --main-color-9-3: rgba(28,119,134,0.3);
    --main-color-9-5: rgba(28,119,134,0.5);
    --main-color-9-8: rgba(28,119,134,0.8);
    --main-color-10-1: rgba(0,68,83,0.1);
    --main-color-10-3: rgba(0,68,83,0.3);
    --main-color-10-5: rgba(0,68,83,0.5);
    --main-color-10-8: rgba(0,68,83,0.8);
}

/*Global + Reset*/
* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

*:focus{
    outline: none;
}

:not(ol):not(ul):not(ul):not(li):not(blockquote):not(input):not(select){
    padding: 0;
    margin: 0;
}

*, ::after, ::before {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.5;
    color: var(--dark-1);
    text-align: left;
    background-color: var(--main-color-1);
    overflow-x: hidden;
    position: initial;
}

html[dir="rtl"] body,
html[dir="rtl"] select,
html[dir="rtl"] form,
html[dir="rtl"] label,
html[dir="rtl"] input,
html[dir="rtl"] button {
    text-align: right;
}

b {
    font-weight: 800;
}

u {
    text-decoration: underline;
}

p {
    margin-top: 0;
}


button{
    border: none;
}


/*Site*/

/*Form*/
.main-form{
    width: min(max(80vw, 370px),600px);
    margin: 50px auto;
    margin-bottom: 50px;
    text-align: center;
    padding: 10px 20px;
    background: var(--main-color-2);
    border: 2px solid var(--main-color-9);
    font-size: 1.125em;
    direction: rtl;
    position: relative;
    z-index: 1;
}

.main-form h3 {
    display: inline-block;
    color: var(--main-color-10);
}

/*Logo*/
.logo{
    height: 185px;
    width: auto;
    margin: 20px 10px;
}

.contact{
    margin: 10px auto;
}

/*Icons*/
.main-form .icons{
    margin-top: 20px;
}
.main-form .icons img{
    margin: 10px 5px;
    height: 60px;
    width: 60px;
}

/*portrait*/
.portrait{
    position: fixed;
    bottom: 0;
    left: 0;
    height: 400px;
}

@media only screen and (max-width: 900px) {
    .main-form{
        font-size: 1.5em;
    }
}

@media only screen and (max-width: 450px) {
    .main-form{
        font-size: 2em;
    }
}