@font-face {
  font-family:Stereohead;
  src: url(Stereohead.otf)
}


.body-index {
  height: auto;
  background-color: #2A382A;
  background-image: linear-gradient(rgba(42, 56, 42, 0.4), rgba(42, 56, 42, 0.4)),url("circuit.png");
  
background-size: 142%;

}

.body-service {
    background-color: #2A382A;
  background-image: linear-gradient(rgba(42, 56, 42, 0.4), rgba(42, 56, 42, 0.4)),url("circuit.png");
  height: auto;
  
  background-size: 142%;
  
}
.body-contact {
  background-color: #2A382A;
  background-image: linear-gradient(rgba(42, 56, 42, 0.4), rgba(42, 56, 42, 0.4)),url("circuit.png");
  background-size: 142%;
  height: auto;
}

.body-about {
  background-color: #2A382A;
  background-image: linear-gradient(rgba(42, 56, 42, 0.4), rgba(42, 56, 42, 0.4)),url("circuit.png");
  height: auto;
  background-size: 142%;
  
}

/*grid box*/
.grid-container {
 opacity: 0.97;
 display: grid;
 size: 500px;
 grid-template-columns: 1fr 2fr;
 grid-template-rows: 1fr 2fr;
 gap: 2px;
 margin: 20px;
 padding: 10px;
 height: 500px;
 background-color: #1C1C1F;
 border-style: outset;
 border-color: #7A7678;
 border-radius: 15px;
 border-width: 5px;
 box-shadow: 1px 1px 15px #000000;
}

/*grid box content*/
.content {
 grid-column: 2fr;
 grid-row: 2fr;
}
.sidebar {
 grid-column: 1fr;
 grid-row: 1fr;
}
.footer {
 grid-column: 2fr;
 grid-row: 2fr;
}

/*grid box service*/
.grid-container-service {
  opacity: 0.97;
 display: grid;
 size: 500px;
 grid-template-columns: 1fr 2fr;
 grid-template-rows: auto auto;
 gap: 2px;
 margin: 20px;
  padding: 10px;
 height: auto;
 background-color: #1C1C1F;
 border-style: outset;
 border-color: #7A7678;
 border-radius: 15px;
 border-width: 5px;
 box-shadow: 1px 1px 15px #000000;
}

/*grid box content service*/
.content-service {
 grid-column: auto;
 grid-row: auto;
 width: 100%;
}
.sidebar-service {
 grid-column: auto;
 grid-row: auto;
 width: 100%;
}
.footer-service {
 grid-column: 2fr;
 grid-row: 2fr;
}

/*grid box contact*/
.grid-container-contact {
  opacity: 0.97;
 display: grid;
 size: 500px;
 grid-template-columns: 1fr 2fr;
 grid-template-rows: 1fr 2fr;
 gap: 2px;
 margin: 20px;
  padding: 10px;
 height: 500px;
 background-color: #1C1C1F;
 border-style: outset;
 border-color: #8C8B8C;
 border-radius: 15px;
 border-width: 5px;
 box-shadow: 1px 1px 15px #000000;
}

/*grid box content contact*/
.content-contact {
 grid-column: 2fr;
 grid-row: 2fr;
}
.sidebar-contact {
 grid-column: auto;
 grid-row: auto;
 width: 100%
}
.footer-contact {
 grid-column: 2fr;
 grid-row: 2fr;
}

/*grid box about*/
.grid-container-about {
  opacity: 0.97;
 display: grid;
 size: 500px;
 grid-template-columns: auto auto;
 grid-template-rows: auto auto;
 gap: 2px;
 margin: 20px;
  padding: 10px;
 height: auto;
 background-color: #1C1C1F;
 border-style: outset;
 border-color: #7A7678;
 border-radius: 15px;
 border-width: 5px;
 box-shadow: 1px 1px 15px #000000;
}

/*grid box content about*/
.content-about {
 grid-column: 2fr;
 grid-row: 2fr;

}
.sidebar-about {
 grid-column: 1fr;
 grid-row: 1fr;
 width: 20px;
 float: right;
}
.footer-about {
 grid-column: 2fr;
 grid-row: 2fr;
 
}

/* navbar settings */
 .navbar {
  
margin-bottom: 30px;
text-align: center;
  
}

/* navbar text settings */
 nav a {
   background-color: #1C1C1F;
   box-shadow: 1px 1px 15px #0D1A26;
   border-style: outset;
  border-width: 5px;
  border-color: #8C8B8C;
  border-radius: 10px;
  margin: 20px;
  color: white;
  text-decoration: none;
  font-size: 40px; 
  font-family: "stereohead";
  text-shadow: 3px 3px #332345;
  text-align: center;
  
  padding: 10px;
 }


h1 {
  color: #EAF2E1;
  font-size: 50px;
  text-shadow: 3px 3px #332345;
  font-family: "stereohead";
  text-align: center;
    border-style: outset;
  border-width: 5px;
  border-color: #8C8B8C;
  border-radius: 10px;
  box-shadow: 1px 1px 15px #0D1A26;
  background-color: #1C1C1F;
  display: inline-block;
  padding: 15px;
}
h2 {
  color: white;
  font-size: 35px;
  text-shadow: 3px 3px #332345;
  font-family: "stereohead";
  text-align: center;
  padding: 15px;
  display: inline-block;
}

.header {
 text-align: center; 
}


p {
  font-size: 35px;
  color: #EAF2E1;
  font-family: "stereohead";
  text-shadow: 2px 2px #332345;
}

.content-about {
text-align: center;  
}


.content-service {
 width: 600px; 
 color: white;
 font-size: 35px;
 font-family: "stereohead";
  text-shadow: 2px 2px #332345;
}

.content-contact {
 width: 600px; 
}

ul {
  list-style: none;
}


iframe {
 height: 450px;
 width: 450px;
 background-color: #2A382A;
 border-color: #223029;
 border-style: solid;
 border-width: 6px;
 border-radius: 10px;
 box-shadow: 1px 1px 15px #000000;
}





details {
  padding: 10px;
  font-size: 25px;
  cursor: pointer;
}


summary {
  font-size: 30px;
  margin: 0;
}


sidebar {
    font-size: 35px;
  color: white;
  font-family: "stereohead";
  text-shadow: 2px 2px #332345;
  float: right;
  width: 500px;
}

footer {
   font-size: 20px;
  color: white;
  font-family: "stereohead";
  text-shadow: 2px 2px #332345; 
  margin-top: 200px;
}