:root{}

*{
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
margin:0;
padding-top:70px;
background:#272727;
color:#eaeaea;
font-family: Courier, sans-serif;
line-height:1.6;
}

/* HEADER */
.yPhone-header{
position:fixed;
top:0;
left:0;
right:0;
height:70px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 8%;
background:#1f1f1f;
border-bottom:1px solid #222;
z-index:10000;
}

.logo{
font-size:22px;
font-weight:600;
color:var(--accent);
text-decoration: none;
}

nav{
display:flex;
gap:25px;
}

nav a{
text-decoration:none;
color:#ddd;
font-size:14px;
}

nav a:hover{
color:var(--accent);
}

/* HAMBURGER */

.hamburger{
display:none;
flex-direction:column;
gap:5px;
cursor:pointer;
}

.hamburger span{
width:25px;
height:3px;
background:var(--accent);
display:block;
}

/* SECTIONS */
section{
  padding: 90px 8%;
  max-width: 1200px;
  margin: auto;
  scroll-margin-top: 80px;
  border-bottom: 1px solid #ddd;
  margin-bottom: 40px;
}
	
h1{
font-weight: 200;
font-style: italic;
color: #ffffff;
}

h2{
font-weight: 200;
font-style: italic;
color:var(--accent);
}

.hero{
text-align:center;
}

.hero h1{
font-size:36px;
margin-bottom:10px;
}

.hero p{
color:#d9d4d4;
}

/* VIDEO */

.video{
position:relative;
padding-bottom:56.25%;
height:0;
}

.video iframe{
position:absolute;
width:100%;
height:100%;
}

/* FEATURES */

.features ul{
padding-left:20px;
}

.features li{
margin:12px 0;
}

/* GALLERY */

.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}

.gallery img{
width:100%;
border-radius:6px;
}

/* FAQ */

.faq-item{
border-bottom:1px solid #222;
padding:15px 0;
cursor:pointer;
}

.faq-answer{
display:none;
color:#aaa;
padding-top:10px;
}

/* CONTACT */
/* WiFi */
.contact form,
.wifi form{
display:grid;
gap:15px;
}

input,textarea{
background:#111;
border:1px solid #333;
padding:12px;
color:white;
border-radius:4px;
}

select{
background:#111;
border:1px solid #333;
padding:12px;
color:white;
border-radius:4px;
width:100%;
}

button{
background:var(--accent);
border:none;
padding:12px;
color:black;
font-weight:600;
cursor:pointer;
}

/* FOOTER */

footer{
text-align:center;
padding:40px;
border-top:1px solid #222;
color:#777;
}

/* MOBILE */

@media(max-width:768px){

nav{
position:absolute;
top:70px;
left:0;
width:100%;
background:#0a0a0a;
flex-direction:column;
text-align:center;
display:none;
border-top:1px solid #222;
}

nav a{
padding:15px;
}

nav.active{
display:flex;
}

.hamburger{
display:flex;
}

}

.emailcfr{
font-size:20px;
color:var(--accent);
}

.wificode img,
.wificode {
    display: block;
    margin: 20px auto;
}
.wificode img {
	margin-top: 50px;
}

.wificode {
    background: white;
    color: black;
    padding: 12px;
    border-radius: 4px;
    font-family: monospace;
    text-align: center;
    word-break: break-all;
}