/* typeface */

@font-face {
    font-family: "Bagnard";
    src: url("https://futurebuff.neocities.org/fonts/Bagnard.otf");
}
@font-face {
    font-family: "MPLUS2";
    src: url("https://futurebuff.neocities.org/fonts/MPLUS2-Regular.otf");
}

@media screen and (min-width: 750px){.small-screen{display:none;}}
@media screen and (max-width: 749px){.big-screen{display:none;align-items: flex-start;
  max-width: 100%;
  padding: 1.2rem;
  flex-grow: 1;
  color:#fff}}
  
  @keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* desktop */
@media screen and (min-width: 750px) {
  h3{font-size:1.75rem;}
  #main {
   max-width:60%;
   background-color:#c57067;
}
body {background-image:url("https://futurebuff.neocities.org/images/background.png");
background-repeat: no-repeat;
background-size: 100vw 100vh;
color:#fff!important;}

#navbar {
 
  font-size: 1.5rem;
  width:65%;
  margin:auto;
}
.navlink {
  margin:auto;
  padding:3rem;
  }
  
  
.headerimage {
  width:40%;
  margin:auto;
  padding-top:1rem;
  display:block;
  
}
.themed-grid-col {
  padding-top: .75rem;
  padding-bottom: .75rem;
 
}

.themed-container {
  padding: .75rem;
  margin-bottom: 1.5rem;
 
}

.border {
  border:2px solid black;
  border-radius:10px;
}

.addborder { border-bottom-style: solid;}


.mainblock {
	border-radius: 0.8rem;
	border-style: solid;
	border-width: 0.1rem;
	border-color: rgba(0, 0, 0, 0.15);
	text-align: left;
	box-shadow: 0rem -2.2rem 1rem -2.2rem rgba(0, 0, 0, 0.15) inset;
		max-width: 40%;
		min-width:33.33%;
	padding-bottom: 11.8rem;
	max-height:75%;
	overflow:scroll;
	position:absolute;
	background-color:#d61c1c;
	padding: 1rem;
	animation: fadeInAnimation ease 1.7s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.faqblock{
	border-radius: 0.8rem;
	border-style: solid;
	border-width: 0.1rem;
	border-color: rgba(0, 0, 0, 0.15);
	text-align: left;
	box-shadow: 0rem -2.2rem 1rem -2.2rem rgba(0, 0, 0, 0.15) inset;
		max-width: 40%;
		min-width:33.33%;
	padding-bottom: 11.8rem;
	max-height:75%;
	overflow:scroll;
	position:absolute;
	background-color:#d61c1c;
	padding: 1rem;
	animation: fadeInAnimation ease 1.7s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.about {
	border-radius: 0.8rem;
	border-style: solid;
	border-width: 0.1rem;
	border-color: rgba(0, 0, 0, 0.15);
	text-align: left;
	box-shadow: 0rem -2.2rem 1rem -2.2rem rgba(0, 0, 0, 0.15) inset;
		max-width: 30%;
		min-width:20%;
		width:22%;
	padding-bottom: 11.8rem;
	max-height:80%;
	height:50%;
	background-color:#d61c1c;
left:68%;
position:absolute;
padding: .75rem;
  overflow: hidden;
  resize: both;
  direction: rtl
}
.socials {
	border-radius: 0.8rem;
	border-style: solid;
	border-width: 0.1rem;
	border-color: rgba(0, 0, 0, 0.15);
	text-align: left;
	box-shadow: 0rem -2.2rem 1rem -2.2rem rgba(0, 0, 0, 0.15) inset;
		max-width: 30%;
		min-width:25%;
	max-height:30%;
	background-color:#d61c1c;
top:89%;
left: 60%;
position:absolute;
margin-bottom:40px;
padding-top:1rem;
}

.inner{ direction: ltr }

.main-text {font-family:"Bagnard";}
.body-text {font-family:"MPLUS2";}
h1 {font-size: 4rem!important;}
h2 {font-size: 2rem!important;}
.page-layout {
  align-items: flex-start;
  max-width: 100%;
  padding: 1.2rem;
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  color:#fff}
  
  a {color:#fff!important;}
  a:hover {color:#40b4c5;}

.icon {max-width:30px;}
.icon:hover {
  cursor:pointer;
  transform:translateY(-8px);
  transition: .35s ease-in-out;
  }
.button {
  border: 1px;
  border-style: solid;
  border-color:#fff;
  border-radius:0.8rem;
  align-content:center;
  padding:5px;
  height:auto;
  width:auto;
  margin:.2rem;
  max-width:30%!important;
}
.button:hover {
  background-color:rgba(255, 255, 255, 0.35);
  transition:1.5s;
  cursor:pointer;
  }
.wrap {
  width: min-content;

}

/* Hide React-Grid-Layout ResizeHandle for now */
.react-resizable-handle.react-resizable-handle-se .react-grid-item{
    opacity: 0!important;
}}


/* phone/ipad */
@media screen and (max-width: 749px){
  
  

body {background-image:url("https://futurebuff.neocities.org/images/background-mobile.png");
background-repeat:repeat;
background-size: 100vw 100vh;
color:#fff!important;}

#navbar {
 
  font-size: 1.5rem;
  margin:auto;
}
.navlink {
  margin:auto;
  padding:3rem;
  }
  
  
.headerimage {
  width:40%;
  margin:auto;
  padding-top:1rem;
  display:block;
  
}
.themed-grid-col {
  padding-top: .75rem;
  padding-bottom: .75rem;
 
}

.themed-container {
  padding: .75rem;
  margin-bottom: 1.5rem;
 
}

.border {
  border:2px solid black;
  border-radius:10px;
}

.addborder { border-bottom-style: solid;}


.mainblock-small{
	border-radius: 0.8rem;
	border-style: solid;
	border-width: 0.1rem;
	border-color: rgba(0, 0, 0, 0.15);
	text-align: left;
	box-shadow: 0rem -2.2rem 1rem -2.2rem rgba(0, 0, 0, 0.15) inset;
	padding-bottom: 11.8rem;
	max-height:75%;
display:block;
	background-color:#d61c1c;
	padding: 1rem;
	margin-bottom:1rem;
}
.faqblock-small{
	border-radius: 0.8rem;
	border-style: solid;
	border-width: 0.1rem;
	border-color: rgba(0, 0, 0, 0.15);
	text-align: left;
	box-shadow: 0rem -2.2rem 1rem -2.2rem rgba(0, 0, 0, 0.15) inset;
	padding-bottom: 11.8rem;
	max-height:75%;
display:block;
	background-color:#d61c1c;
	padding: 1rem;
	margin-bottom:1rem;
}
.about-small {
	border-radius: 0.8rem;
	border-style: solid;
	border-width: 0.1rem;
	border-color: rgba(0, 0, 0, 0.15);
	text-align: center;
	box-shadow: 0rem -2.2rem 1rem -2.2rem rgba(0, 0, 0, 0.15) inset;
	padding-bottom: 1rem;
	max-height:60%;
	background-color:#d61c1c;
padding: .75rem;
 display:block;
 	margin-bottom:1rem;

}
.socials-small {
	border-radius: 0.8rem;
	border-style: solid;
	border-width: 0.1rem;
	border-color: rgba(0, 0, 0, 0.15);
	text-align: left;
	box-shadow: 0rem -2.2rem 1rem -2.2rem rgba(0, 0, 0, 0.15) inset;
	max-height:30%;
	background-color:#d61c1c;
display:block;
padding-top:1rem;
	margin-bottom:1rem;

}

.main-text-small {font-family:"Bagnard";}
.body-text-small {font-family:"MPLUS2";}
h1 {font-size: 4rem!important;}
h2 {font-size: 2rem!important;}
.page-layout-small {
  max-width: 100%;
  padding: 1.2rem;
  flex-grow: 1;
  margin:1rem;
  color:#fff}
  
  a {color:#fff!important;}
  a:hover {color:#40b4c5;}

.icon {max-width:30px;margin-bottom:12px;}
.icon:hover {
  cursor:pointer;
  }
.button {
  border: 1px;
  border-style: solid;
  border-color:#fff;
  border-radius:0.8rem;
  align-content:center;
  padding:5px;
  height:auto;
  width:auto;
  margin:.2rem;
  max-width:30%!important;
}
.button:hover {
  background-color:rgba(255, 255, 255, 0.35);
  transition:1.5s;
  cursor:pointer;
  }


.x {
  pointer-events: none;
  position: absolute;
  bottom: 0;
  right: -20px;
  line-height: 0;
  color: red;
  font-size: 50px;
}
  
  
  
}