@font-face {font-family: "chiller"; src: url("./fonts/chiller.ttf")}
@font-face {font-family: "oddballz"; src: url("./fonts/oddballz.ttf")}
@font-face {font-family: "gen"; src: url("./fonts/Gen-Light.otf")}
@font-face {font-family: "bybsy"; src: url(./fonts/bybsy-regular-webfont.ttf);}
@font-face {font-family: "playwrite"; src: url(./fonts/PlaywriteCU-VariableFont_wght.ttf);}


body{
   /* font-family: 'gen'; */
   font-family: Courier;
   font-weight: 100;
   font-size: 0.8rem;
   /* background-color: rgb(30, 212, 152); */
   background-color: black;
   color: red;
   display: grid;
   gap: 10px;

}

.nahb {
    border:0 none;
 }

 a{
   color: aliceblue;
 }

 a:visited{
   color: lightblue
 }

 a:hover{
   color: hotpink;
 }


 input[type="text"],
 input[type="email"],
 textarea
 {
   background-color: #0a0a23;
   color: whitesmoke;
   width: 90%;
   border: 1px solid #0a0a23;
 }

 input:focus {
   outline: none !important;
   border: 2px solid grey;
   box-shadow: 0 0 10px #719ECE;
 }

 input[type="checkbox"]{
   /* accent-color: #e7e738; */
   accent-color: #4CAF50;
 }

select:focus {
   outline: none !important;
   border: 2px solid red;
   box-shadow: 0 0 10px #719ECE;
 }

 .at{
   font-family: 'gen';
   font-size: 1.2rem;
   color: white;
   margin-left: 3px;
   margin-right: 0;
 }

 #banner{
   display: block;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 5px;
   max-width: 400px;
   width: 95%;
   border: 5px solid red

 }

 .bring > * {
    display: flex;
    flex-direction: column;
 }

#comment{
   max-width: 300px;
}

 .confirm{
   font-size: .7rem;
 }

 #emergency{
   width: 60%
 }

 #endless-subs{
   display: flex;
   flex-direction: column;
}

#feedback{
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   max-width: 500px;
   margin-left: auto;
   margin-right: auto;
}

#feedback p{
   width: 95%;
   text-align: center;
}

 .guest-corn{
   width: 25px;
   filter: invert(85%) sepia(81%) saturate(453%) hue-rotate(359deg) brightness(95%) contrast(91%);
   /* fill: #e7e738; */
 }

 .hotpink{
   width: 25px;
   filter: invert(23%) sepia(81%) saturate(3963%) hue-rotate(326deg) brightness(100%) contrast(98%);
 }

 .blue{
   width: 25px;
   filter: invert(61%) sepia(85%) saturate(5012%) hue-rotate(164deg) brightness(99%) contrast(101%);
 }

 .green{
   width: 25px;
   filter: invert(56%) sepia(84%) saturate(345%) hue-rotate(73deg) brightness(90%) contrast(83%);
 }

 .hotpurple{
   width: 25px;
   filter: invert(16%) sepia(96%) saturate(7478%) hue-rotate(284deg) brightness(102%) contrast(95%);
 }

 .red{
   width: 25px;
   filter: invert(15%) sepia(77%) saturate(7495%) hue-rotate(8deg) brightness(101%) contrast(101%);
 }

 .glacier{
   width: 25px;
   filter: invert(68%) sepia(74%) saturate(2063%) hue-rotate(180deg) brightness(97%) contrast(92%);
 }

 .pea{
   width: 25px;
   filter: invert(67%) sepia(23%) saturate(6215%) hue-rotate(33deg) brightness(100%) contrast(102%);
 }

 .white{
   width: 25px;
   filter: invert(90%) sepia(19%) saturate(108%) hue-rotate(149deg) brightness(100%) contrast(101%);
 }

 .orange{
   width: 25px;
   filter: invert(69%) sepia(43%) saturate(2886%) hue-rotate(357deg) brightness(99%) contrast(107%);
 }

 .teal{
   width: 25px;
   filter: invert(44%) sepia(91%) saturate(342%) hue-rotate(107deg) brightness(96%) contrast(88%);
 }


footer{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 10px;
   align-items: center;
   justify-content: center;
   margin-top: 25px;
}

 #guest-note{
   font-size: .60rem;
   color: white;
 }

 .hidden{
   display: none;
 }


 #info{
   /* background-color: #4CAF50; */
   background: url(./media/parch.png);
   background-repeat: no-repeat;
   /* background-attachment: fixed; */
   background-position: center;
   background-size: 220% 200%;
   /* background-size: 100%; */
   /* height: 500px; */
   color: #0a0a23;
}

