html {
    scroll-behavior: smooth;

}

.linkBody {
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
    margin-top: 5%;
    width: 50%;
    background-color: black;
    color: rgb(243, 166, 0);
}

body {
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
    margin-top: 5%;
    width: 75%;
    background-color: black;
    color: rgb(243, 166, 0);
}

/*.mobile-container {
  max-width: 480px;
  margin: auto;
  background-color: #555;
  height: 500px;
  color: white;
  border-radius: 10px;
}*/

nav ul{
    list-style-type: none;
    font-family: "Story Script", system-ui;
    font-weight: 400;
    font-style: normal;
    font-size: x-large;
    letter-spacing: 2px;
}

.explain {
    justify-content: left;
    align-items: left;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
}

.explain h2 {
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 20px;
}

.card {
    display: flex-box;
    width: 350px;
    height: fit-content;
    border: solid 5px rgb(243, 166, 0);
    border-radius: 5px;
    padding: 20px;
    background-color: rgba(136, 136, 136, 0.25);
    margin-left: auto;
    margin-right: auto;
}

h1 {
  font-family: "Boldonse", system-ui;
  font-weight: 400;
  font-style: normal;
}

h2 {
  font-family: "Boldonse", system-ui;
  font-weight: 200;
  font-style: normal;
  font-size: small;
  letter-spacing: 2px;
  word-spacing: 3px;
}

h3 {
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: "Boldonse", system-ui;
    font-weight: 200;
    font-style: normal;
    font-size: 10px;
    letter-spacing: 2px;
    word-spacing: 3px;
    height: 10px;
}

p {
        line-height: 2;

}

.story-script-regular {
  font-family: "Story Script", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: x-large;
  letter-spacing: 2px;
}

.imgWifi {
    
    width: 30%;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    border-radius: 100%;
}

@property --angle{
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
.element {
    display: flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;    
    height: 110px;
    width: 110px;    
    background-image: conic-gradient(from var(--angle), rgb(243, 166, 0), rgb(0,0,0), rgb(243,166,0)); 
    animation: 5s spin linear infinite;
    border-radius: 100%;
}

@keyframes spin{
    from{
        --angle: 0deg;
    }
    to{
        --angle: 360deg;
    }
}
.imgWifi-index {
    margin: auto;
    width: 100px;    
   /*border-image: linear-gradient(to right, rgb(243, 166, 0), rgb(243, 198, 0)) 1;*/
    border-radius: 100%;
}

div .imgShoprow {
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    align-items: center;
    width: 75%;
}
.imgShopcol {
    flex: 50%;
    max-width: 150px;
    padding: 0px 10px;
}
.imgShop {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    border: none;
    
}

.imgecom {
    margin-left: auto;
    margin-right: auto;
    width: 150px;
    height: auto;
}

hr {
    max-width: 75%;
    border: 1px solid rgb(243, 166, 0);
    border-radius: 100%;
}

.personal {
    margin-top: 35px;
}

.container {
    padding-top: 015px;
    padding-bottom: 10px;
    
}

div {
    color: rgb(243, 166, 0);
}

button {
    border-style: outset;
    display: block;
    width: 100%;
    background-color: rgb(128, 128, 128, 20%);
    color: rgb(243, 166, 0);
    border-radius: 100%;
    transition: .3s;
    text-decoration: 1px solid black;
}

/*.formButton {
    justify-content: center;
    align-items: center;
    text-decoration: none;
    border-style: none;
    width: 20%;
    border-radius: 0%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid rgb(243, 166, 0);
}*/

.btn {
    margin: 15px 20px;
}

button:hover {
    background-color: rgba(70, 70, 70, 0.3);
    color: rgb(243, 166, 0);
    text-shadow: 1px 1px 01px rgba(255, 174, 0, 0.7);
}

/*.formButton:hover {
    background-color: rgba(70, 70, 70, 0.3);
    text-shadow: none;
}*/

.button::after {
    content: "";
    position: absolute;
    inset: -.625em;
    background: linear-gradient(to bottom right,
    rgb(128, 128, 128), rgb(226,155,1));
    filter: blur(2.5em);
    z-index: -1;
}

a {
    text-decoration: none;
    color: rgb(243, 166, 0);
}

.hr {
    margin-top: 30px;
    margin-bottom: 30px;
}

#hidden {
    display: none;
    /*width:75%;
    height: fit-content;
    border: solid 5px rgb(243, 166, 0, 0.25);
    border-radius: 5px;
    padding: 5px;
    background-color: rgba(136, 136, 136, 0.25);
    margin-left: auto;
    margin-right: auto;*/
}

/*.textarea {
    margin: 20px;
}

.divForm {
    padding-top: 5px;
    padding-bottom: 5px;
}

input[type="email"] {
  width:200px;
}

footer {
    margin: 50px;
}*/

#top {
    padding-top: 20px;
}

.links {
    display:flex;
    justify-content: center;    
    align-items: center;
    text-align: center;
}

.linkSpace {
    padding-right: 10px;
    padding-left: 10px;
}

.linkChild {
    flex: 0 1 auto;
}

iframe {
    display: flex-box;
    width: 100%;
    height: 250px;
    max-width: 500px;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
    flex-shrink: 3;

}