@font-face {
    font-family: Obl;
    src: url("../fonts/Outfit-Black.ttf");
}

@font-face {
    font-family: Ob;
    src: url("../fonts/Outfit-Bold.ttf");
}

@font-face {
    font-family: Om;
    src: url("../fonts/Outfit-Medium.ttf");
}

@font-face {
    font-family: Or;
    src: url("../fonts/Outfit-Regular.ttf");
}

*{
    box-sizing:border-box;
    font-family:Or;
    user-select:none;
    position:relative;
}

:root{
    --bc1:#fff;
    --bc3:#ddd;
    --ac1:#133;
    --c1:#112;
    --c1l:#1125;
    --c2:#fd7;
    --c2rml:#ec6;
    --c2ml:#fd79;
    --c2l:#fd75;
    --c2ll:#fd73;
    --c2d:#da5;
    --c2dl:#da55;
    --sdred:#f65;
    --sdgreen:#2c5;
}

* input, * div[contenteditable="true"]{
    user-select:text;
}

input, textarea{
    outline-color:var(--c2l);
}

input, textarea{
    outline:none;
}

h1, h1 *, h2, h3{
    font-size:1.4em;
    font-family:Ob;
}

h2{
    font-size:1.4em;
}

a{
    color:inherit;
    text-decoration:none;
}


b{
    font-family:Ob;
    font-weight:300;
}

sml{
    font-size:0.8em;
}

.fund-btn{
    text-align:center;
    color:var(--c1);
    background:#fff;
    padding: 0.2em 0.5em;
    border-radius: 5em;
    font-size:1.1em;
    text-shadow:0 0 0 !important;
}


.c1{
    color:var(--c1) !important;
}

.c2{
    color:var(--c2) !important;
} 

.c2d{
    color:var(--c2d) !important;
}

.sdred{
    color:var(--sdred) !important;
}

.sdgreen{
    color:var(--sdgreen) !important;
}

body{
    margin:0;
}


#logo{
    background:var(--c1);
    color:var(--bc1);
    padding:1em;
    text-align:center;
    font-weight:1000;
    font-family:Obl;
    font-size:0.65em;
}


#logo *{
    font-family:Obl, Ob;
}

.minilogo{
    background:var(--c1);
    color:#fff;
    border-radius:0.2em;
    display:inline-block;
    padding:0.1em 0.3em;
    margin:0.15em 0;
}

.minilogo b{
    color:var(--c2d)
}

/* SIDE BAR */
#ebar{
    background:var(--c2ml);
    padding:0.8em 1em;
    display:flex;
    border:2px solid var(--c2dl);
    border-width:0 0 4px 0;
    text-align:center;
    z-index:3;
}

#ebar > div{
    justify-content:space-evenly;
    display:flex;
    width:100%;
}

#ebar a{
    color:inherit;
    text-decoration:none;
    font-family:Om;
}

#ebar .fa{
   margin-right:0.2em;
}


.bg-image-phones{
	background-image:url("../../images/phone-bg.png");
	height:60%;
	width:60%;
	background-size:cover;
	position:absolute;
	top:5%;
	z-index:1;
	right:0;
	opacity:0.1;
}

.bg-image-phones.snd{
	top:30%;
	height:50%;
	z-index:1;
	left:0;
	transform:scaleX(-1);
}

.hlink{
   color:var(--c2d);
}

.hlink:hover{
    opacity:0.8;
}


.btn{
	background:var(--c2);
	padding:0.8em 1em;
	margin:0 5%;
	border-radius:1em;
	text-align:center;
	user-select:none;
}

.btn:hover{
	filter:brightness(80%) contrast(130%);
	cursor:pointer;
}

.btn:active{
    transform:scale(0.95);
}

#inpfield{
	display:flex;
	justify-content:space-around;
	margin:1em 6% 0;
	width:88%;
}

/* #inpfield input, #inpfield  select*/
select{
	padding:0.5em 1em;
	border:1px solid var(--c2);
	display:inline-block;
	border-radius:0.5em;
	font-family:Ob;
}

input{
    padding:0.5em 1em;
    border:1px solid var(--c2);
    display:inline-block;
    border-radius:0.5em;
    font-family:Ob;
}

.layout{
    width:80%;
    display:flex;
    margin:0.5em 10% 1em;
    justify-content:space-evenly;
}

.clayout{
    flex-direction:column;
}

.layout.longer{
    width:90%;
    margin:0em 5%;
}

.stext{
    white-space: nowrap;
}

#noteboard{
    background-image:url("images/sheep board.png");
    width:90%;
    aspect-ratio:3/1;
    margin:1em 5% 2em;
    background-size:100% 100%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:0.8em;
    min-height:10em;
}

#noteboard span{
    font-family:Om;
}



/* Top section of pages */
#intro{
    display:flex;
    padding:1em;
}

#intro #text{
    padding:0.5em 2em 0 1em;
    font-family:Or;
}

#intro h2{
    font-family:Ob;
    margin:0.2em 0;
}

#fpart{
    display:flex;
    flex-direction:column;
    width:50%;
}