#info h1{
   font-family: 'bybsy';
   font-size: 24px;
}

 #info-body{
   /* font-family: "bybsy"; */
   font-size: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 10px;
 }

 .salutation{
   font-family: 'bybsy';
   font-size: 24px;
   text-align: right;
   margin-top: 0;
   margin-bottom: 0px;
   margin-right: 100px;
 }

 #iname{
   text-align: right;
   margin-top: 0;
   margin-right: 25px;
   margin-bottom: 5px;
   font-family: "playwrite";
   font-size: 24px;
   font-weight: bold;
 }

 legend{
   font-family: 'oddballz';
   color: white
 }


#nights-box{
   font-family: 'chiller';
   font-size: 48px;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 25%;
}

 #nights-slider{
   writing-mode: vertical-lr;
   background-color: #4CAF50;
 }

 #prompt{
   font-family: 'chiller';
   font-size: 2rem;
   color: white;
   text-align: center;
 }

 #get-prompt{
   font-family: 'bybsy';
 }
 
 #get-prompt:hover {
   background-image: linear-gradient(rgb(0 0 0/40%) 0 0);
 }

#prompt-box{
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   margin-bottom: 10px;
}

 #sleepover{
   display: flex;
   flex-direction: column;
   /* align-items: center; */
 }

 .pert{
   max-width: 300px;
 }

 .pnum{
   /* background-color: #e7e738; */
   /* background-color: grey; */
   color: #e7e738;
 }

.playme{
   width: 40%;
   max-width: 200px;
   margin-top: 10px;
}

#seealso{
   width: 100%;
   text-align: center;
}

 #sleepover select{
   width: 100%;
   background-color: #4CAF50;
 }

#breakfast label{
   color: #c7362c;
}

 .slider {
   /* -webkit-appearance: none; */
   width: 100%;
   height: 15px;
   border-radius: 5px;
   background: #d3d3d3;
   background-color: #4CAF50;
   outline: none;
   opacity: 0.7;
   transition: opacity 0.15s ease-in-out;
}

.slider:hover {
   opacity: 1;
}

/* .slider::-webkit-slider-thumb, */
#nights-slider::-webkit-slider-thumb {
   /* -webkit-appearance: none; */
   writing-mode: vertical-lr;
   appearance: none;
   width: 25px;
   height: 25px;
   border-radius: 50%;
   background: #4CAF50;
   cursor: pointer; 
}
.slider::-webkit-slider-thumb{
   appearance: none;
   width: 25px;
   height: 25px;
   border-radius: 50%;
   background: #4CAF50;
   cursor: pointer;
}

#random-image{
   width: 100%;
   width: 199px;
   height: 247px;
   border: 4px solid black;
   outline: 4px solid #3885d6;
   border-radius: 5px;
}

.rules{
   color: white;
   font-size: .9rem;
   font-weight: bold;
}

#tinder{
   display: grid;
   grid-template-rows: 1fr 100px;
   align-items: baseline;
   justify-content: center;
   margin-top: 10px;
   margin-bottom: 10px;
}
.button-box{
   display: flex;
   margin-top: 5px;
   margin-bottom: 0;
   gap: 100px
}

#image-container{
   display: flex;
   align-items: center;
   justify-content: center;
}

.tinder-button{
   box-shadow: 0px 0px 14px 5px rgb(156, 152, 152);
	/* background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%); */
	background-color:white;
	border-radius:50px;
   width: 90px;
	/* border:1px solid #18ab29; */
	display:inline-block;
	cursor:pointer;
	font-family:Arial;
	/* font-size:28px; */
	padding:20px 0px;
	text-decoration:none;
}

#heart-button{
   color: rgb(11, 201, 11);
   font-size: 40px;
}

#x-button{
   color: red;
   font-size: 40px;
}

#tinder-friends {
   display: flex;
   flex-wrap: wrap;
}
#tinder-friends img {
   max-width: 50px;
   margin: 2px;
   border-radius: 50%;
}

#submit {
	box-shadow: 3px 4px 0px 0px #8a2a21;
	background:linear-gradient(to bottom, #c62d1f 5%, red 100%);
	background-color:red;
	border-radius: 100%;
	border: 1px solid #d02718;
	display: block;
	cursor:pointer;
	color:#ffffff;
	font-family: 'chiller';
	font-size: 50px;
	padding:7px 25px;
	text-decoration:none;
	text-shadow:0px 1px 0px #810e05;
   margin-left: auto;
   margin-right: auto;
   margin-top: 10px;

}
#submit:hover {
	background:linear-gradient(to bottom, #f24437 5%, #c62d1f 100%);
	background-color:#f24437;
}
#submit:active {
	position:relative;
	top:1px;
}

.topic{
   /* font-size: 1rem; */
   color: #c7362c;
   /* font-family: 'gen'; */
}