.lgs{
	display:none !important;
}

#intro .lgs{
	height:19em;
	max-height:none !important;
	max-width:none !important;
	width:25em;
	/* margin-top:-2.2em !important; */
	margin-left:0em !important;
}

.r-note{
	margin-top:1em;
	color:var(--c1);
	font-weight:100;
	opacity:1;
}

#intro .register-btns{
	width:100%;
	margin:1em 0;
	justify-content:normal;
}

.register-btns .btn{
	background:var(--c2d);
	padding:0.5em 0.8em;
	margin:0.2em 0;
	margin-right:0.5em;
	font-size:0.9em;
	font-family:Ob;
	letter-spacing:0.5px;
	color:#fff;
}

.register-btns .btn:last-child{
	background:#fff;
	border:1px solid var(--c2d);
	color:var(--c2d);
}

.register-btns .btn:hover{
	background:var(--c1) !important;
    color:#fff;
}

.register-btns .btn:last-child:hover{
    border-color:#fff;
}

#intro .extra_text{
	display:none;
}

#sheepbox{
    width:87%;
}

#sheepbox *{
    font-family:Ob;
    text-shadow:-1px 1px 2px #0005;
}

.coin{
    color:var(--c2);
}

#sheepbox *{
    font-family:Obl;
    letter-spacing:0.4px;
    font-size:1em;
}
#sheepbox > *{
    white-space:wrap;
}

.coin{
    color:#fff;
    margin-top:0.2em;
}


#intro{
    background-image:linear-gradient(to bottom, var(--c2l), #fff2 70%);
    z-index:2;
}

.glgs{
    display:none;
}

section.sect{
    z-index:2;
}

@media screen and (max-width:360px){
    #intro img{
        height:calc(100% - 5em);
    }
}

@media screen and (max-width:400px){
    #ebar{
        font-size:0.8em;
    }
    #intro{
        padding-left:7%;
    }
}

@media screen and (max-width:700px){
    *{
        font-size:3.3vw;
    }
}

@media screen and (min-width:700px){
    #sheepbox{
        width:100%;
    }
    
    #sheepbox *{
        font-size:1.05em;
    }
	.bg-image-phones{
		opacity:0.15;
	}
    .bg-image-phones.snd{
        opacity:0.5;
    }

    #ebar{
        flex-direction:column;
        width:20%;
        position:absolute;
        height:80%;
        height:100%;
        min-height:102vh;
        max-height:80%;
        
        overflow-y:auto;
        overflow-x:hidden;

        scrollbar-color: var(--c2l) var(--c2d);
        scrollbar-width: thin;

        justify-content:none;
        align-items:start;
        text-align:left;
        padding:0.8em 0em;
        padding-bottom:30%;
    }

    #ebar > div{
        justify-content:none;
        flex-direction:column;
    }

    #ebar > div > a{
        margin-top:2.5em !important;
        position:relative;
        display:inline-block;
        padding:1em 1em;
        width:100%;
    }

    #ebar a{
        font-size:0.7em;
        transition:0.1s all;
    }

    #ebar a .fa{
        font-size:1.4em;
        margin:0.3em;
    }

    #ebar > div > a:hover{
        background:var(--c1) !important;
        color:var(--c2) !important;
        transform:scale(1.1);
    }

    #ebar{
        font-size:1.3em;
    }

	#sheepbox{
		width:80%;
		font-size:0.9em;
	}

	#intro .extra_text{
		display:block;
	}

	.register-btns .btn{
		font-size:0.8em;
	}

	#intro{
		display:flex;
		padding:1em 10% 1em 25%;
	}
	
	#intro .sms{
		max-width:15em;
		max-height:16em;
		
		width:14em;
		height:15em;
	}

    section.sect{
        margin:3.5em 0% 0 20% !important;
    }

    .glgs{
		display:block !important;
    }
    .gsms{
		display:none !important;
    }
}

@media screen and (min-width:900px) {
    #ebar a{
        font-size:0.8em;
    }
    #intro{
		display:flex;
		padding:1em 10% 1em 20%;
	}

	section.sect{
		margin:3.5em 0% 0 23% !important;
        font-size:0.85em;
	}

	.register-btns{
		flex-direction:row;
	}
	#intro .extra_text{
		display:block;
	}
	#intro #text{
		font-size:1.2em;
		color:var(--ac1);
	}

	.lgs{
		display:block !important;
	}

	.sms{
		display:none !important;
	}
}


@media screen and (min-width:1000px) {
    section.sect{
		margin:3.5em 0% 0 20% !important;
        font-size:1em;
	}

    #ebar{
        width:15%;
    }
	#intro .lgs{
		height:20em;
		width:28em;
		height:18em;
		width:18em;

        height:20em;
		width:20em;
		margin-top:0.7em !important;
        margin-left:-1em !important;
	}
}

@media screen and (min-width:600000px){
    #all-content{
        display:flex;
        flex-direction:row;
    }
    #ebar{
        flex-direction:column;
        width:30%;
        height:100%;
    }
}